AngularJs architecture (v1.4.8)

1. Angular JS v1.4.8
TECH SESSION LapusneanuGabiCostel

2. Key Features
01 Modules
02
03
Data Binding
Expressions
04Services
05Directives
Controllers
06

3. function module(name, requires, configFn)essions
name==='hasOwnProperty'
What is a Module?
01
02
04
You can think of a module as a container for the different
parts of your app – controllers, services, filters, directives, etc.
Creation Retrieval
angular.module('myModule', []); angular.module('myModule');
Signature

4. Basic Module (Steps)
01
Place the script at the
bottom of the page.
02
Place ng-*app to the
root of your application.
*["ng-", "data-ng-", "ng:", "x-ng-"]
03
Create the ng-app
module.

5. Basic Module (Code)
Angular JS
1 + 2 = 3

6. Basic Module (Bootstrap)
Asabestpractice,consideraddinganng-strict-didirectiveonthesameelementasng-app
Angular initializes automatically upon DOMContentLoaded event or when the
angular.js script is evaluated if at that time document.readyState is set to 'complete'.
At this point Angular looks for the ng-app directive which designates your application
root.
You should call angular.bootstrap() after you've loaded or defined your modules.
You should not use the ng-app directive when manually
bootstrapping your app.
If window.name contains prefix NG_DEFER_BOOTSTRAP! when angular.bootstrap is
called, the bootstrap process will be paused until angular.resumeBootstrap() is called.
A
M
D

7. Basic Module (Instance)

8. Basic Module (Compile)
Signature

9. Dependency Injection (DI)
The Angular injector subsystem is in charge of creating components, resolving
their dependencies, and providing them to other components as requested.
Dependency
Annotation
1
2
3
$inject Property
Annotation
Inline
Preferred way
Inferred
Implicit
Annotation
Onlyworksifcodeisnotminified/obfuscated(isdisallowedwhen
theinjectorisinstrictmode).
Dependenciesareinjected basedontheordertheyaredeclaredwithin$injectarray.

10. Data Binding
Data-binding in Angular apps is the automatic synchronization of data
between the model and view components.
The way that Angular implements data-binding lets you treat the model as
the single-source-of-truth in your application.
The view is a projection of the model at all times.
When the model changes, the view reflects the change,
and vice versa..
A binding is denoted by double-curlies {{ }} or by ngBind
directive.
ItispreferabletousengBindinsteadof{{expression}},or ng-cloakwith{{expression}}.ForbetterperformanceyoucanuseOne-TimeBinding::.

11. Expressions
AngularJS expressions are much like JavaScript expressions.
They can contain literals, operators and variable.
{{expression}}
Angular JS
1 + 2 = {{1 + 2}}
1 + 2 = 3
//expression//

12. Service
Value/
Constant
Factory Provider
Services
Services are objects whose API is defined by the developer writing the
service.

13. Directives (specialized objects)
Directives are used to extend HTML.
Directive
Types
E
AC
M
Comment:
<!— directive: my-directive exp -->
Element name (default):
<my-directive></my-directive>
Attribute (default):
<div my-directive="exp"></div>
Class:
<div class="my-directive:exp;“/>
Directive Definition Object
IntheDOMwerefertodirectivesbylower-caseforms, incodewerefertodirectivesbytheircase-sensitivecamelCasenormalized.

14. ExecutionOrder

15. Propagation of Events

16. Time Directive (DEMO)

17. THANK YOU!