Loc Nguyen● Java, Ruby, JavaScript, C#, PHP
● Sr Engineer at SignNow, full stack consultant
● AngularJS OC and Code for OC meetup
organizer
● @locn
Agenda● The single page app● Live coding…
o Data bindingo Controllerso Serviceso Directives
● Examine an app….?
Not on Agenda● REST integration● Promises● Routing● Testing● Angular UI● Yeoman, Bower, Grunt, Gulp● Integrating non-Angular libraries● Performance gotchas* egghead.io
Thick client pains● Tight coupling to server technologies
● Model or DOM as the truth
● Promoting maintainability
○ Responding to change
○ Ease of testing
○ Organized codeOOP
}
Web vs Desktop MVCModel2 MVC● Model notifies no one● Controller pulls
changes into view with each request
● Browser renders model state
MVC● Model notifies
observers● View observes
models● View reflect model
state
Data binding in Angular*● $scope
o application glueo source of truth, or a view modelo provides observers for state changes
Data binding in Angular*● $watch list
// pseudo code, implicit watchers from example
$watchList = [$watch('scope.tweet'),$watch('scope.imageUrl')
]
Data binding in Angular*● $watch function, explicit watcher
$scope.$watch(function () {
return map.currentCity;}, function (center) {
// update OKCupid match list});
Data binding in Angular*● $digest loop
o Loop through the $watch list and do a dirty check
o Keep track of new valueso Keep looping until no values have changedo Finally, repaint DOM
● $digest triggerso ng-events, ng built-in services, $scope.
$apply()
Dependency Injectionfunction travel(a, z) {
setOrigin(a);setDest(z);var route =
getRoute();
var car = new Car();car.go(route);
}
travel('Irvine', 'Orange')
Dependency Injection
function travel(a, z, transport) {
setOrigin(a);setDest(z);
var route = getRoute();transport.go(route);
}
travel(1985, 1955);
travel(1985, 1955, new TimeMachine());
Controllers● More glue between view and model● Manage data models● Created and destroyed with route/view
changes
Directives● Built-in directives
○ ng-show, ng-click, ng-repeat
● Custom directives○ reusable widgets○ declarative programming○ wrap non Angular libraries