Single Page Applications can be built with Angular.js, an MVC framework. Angular.js uses controllers to set up initial state with $scope. Two-way binding with {{}} connects the view and model. Modules contain reusable code like services, directives, filters. Directives extend HTML with behaviors. Services can manipulate data and DOM. Filters format expressions. Routing with $routeProvider renders templates into ngView. Angular.js is declarative, testable and brings order to applications, though it requires learning and errors may not be visible. Version 1.2 will improve animations, aliases, error messages and documentation.

1. Single Page Applications
with
Angular.js
Danny Vernovsky
dannyv@sela.co.il
@dimkinv

2. Agenda
• Why web applications are hard?
• Angular.js, how to? (Movie lib)
• Pros & cons
• Q & A

3. Once upon a time...
In 2005...

4. In 2013...

5. MV what?
Model
Controller
View

6. Angular.js as a framework
• Based on MVC pattern
o application.controller('myCtrl')
• Can extend HTML vocabulary
o application.directive('myElement')
• Injectables
o function($scope, $myService)
• Two way binding
o {{model.firstName}}

7. Controllers
• Controllers are just functions
• Used to setup initial state with $scope
• Used to setup behaivours

8. $scope
• Holds the model
• Provide API's (e.g $watch)
• Connects between view and
controller

9. Demo
Hello Angular

10. Modules
• No "main" method for application
• Closed package code / reusable
• No load order needed.
application
controllers
services
directives
filters

11. Directives
• All ng-* are directives!!!
• Extends HTML with behaviour
• Comes in various of flavors

12. Demo
Movies Lib, Modules + Directives

13. Services
• Can be declared as service or factory
• Usefull for DOM/data manipulations
• Lazy loaded into memory

14. Demo
Movies Lib, Services

15. Filters
• Best used to format expression.
• Can be also used on collections
• Angular.js built-in filters

16. Demo
Movies Lib, Filters

17. Single Page Application
• Routes are the core of SPA
• Can respond to deep linking URLs
with $routeProvider
• Rendered templates appied into
ngView directive

18. Demo
Movies Lib, Complete Example

19. Lets sum up!
Cons
Takes freedom
Errors not always visible
Complex to master

20. Pros
Framework brings order
Very easy to start
Very declarative
By Google (here to stay)
Based on known pattern
Created with testability in mind

21. Whats next?
Angular.js 1.2RC1
• ng-animate with predefined animations
• ‘controller as’ – aliases for controllers
• finally, ng-if
• better error messages for debugging
• better documentation
• And much more

22. Questions?