2. 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
5. ExtJs Usage Statistics
Resource: W3Tech
Investigated technologies of websites, not individual web pages from the
bank of 10 million web sites.
April 2013
6. 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
7. 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
8. 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
9. Key features
• Scope – object that refers to application model
• MVC
• Services
• Two-way data binding
• Directives
• Filters
• Validation
• Testable
• Dependency Injection
14. 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/
19. 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
25. 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.
33. 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/
34. • MoveIt Custom Filter
http://plnkr.co/edit/0wl7Jh47wRKIHpwNaAnE?p=preview
• MoveIt Custom Filter with radio
http://plnkr.co/edit/pMZN90UxpHoQ3FE4tQhR?p=preview
35. 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
36. Bootstrap in AngularJS
• Create a new injector
• Compile (Walk through the DOM and locate all
directives)
• Link – attach all the directives to scope.
39. 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?
40. 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.
41. 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
42. • 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
43. DI in a Nutshell
• Why the parameters order is not important?
.toString()
46. 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
