angularjs notes.docx

Problem: HTML is good for static content. For dynamic content, a DOM manipulation library is required. olution: !ngular" e#tends HTML and ma$e it dynamic using declarati%e synta#. &reat for ingle Page !pplications 'P!( and )*+D applications. +ses M- 'Modelie/-0ate%er( frame/or$ 'Modelie/-0ate%er( frame/or$ on t0e +1. eparates HTML DOM references from t0e "a%acript Pro%ides tools for +1 testing. )rossbro/ser compatible. &reat t0ird party modules li$e !ngular+1 !ngular+1..

M): M): or MM or /0ate%er 'M-(. Model: The Model is simply the data in the application and is just plain old JavaScript objects.Modal objects.Modal represents business data. The view is a projection of the model at any given time.

ie/: The View is the HTML that exists after Angular! has parsed and compiled the HTML to include in clude rendered mar"up#directives$ mar"up#directi ves$ and bindings. %ou can thin" of the view as simply an instant projection of your model. 1t s0ould update itself /0ene%er t0e underlying data model c0anges. 1n !ngular" t0e %ie/ reads model data from t0e 2scope 2scope.. o t0e 2scope 2scope ob3ect  ob3ect is /0ere t0e )ontroller and t0e ie/ s0are data. !cope is nothing but an object that &lues the View with 'ontroller. They hold the Model data that we need to pass to view. !cope uses Angular(s two)way data binding to bind model data to view. *scope is an object that lin"s 'ontroller to the View. +t is controller(s responsibility to initiali,e the data that the view needs to display. This is done by ma"ing changes to *scope. ViewModel- A ViewModel is an object that provides specic data and methods to maintain specic views. /inds view to the model. Controller: +n Angular!0 controller is simply formed by ava!cript functions. functions. +t controls how view vi ew and model will communicate. 'ontrollers are nothing but plain ava!cript  ava!cript functions which are bound to a particular scope. 'ontrollers should only contain bindings and logic needed for a single view . 'ontroller handles hand les inputs0 calls the business code and shares data with view via *scope. +n Angular!0 Angula r!0 the business logic is  performed inside a service and injected injected into the controller. The controller controller uses the services serv ices to obtain data and sets it on the *scope0 *scop e0 so it is just aware of the *scope *scop e and not the view. -0en a )ontroller is attac0ed to t0e DOM %ia t0e ngcontroller directi%e, !ngular /ill instantiate a ne/ )ontroller ob3ect, using t0e speci4ed )ontroller5s constructor function. ! ne/ child scope /ill be created and made a%ailable as an in3ectable parameter to t0e )ontroller5s constructor function as  2scope.

+se controllers to: et up t0e initial state of t0e 2scope ob3ect.

!dd be0a%ior to t0e 2scope ob3ect.

Module: A container for the dierent Angular components: controllers, services, factories, lters, directives etc.

De4ning a module:

• • •

