Transcript AngularJS presentation - WDD Software Solutions

Grab some Pizza!
Wireless: WDDPublic
Password: @WDD4internet
Soda/Water in
the Mini-Fridge
Follow along with the code: http://join.me/wddsoftware
(or download the Join Me app on your mobile device)
Introductions
1.
2.
3.
4.
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?
AngularJS
Discussion / Lunch & Learn / Demo
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)
What Is AngularJS?
•
•
•
•
An application framework, not “just” a library or toolkit
Declarative UI construction via extended HTML markup and twoway data binding
DOM manipulation separated from application logic
Emphasis on testability
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
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)
Example #1
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
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
Example #2
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
Example #3
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
Example #4
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
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
Any questions?