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/
Sergey@Barskiy.com
http://DotNetSpeak.com