' function'(6 5use strict57 88creates a module with the name 'app'

//the empty array is the list of the other modules that app module depends on. •

  angular.module'5app5, 9(7

•

•

88de4ning a module /it0 dependencies   angular.module'5anot0er!pp5, 95ng*oute5, 5ngMessages5(7

•

;('(7

•

+sing a module in t0e HTML:

•

•

app>?  

•

?66 greetingm.greeting ;;?66item;; ngmodel=>%m.con4rmed> ngc0ange=>%m.c0ange'(> 8?

ng'lic"- !pecify custom behavior when an element is clic"ed.

%m.count = %m.count  G> nginit=>%m.count=>?   1ncrement ?Hello !ngular? Hello !ngular ?Hello !ngular?*eser%ation tatus???8?

0ttp:88///.gra%atar.com8a%atar8660as0;; >8?

ngSrc: 66%m.pro4lePic+rl;; >8?

66%m.pro4lePic+rl;; >8?

ng)model 1irective- Lins the HTML element and the model. Any changes to the control update the data in your model& and when you change the model it updates the control. T31 3A4 0ATA 5#60#67

*root!cope- 3efers to the app5s root scope #2very app has a single root scope4ther scopes are descendant scopes of the root scope.

88someProp is a%ailable across all t0e components of a module li$e 88controllers, ser%ices, 4lter, directi%es etc. 2rootcope.someProp = 5omeal57

er%ices !ngular ser%ices are substitutable ob3ects t0at are /ired toget0er using dependency in3ection 'D1(.  Bou can use ser%ices to s0are code and data across t0e app. !ngular ser%ices are: LaKily instantiated  !ngular er%ices are laKily initialiKed 'initiates only /0en its needed(. !ngular only instantiates a ser%ice /0en an application component depends on it. ingletons  !ngular er%ices are singletons per !ngular module. Aac0 component dependent on a ser%ice gets a reference to t0e single instance generated by t0e ser%ice factory. !ngular oers se%eral useful ser%ices 'li$e 20ttp(, but for most applications you5ll also /ant to create your o/n. To use an !ngular ser%ice, you add it as a dependency for t0e component 'controller, ser%ice, 4lter or directi%e( t0at depends on t0e ser%ice. !ngular5s dependency in3ection subsystem ta$es care of t0e rest. T0e service factory function generates t0e single ob3ect or function t0at represents t0e ser%ice to t0e rest of t0e application. T0e ob3ect or function returned by t0e ser%ice is in3ected into any component 'controller, ser%ice, 4lter or directi%e( t0at speci4es a dependency on t0e ser%ice.

!pplication de%elopers are free to de4ne t0eir o/n ser%ices by registering t0e ser%ice5s name and service factory function , /it0 an !ngular module.

881n3ect t0e ser%ice 'not its ob3ect( into t0e 88component 'controller, ser%ice, 4lter, directi%e( angular.module'5app5(.controller'5Main)ontroller5, Main)ontrollerFn(7 Main)ontrollerFn.2in3ect = 952rootcope5, 520ttp5, 52routeParams5  function Main)ontrollerFn '2rootcope, 20ttp, 2routeParams( 6 %ar mainm = t0is7   mainm.name = 557   20ttp.get'....(7   2rootcope.someProp = >omealue>7 ;

)reating a er%ice or Factory:

• •

angular.module'5app5, 9(7

•

•

88create a factory

• • • • • • •

angular.module'5app5(.factory'5myFactory5, myFactory(7 function myFactory'( 6 %ar self = 6;, localar7 88add e#posable properties on self    self .name = 5T0is is a factory57 return self 7 ;

•

• • • • • • •

•

88create a ser%ice angular.module'5app5(.ser%ice'5myer%ice5, myer%ice(7 function myer%ice'( 6 %ar localar = G7 88add e#posable properties on t0is t0is.name = 5T0is is a er%ice57 ; angular.module'5app5, 9(7

•

• • • • • •

88)reating a ser%ice /it0 dependencies angular.module'5app5(.ser%ice'5myer%ice5, myer%ice(7 function myer%ice'20ttp, 2location( 6 88use dependencies 0ere t0is.name = 5er%ice57 ;

•

• • • • • • • •

881n3ecting t0e ser%ice or factory angular.module'5app5(.controller'5Main)ontroller5, Main)ontrollerFn(7 function Main)ontrollerFn '2rootcope, 20ttp, myer%ice( 6 %ar mainm = t0is7   20ttp.get'....(7   2rootcope.someProp = >omealue>7   console.log'myer%ice.name(7 ;

20ttp: )ommunicate /it0 t0e remote HTTP ser%ers %ia t0e bro/ser5s

•

NMLHttp*equest ob3ect or %ia "O@P. • •

20ttp.get'58some+rl5, 9con4g(.t0en'success)allbac$(7 20ttp.post'58some+rl5, data, 9con4g(.t0en'success)allbac$(7

• •

20ttp.put'58some+rl5, data, 9con4g(.t0en'success)allbac$(7 20ttp.delete'58some+rl5, 9con4g(.t0en'success)allbac$(7

•

• • •

• • • • • • • •

• • •

• •

88"O@P request must contain "O@)!LL!) as t0e callbac$ %alue in t0e +*L 20ttp. 3sonp'5///.someot0erdomain.com8some+rl5  5Qcallbac$="O@)!LL!)5, 9con4g(.t0en'success)allbac$(7 con4gOb3 ==? 6   met0od : 5&AT5 R 5POT5 R 5P+T5 R 5DALATA5 etc.,   url : 58someurl5,   params : 5string5 R ob3ect 8SquerytringS8,   data : 5string5 R ob3ect 8SpostS8 ; response ==? 6   data : 6stringROb3ect;  T0e response body transformed /it0 t0e transform functions.   status : 6number;  HTTP status code of  t0e response.   0eaders : 6function'90eader@ame(;  Header getter function.   con4g : 6Ob3ect;  T0e con4guration ob3ect t0at /as used to generate t0e request.   statusTe#t: 6string;  HTTP status te#t of  t0e response. ;

 T0e Promise ob3ect is used for deferred and async0ronous computations. ! Promise represents an operation t0at 0asn5t completed yet, but is e#pected in t0e future. Part of AIG pec no/. Promise on MD@ !ngular promise ser%ice 2q is based on ris o/al5s U  T0e 20ttp ser%ice is based on t0e deferred8promise !P1s e#posed by t0e 2q ser%ice. !n !ngular ser%ice s0ould be used for delegating HTTP requests and responses.

*outing 0elps you in di%iding your application in logical %ie/s and bind

•

dierent %ie/s to )ontrollers. •

!llo/s to na%igate among t0e %ie/s and also store t0is na%igation in t0e bro/ser 0istory.

•

P! can still be built /it0out urlbased routing, but as soon as you refres0 t0e page, it /ill land on t0e 4rst %ie/. @o bro/ser bac$for/ard button support eit0er.