Angular js architecture (v1.4.8)
Download as PPTX, PDF2 likes783 views
1) Angular JS modules allow you to organize an application into specific modules that contain controllers, services, filters and directives. A module is created using angular.module and can be retrieved later on. 2) Dependency injection in Angular allows components to receive dependencies from the injector. Dependencies can be annotated inline, through the $inject property or implicitly. 3) Data binding in Angular automatically synchronizes data between the model and view. The view reflects changes made to the model and vice versa using bindings like {{expression}} or ngBind.
![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](https://image.slidesharecdn.com/angularjs-arhitecture-160126045106/85/Angular-js-architecture-v1-4-8-3-320.jpg)
![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.](https://image.slidesharecdn.com/angularjs-arhitecture-160126045106/85/Angular-js-architecture-v1-4-8-4-320.jpg)
Angular js 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
- 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
- 17. THANK YOU!