Angular js architecture (v1.4.8)

Angular js architecture (v1.4.8)

• 1.
  Angular JS v1.4.8 TECHSESSION LapusneanuGabiCostel
• 2.
  Key Features 01 Modules 02 03 DataBinding 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 Placethe 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) AngularJS 1 + 2 = 3
• 6.
  Basic Module (Bootstrap) Asabestpractice,consideraddinganng-strict-didirectiveonthesameelementasng-app Angularinitializes 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) TheAngular 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 inAngular 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 aremuch 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 areobjects whose API is defined by the developer writing the service.
• 13.
  Directives (specialized objects) Directivesare 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!