This document introduces AngularJS and provides an agenda for a presentation on the framework. It discusses single page applications, data binding, controllers, services, directives and dependency injection in AngularJS. It also gives examples of how to use data binding, controllers, services and directives. The presentation aims to explain how AngularJS helps address issues with thick client applications and promotes maintainability.

1. Introducing AngularJS

2. Loc Nguyen
● Java, Ruby, JavaScript, C#, PHP
● Sr Engineer at SignNow, full stack consultant
● AngularJS OC and Code for OC meetup organizer
● @locn
● lochnguyen@gmail.com

3. Agenda
● The single page app
● Live coding…
o Data binding
o Controllers
o Services
o Directives
● Examine an app….?

4. Not on Agenda
● REST integration
● Promises
● Routing
● Testing
● Angular UI
● Yeoman, Bower, Grunt, Gulp
● Integrating non-Angular libraries
● Performance gotchas* egghead.io

5. Thick client pains
● Tight coupling to server technologies
● Model or DOM as the truth
● Promoting maintainability
○ Responding to change
○ Ease of testing
○ Organized code
OOP}

6. History for hipsters
● DHTML
● Web 2.0
● Rich Internet Applications
● Ambitious web apps™

7. State of the MVC

8. The Trend of Things

9. (Rock) Stars

10. Double Jeopardy?

11. Web vs Desktop MVC
Model2 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

13. Data binding in Angular*
● $scope
o application glue
o source of truth, or a view model
o provides observers for state changes

14. Data binding example
(Angularians plz ignore anti-patterns)

15. Data binding in Angular*
● $watch list
// pseudo code, implicit watchers from
example
$watchList = [
$watch('scope.tweet'),
$watch('scope.imageUrl')
]

16. Data binding in Angular*
● $watch function, explicit watcher
$scope.$watch(function () {
return map.currentCity;
}, function (center) {
// update OKCupid match list
});

17. Explicit watcher example

18. Data binding in Angular*
● $digest loop
o Loop through the $watch list and do a dirty check
o Keep track of new values
o Keep looping until no values have changed
o Finally, repaint DOM
● $digest triggers
o ng-events, ng built-in services, $scope.$apply()

19. Dependency Injection
● Reduce coupling
● Improves testability
● Promotes reusability

20. Dependency Injection
function travel(a, z) {
setOrigin(a);
setDest(z);
var route =
getRoute();
var car = new Car();
car.go(route);
}
travel('Irvine', 'Orange')

21. 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());

22. Controllers
● More glue between view and model
● Manage data models
● Created and destroyed with route/view
changes

23. Services
● Singleton objects
● Communication between controllers
● Maintain state for lifetime of app

24. Controller & Service
Example

25. Directives
The Awesome Sauce™ in AngularJS
● Good on anything
● Apply liberally
● Carry extra

26. Directives
● Built-in directives
○ ng-show, ng-click, ng-repeat
● Custom directives
○ reusable widgets
○ declarative programming
○ wrap non Angular libraries

27. Directive Examples

28. Mobile web app example

29. meetup.com/angularjs-oc meetup.com/CodeforOC