Wireless: WDDPublic Follow along with the code: (or download the Join Me app on your mobile device) Grab some Pizza! Soda/Water in the Mini-Fridge

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

AngularJS Discussion / Lunch & Learn / Demo

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) 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 What Is AngularJS?

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 Key AngularJS Concepts

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) Directives

Example #1

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 Scopes

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 Controllers

Example #2

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 Modules

Example #3

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 Dependency Injection

Example #4

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 Additional AngularJS Features

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

Any questions?