Introduction to AngularJS: A Comprehensive Lunch & Learn Session

1. Wireless: WDDPublic Password: @WDD4internet Follow along with the code: http://join.me/wddsoftware (or download the Join Me app on your mobile device) Grab some Pizza! Soda/Water in the Mini-Fridge

3. Introductions • What is your name? • What Company are you from? • Tell us a little bit about what your company does! • What is your role at your company?

4. AngularJS Discussion / Lunch & Learn / Demo

5. What Is AngularJS? • A JavaScript MVC/MVVM/“MVW” (model-view-whatever) framework for building single-page web apps • Maintained by Google & development community • Licensed under the MIT license • Supports modern browsers including Internet Explorer 8+ (IE 9+ as of AngularJS 1.3)

6. What Is AngularJS? • An application framework, not “just” a library or toolkit • Declarative UI construction via extended HTML markup and two-way data binding • DOM manipulation separated from application logic • Emphasis on testability

7. Key AngularJS Concepts • Directive: View construction & DOM manipulation • Controller: Application logic (model) • Scope: “Glue” between the controller and the view (viewmodel) • Module: Code organization and unit of re-use • Dependency Injection: Automatically manage object dependencies

8. Directives • Declarative UI construction – the “V” in MVW • Appear in HTML as new elements & attributes • Attach functionality to DOM elements • Provide two-way data binding • Provide for DOM manipulation(for example, repetition and conditional inclusion of DOM elements)

9. Example #1

10. Scopes • Think “ViewModel” in MVVM architecture • Expose the domain model to the view • Provide both data and functionality • The domain model is just POJO (plain old JavaScript objects) • There are many scopes in an AngularJS application, arranged in a hierarchy

11. Controllers • Responsible for initializing the scope object • Populate the scope with initial model values • Augment the scope with functions that can be called by the UI

12. Example #2

13. Modules • Keep global namespace clean • Aid in code organization and testing • Factor out common functionality for re-use between applications • Are assembled into an AngularJS application via dependency injection

14. Example #3

15. Dependency Injection • Describes dependencies among objects declaratively • Avoids tight coupling between objects; facilitates re-use and testing • The AngularJS injector finds and wires up collaborating objects, referred to as “services” • Watch out if you use JavaScript minification: use annotations to specify dependencies

16. Example #4

17. Additional AngularJS Features • Testability: Unit testing (Jasmine, Karma runner) and end-to-end testing (Protractor) • Multiple views and routing: view selection based on URL (ngRoute module; UI-Router module from AngularUI project) • Eventing system via scope hierarchy • Filters (formatting) and parsers (validation) for two-way data binding

18. AngularJS Resources • Home page: angularjs.org • The ng-book by Ari Lerner: www.ng-book.com • Book: Mastering Web Application Development with AngularJS by Pawel Kozlowski and Peter Bacon Darwin • Video tutorials: egghead.io • Useful modules: angular-ui.github.io

19. Any questions?