Introduction to Angular JS Sergey Barskiy Working Class Nobody Level: Introductory
What is Angular? • • •
“Superheroic MVW framework” http://angularjs.org/ JavaScript framework for building (mostly) single page web applications (SPAs) MV* pattern based framework.
MVC / MV* •
• • • •
Model – JavaScript objects View – HTML Controller – Controller and Scope objects Main advantage over traditional web app – separation of concerns How do we relate this to XAML – MVVM pattern?
Features •
Two way data binding – Digest loop – Performance limitations – Compare to Knockout
• • •
• •
Templating Routing Dependency injection Testability Modularity
Angular Conceptual Components •
• •
•
Directives - HTML manipulation constructs Filters – data formatting and data filtering constructs Controllers - provide view model that glues HTML to properties and methods of JavaScript objects, expressed through scope. Services – provide functions to controllers, such as access to server data.
Angular Built-In Directives •
• • •
•
Application (ngApp) – top level object View (ngView) – placeholder for view templates Controller (ngController) – wires up controller to a subset of DOM Binding (ngModel) – sets up two way data binding Event directives
Angular Built-In Directives (Cont.) •
• •
• • • •
(ng assumed in the name) Validation (required, min, max) HTML (show, hide, if, switch, disable, readonly, include) Init Class Repeat Form
Angular Built-In Services •
• • • • • • • •
HTTP ($http) Cache ($cacheFactory) Document ($document) Windows ($window) Timeout ($timeout) Address ($location) Value parser ($parse) Promises ($q) Scope ($rootScope)
Angular Methods •
There are many helper methods – fromJson, toJson – String manipulations (upper, lower) – Object testing (isObject, isNumber, etc…)
More Information •
• •
http://angularjs.org/
[email protected] http://DotNetSpeak.com
