angularjs basics
TRANSCRIPT
General
• Javascript Framework • Angular = ng = &ng • Angular is full-featured SPA framework • Open-source web application framework • Originally developed in 2009 by Miško Hevery and Adam Abrons • Used as the business software behind an online JSON storage
service • Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers
(Android, Chrome Mobile, iOS Safari) • Versions
– Stable: 1.2.x – Beta: 1.3.0
Versions
AngularJS Statistics
Resource: W3Tech Investigated technologies of websites, not individual web pages from the bank of 10 million web sites. April 2013
ExtJs Usage Statistics
Resource: W3Tech Investigated technologies of websites, not individual web pages from the bank of 10 million web sites. April 2013
AngularJS Ext JS jQuery Feature detection[5] Yes Yes Yes
DOM wrapped[20] Yes Yes Yes
XMLHttpRequest Yes Yes Yes
data retrieval
[WebSocket] Yes Yes
Server pushdata retrieval Yes Yes
Other data retrieval Yes: XML, SOAP, AMF,
Ext.Direct Yes: XML, HTML
Drag and drop Yes Yes
Simple visual effects Yes Yes Yes
Animation / Yes Yes Yes
advanced visual effects
Event handling Yes Yes Yes
Back button support / Yes With plugins[53]
history management
Input formwidgets & validation Yes Yes With plugins[59]
Grid Yes With plugins[64]
Hierarchical Tree Yes With plugins[74]
Rich text editor No Yes With plugins[85]
Autocompletiontools No Yes With plugins[90]
HTMLgeneration tools No Yes Yes
Comparison JavaScript Frameworks
AngularJS Ext JS jQuery
Widgets themeable / skinnable Yes[97] Yes[99]
GUI resizable panels and modal dialogs Yes With plugins
GUI page layout Yes With plugin[108]
Canvas support Yes With plugin[112]
Mobile/tablet support (touch events) Yes Yes With plugin[119]
Accessibility / Yes Yes Yes
graceful degradation[124]
ARIA compliant Yes Yes[131]
Developer tools, Visual design Yes Yes[137][138]
Offline storage[144] Yes With plugin[149]
Cross-browser 2d Vector Graphics[152]
Yes With plugin[155]
Charting & Dashboard[158] Yes With plugin[163][164]
RTL Support in UI Components Yes Depends on the plugin used
Comparison JavaScript Frameworks
AngularJS - Goals & Concept
• 100% Javascript
• Declarative Programming paradigm (like SQL)
• MVC
• jqLight – the light version of jquery
• Decouple DOM manipulation
• Size
AngularJS Backbone Ember
Size 36K 6.4K 69K
Key features
• Scope – object that refers to application model • MVC • Services • Two-way data binding • Directives • Filters • Validation • Testable • Dependency Injection
Basics
http://jsfiddle.net/sna19/WrZh2/
Let’s create MoveIt http://plnkr.co/edit/YemibukYfCvpIy9Lblma?p=preview
Directives
Directives
• Markers on a DOM element
• Tells to the compiler to attach a specific behavior to that DOM element
• Custom directives definition is possible http://jsfiddle.net/roadprophet/DsvX6/
Most Useful Directives
• ng-app
• ng-bind
• ng-model
• ng-class
• ng-controller
• ng-switch, ng-if, ng-show, ng-hide
• ng-repeat
• ng-view
Model View Control
view
Controller
Model
Binding to model
MVC or MVW ?
Scope
Scope
• $scope - expose the domain model to a view (template)
• By assigning properties to scope instances, we can make new values available to a template for rendering.
• Two types of scope
– Inherited
– Isolated (many scope models
view
Root scope
HelloCtrl Scope
Input Scope
Render scope
Scope
Root scope
HelloCtrl Scope
Input Scope
Render scope
<body>
<div>
<input>
<h1>
text
Scope
Scope Root Scope
MyController scope
username : string
view
Controller
Model
Binding to model
$scope.getName = function() { return $scope.name; } }
<h1>Hello, {{ getName() }}! </h1>
Scope
Controller
Controller
• The primary responsibility of a controller is to initialize scope objects.
– Providing initial model values
– Augmenting $scope with UI-specific behavior (functions)
• Controllers are regular JavaScript functions.
Global Scope
Application Scope
Controller - Example
Directives
http://plnkr.co/edit/Jp0F8UYnHQAwvdW3VsIl
Binding
Two-way data binding
Renders model value
Binding to model (variable)
Binding
• Basic Example http://jsfiddle.net/sna19/T5yvB/
• MoveIt – simplest http://plnkr.co/edit/hxLXgXd3Lvhm2FAVlYTY?p=preview
Filters
Filters
• Formats the value of an expression for display to the user
• Can be used in view templates, controllers or services
• Custom Filter http://jsfiddle.net/CBgcP/413/
• MoveIt Custom Filter http://plnkr.co/edit/0wl7Jh47wRKIHpwNaAnE?p=preview
• MoveIt Custom Filter with radio http://plnkr.co/edit/pMZN90UxpHoQ3FE4tQhR?p=preview
In computer technologythe term (usually shortened to booting) usually refers to the process of loading the basic software into the memory of a computer after power-on or general reset, especially the operating system which will then take care of loading other software as needed.
In general parlance, bootstrapping usually refers to the starting of a self-sustaining process that is supposed to proceed without external input
Bootstrap in AngularJS
• Create a new injector
• Compile (Walk through the DOM and locate all directives)
• Link – attach all the directives to scope.
Bootstrap
Dependency …
Dependency Injection
• DI – Software Design Pattern that deals with how components get hold of their dependencies.
• AngularJS is in charge of – Creating component
– Resolving their dependencies
– Providing them to other components as requested.
• Injector knows to inject itself (first time it runs)
• Injector will only create an instance of a service once (the next time it will use the cached one).
• You can inject service into controller, directive or filter
• Controllers cannot be injected into other things. Why?
DI in a Nutshell
• How component can get a hold on its dependencies?
– Typically using the new operator
– Looking up, by referring to a global variable
– Having the dependency passed to it where it is needed.
DI in a Nutshell
• How component can get a hold on its dependencies?
– Typically using the new operator
– Looking up, by referring to a global variable
– Having the dependency passed to it where it is needed. • Removes the responsibility of locating the dependency from the
component
• However, SomeClass now is responsible of getting hold of the dependency
on the code that constructs Greeter.
• To manage the responsibility of dependency creation, each Angular application has an injector. The injector is a service locator that is responsible for construction and lookup of dependencies.
DI in a Nutshell
http://plnkr.co/edit/7IBuN94H9MMzere3QzDs?p=preview
DI in a Nutshell
• Why the parameters order is not important? .toString()
DI - Example
http://plnkr.co/edit/YOHFHCzcGUGq800mZSOM?p=preview
Modules
Modules
• The declarative process is easier to understand
• Packaging code as reusable modules
• The order of loading modules is not important or even parallel
• Unit testing
Other functions
• Lazy script loading
• Validation
• History
• jasmine unit test
References
Resources
• https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection
• http://twilson63.github.io/codecamp-angularjs-reveal/#/4
• https://docs.angularjs.org/guide
• “Mastering Web Application Development with AngularJS”, by Pavel Kozlovsky & Peter Bacon Darwin, August,2013
Thank you