This document discusses AngularJS, a JavaScript MVC framework. It begins with an introduction to typical web applications and how AngularJS differs by separating the model and view. The key concepts of AngularJS MVC like directives, expressions, filters and controllers are explained. Several demos are provided to illustrate AngularJS features in action. The document also explains how AngularJS works at startup and runtime before concluding with recommendations for application structure and extensibility.

1. 13/05/12 Jumping Bean
AngularJS – Teaching HTML New Tricks
By Mark Clarke

2. 13/05/12 Jumping Bean
About Me
➔ Open source solutions integrator,
➔ Java developer,
➔ Drupal developer,
➔ Love Linux,
➔ Work at Jumping Bean
➔ Www.jumpingbean.co.za
➔ G+ - Jumping Bean
➔ Social Networks
➔ Twitter @mxc4
➔ G+ MClarke4@gmail.com

3. 13/05/12 Jumping Bean
Typical Web Application
➔ Pre Web 2.0
➔ Template language and model merged server
side and sent to client
➔ Web 2.0
➔ jQuery – Dom manipulation,
➔ InnerHTML manipulation
➔ Model & view not separated
➔ Application logic mixed with presentation logic

4. 13/05/12 Jumping Bean
What is AngularJS?
➔ A javascript MVC framework,
➔ Run entirely in browser,
➔ Decouple DOM manipulation from Application
logic,
➔ Built with testing in mind,
➔ Declarative approach for UI (HTML)
➔ Imperative approach for application logic
(Javascript)

5. 13/05/12 Jumping Bean
What is MVC?
HTML =>
<= Javascript
<= Object literal

6. 13/05/12 Jumping Bean
AngularJS MVC
➔ Declarative UI
➔ HTML,
➔ Angular directives,
➔ DSL to create new tags
➔ Expressions {{ }}

7. 13/05/12 Jumping Bean
AngularJS MVC
➔
Javascript controller,
➔ Does not reference view
directly
➔ Dependency injection
➔ Explained later

8. 13/05/12 Jumping Bean
➔ $scope is a container of your
model (application state),
➔
Single source of truth for
application state,
➔ Dependency injected by
framework into controller,
➔ $scope provide execution context
for expressions
AngularJS MVC

9. 13/05/12 Jumping Bean
View Key Concepts
➔ Directives
➔ New tags, attributes or classes that define new
functionality
➔ Expressions
➔ Binding syntax - {{ }} refer to model elements and
updated automatically. Framework keeps UI and
model in sync
➔ Filters
➔ Format data for display

10. 13/05/12 Jumping Bean
Controller Key Concepts
➔ AngularJS namespace $,
➔ Dependency injection
➔ Require services are provided by the framework
➔ $scope, $location, $window $hxr etc
➔ Can create own services for dependency injection,
➔ Set up model,
➔ Create event listener functions

11. 13/05/12 Jumping Bean
Controller Key Concepts
➔ Naming convention
➔ Use camel case in javascript code,
declaring directives etc (ngRepeat)
➔ Use snake case in html (ng-repeat)

12. 13/05/12 Jumping Bean
AngularJS - MVC

13. 13/05/12 Jumping Bean
Demos
Enough theory time for some demos
➔ Demo 1
➔ Basic ng-App, no controller
➔ Demo 1a
➔ Some more built-in directives, form validation,show.hide
➔ Demo 2
➔
Controller and ng-repeat directive
➔ Demo 3
➔ Filter demo
➔ Demo 4
➔ Filter and orderBy

14. 13/05/12 Jumping Bean
Demos
➔ Demo 5
➔ Dependency injection hxr service $http

15. 13/05/12 Jumping Bean
How does this magic work?
➔ Life cycle of AngularJS app
➔ Startup/Bootstrapping of application
➔ Runtime processing of application

16. 13/05/12 Jumping Bean
How it Works - Startup
➔ Loading page - Bootstrapping
➔ On DOMContentLoaded Event
➔ Find the root of the angular application (ng-app)
➔ DOM Compilation
➔ Compile: transverse DOM to find directives &
expressions
➔ Set up watches, add listeners/callbacks etc
➔ Link: Combine directives with $scope (model)
and produce view

17. 13/05/12 Jumping Bean
How it Works - Startup

18. 13/05/12 Jumping Bean
How it works - Runtime
➔ After dom compilation,normal browser
events fire and call back to AngularJS
➔ AngularJS has internal event loop,
➔ All callbacks wrapped in $apply call,
➔ $apply calls $digest which checks for
changes in model and fires update
events

19. 13/05/12 Jumping Bean
How it works - Runtime

20. 13/05/12 Jumping Bean
Demo
➔ Demo 6
➔ How to write your own directive
➔ DSL

21. 13/05/12 Jumping Bean
Angular Application
Development
➔ Standard structure recommended for
application layout
➔ Angular-seed project provides base
structure
➔ Single page application with ngView
directive and partials

22. 13/05/12 Jumping Bean
AngularJS is Extensable
➔ Can create own
➔ Filters
➔ Directives
➔ Services
➔ Useful for CRUD applications
➔ Can still use jQuery for DOM
manipulation

23. 13/05/12 Jumping Bean
AngularJS Modules
➔ Modules are containers for angularjs
components
➔ Used to define services, factories,
directives and application configuration