angularjs notes

8/18/2019 AngularJS Notes

1/23


2/23

1 ) 'eep lin*ing6 'eep in*ing allows to encode t e application state inU9 so t at can !e !oo* ar*ed. % e application can !e restored fro t eU9 to t e sa e state.

11) 'ependency In?ection6 Angular JS as !uilt/in dependency In?ectionsu!syste t at elps t e developers !y a*ing application easy to developDtest and understand.

Advantages of AngularJS:-1) AngularJS provides capa!ility to create Single Page Application in a very clean

and aintaina!le way.2) AngularJS provides data !inding capa!ility to $%& t us giving user a ric

and responsive e#perience") AngularJS code is unit testa!le.3) AngularJS uses dependency in?ection and a*e use of separation of concerns.7) AngularJS provides reusa!le co ponents. 4it AngularJSD developer write

less code and get ore functionality.:) In AngularJSD views are pure t l pagesD and controllers written in JavaScript

do t e !usiness processing.ation is ust to *eep anapplication secure.

Not degradable L If your application user disa!les JavaScript t en user will ?ustsee t e !asic page and not ing ore.

Angular JS Components: % ey are t ree ain part of co ponents61) Ng-app 6 % is directive deEnes and lin*s to an Angular JS application to $%& .2) Ng-model 6 % is directive !inds t e values of Angular JS Application data to

$%& Input controls.") Ng-binds 6 % is 'irectives !inds t e Angular JS data to $%& %ag.

1) Point to Angular JS App: 4 en we place ng/app at t at ti e Angular JSapplication startK lin* to t l page.+C#a ple6 ,!ody ng/app = M yappN 6So

ere &odule is yapp6


3/23

2) ie!:So !elow Synta# it say ;iew.a) Og/controller tells to Angular JS w at controller to use wit t is view.!) ello%o.title tells to Angular JS write &odel value to $%& page at t is

location.

View : ,div ng/controller = $ello8ontroller

, 2 4elco e QQ ello%o.titleRR to t e world of %utorialspoint ,K 2

,Kdiv

") Controller: elow Synta#D $ere t e code registered wit controller functionna e called T$ello8ontrollerF in angular odule na ed yapp. So &oduleand 8ontroller can learn in ne#t c apter wit is ar*ed in ig t lue 8olor. So

ere 8ontroller function +$ello8ontroller is registered in angular via angularodule() and .controller() function call.

#Scope: is a Para eter passed to controller function is called T&odel-. % e controller function add ello%o JavaScript o!?ectD and in t at !?ectit add a title Eeld.

3) ,script

7) angular . odule ( yapp D + )

:)


4/23


5/23

&;8 is popular !ecause it isolates t e application logic fro t e user interface layerand supports separation of concerns. % e controller receives all reBuests for t eapplication and t en wor*s wit t e odel to prepare any data needed !y t e view.

% e view t en uses t e data prepared !y t e controller to generate a Enalpresenta!le response. % e &;8 a!straction can !e grap ically represented as

follows.AngularJS &;8

% e &odel % e odel is responsi!le for anaging application data. It responds to t e reBuestfro view and to t e instructions fro controller to update itself.

% e ;iewA presentation of data in a particular for atD triggered !y t e controllerVs decision topresent t e data. % ey are script/!ased te plate syste s suc as JSPD ASPD P$P andvery easy to integrate wit AJA tec nology.

% e 8ontroller % e controller responds to user input and perfor s interactions on t e data odelo!?ects. % e controller receives inputD validates itD and t en perfor s !usinessoperations t at odify t e state of t e data odel.

AngularJS is a &;8 !ased fra ewor*. In t e co ing c aptersD we will see owAngularJS uses &;8 et odology.

o! AngularJS integrates !it& *+,:

1) Og/app6 % is directives deEnes t e starting t e Angular JS application.2) Og/ odel6 % is directives creates odel varia!le called MAnyt ingN w ic can

!e used in t l page and wit in ,div t e ng/app located.") Og/!inds6 % is directives old t e odel ;aria!le value and display t e te#t

w en t e user type in te#t!o#.3) 8losing ,Kdiv tag indicates Angular JS Application 8losed.

AngularJS Directives:Angular JS 'irectives are used to e#tend $%& Cle ent. % ese are special attri!utesstart wit ng/preE#. So e directives are1) ng/app6 % ese directive start t e Angular JS Application2) ng/init6 % ese directive initiali>e application 'ata") ng/ odel6 % ese directive deEnes odel t at is a varia!le in angular JS.3) ng/repeat6 % ese directive repeat $%& ele ent for eac ite in angular JS.

Ng-app: Og/App start t e angular JS Application. It deEnes t e root ele ent. Itauto atically initiali>e and start t e application w en we! page containing Angular

JS Application Is loaded. It also used to load various Angular JS &odules in angular JSApplication.


6/23

,div ng/app =

...

,Kdiv

Ng-init: Og/init 'irective initiali>e t e Angular JS Application 'ata. It put t e valuesto varia!le to !e used in t e application.,div ng/app = ng/init = countries = +Qlocale6Ven/USVDna e6VUnited StatesVRD Qlocale6Ven/W VDna e6VUnited Xingdo VRD Qlocale6Ven/59VDna e6V5ranceVR

...

,Kdiv

Ng-model: Og/ odel directive deEnes t e odelKvaria!le to !e used in Angular JSApps.,div ng/app =

...

,p Cnter your Oa e6 ,input type = te#t ng/ odel = na e ,Kp

,Kdiv

Ng-.epeat: Og/repeat directive is to create $%& Cle ent for eac ite w en t eapplication data is need an ele ent.

,div ng/app = ...

,p ist of 8ountries wit locale 6 , Kp

,ol

,li ng/repeat = country in countries

QQ V8ountry6 V Y country.na e Y VD ocale6 V Y country.locale RR

,Kli

,Kol

,Kdiv

/0ample for Angular JS Directives:

, t l


7/23

, ead

,title AngularJS 'irectives ,Ktitle

,K ead

,!ody

, 1 Sa ple Application ,K 1

,div ng/app = ng/init = countries = +Qlocale6Ven/USVDna e6VUnited StatesVRD Qlocale6Ven/W VDna e6VUnited Xingdo VRD Qlocale6Ven/59VDna e6V5ranceVR

,p Cnter your Oa e6 ,input type = te#t ng/ odel = na e ,Kp

,p $ello ,span ng/!ind = na e ,Kspan ,Kp

,p ist of 8ountries wit locale6 ,Kp

,ol

,li ng/repeat = country in countries

QQ V8ountry6 V Y country.na e Y VD ocale6 V Y country.locale RR

,Kli

,Kol

,Kdiv

,script src = ttp6KKa?a#.googleapis.co Ka?a#Kli!sKangular?sK1.".13Kangular. in.?s ,Kscript

,K!ody

,K t l


8/23

Angular JS /0pression:C#pressions are used to !ind application data to t l. C#pressions are written insidedou!le !races li*e QQe#pressionRR. C#pressions !e aves in sa e way as ng/!inddirectives. AngularJS application e#pressions are pure JavaScript e#pressions andoutputs t e data w ere t ey are used.

Using Ou !ers6 ,p $ello QQcost 0 productRR ,Kp

Using String6 ,p 5irstna e6 QQstudent.Erstna eRR ,Kp ,p astna e6 QQstudent.lastna eRR ,Kp

Using !?ect6 ,p 9oll Oo6 QQstudent.rollnoRR ,Kp

Using Array6 ,p ar*s QQ ar*s +3 RR ,Kp ., t l

, ead

,title AngularJS C#pressions ,Ktitle

,K ead

,!ody

, 1 Sa ple Application ,K 1

,div ng/app = ng/init = Buantity = 1 cost = " student =QErstna e6V&a es VDlastna e6VParas arVDrollno61 1R ar*s = +G DH D


9/23

,p 9oll Oo6 QQstudent.rollnoRR ,Kp

,p &ar*s(&at )6 QQ ar*s+" RR ,Kp

,Kdiv


,K!ody

,K t l

Angular JS Controller:Angular JS &ainly relies on 8ontroller to control t e Zow of data in application. % econtroller is deEned using ng/controller directive. % e controller is JavaScript o!?ectcontaining attri!uteKproperties and function. Cac controller accept @scope as apara eter w ic refers to applicationK odule t at controller is to control.

,div ng/app = ng/controller = student8ontroller

...

,Kdiv

$ere we declared a controller FStudent 8ontroller- using ng/controller directive.

,script function student8ontroller (@scope ) Q

@scope .student = Q

ErstOa e 6 &a es D

lastOa e 6 Paras ar D

fullOa e 6 function () Q

var student !?ect

student !?ect = @scope .student

return student !?ect .ErstOa e Y Y student !?ect .lastOa e

R

R

R

,Kscript


10/23

1) Student8ontroller is deEned as a JavaScript !?ect wit @scope as aargu ent.

2) @scope is reference to application w ic is to use t e student8ontrollero!?ect.

") @scope.student is property for Student8ontroller.3) 5irstna e and lastna e are property for @scope.student and Oow

@scope.student is !?ect.7) $ere fullna e is a function of @scope.student o!?ect and w ose tas* to

return t e co !ined na e.:) 5ullna e function we-re getting t e student o!?ect and t en return t e

co !ined value.


11/23


12/23


13/23

,tr

,td Cnter fees6 ,Ktd

,td ,input type = te#t ng/ odel = student.fees ,Ktd

,Ktr

,tr

,td Cnter su!?ect6 ,Ktd

,td ,input type = te#t ng/ odel = su!?ectOa e ,Ktd

,Ktr

,Kta!le

,!rK

,ta!le !order =

,tr

,td Oa e in Upper 8ase6 ,Ktd ,td QQstudent.fullOa e() \ uppercaseRR ,Ktd

,Ktr

,tr

,td Oa e in ower 8ase6 ,Ktd ,td QQstudent.fullOa e() \ lowercaseRR ,Ktd

,Ktr

,tr

,td fees6 ,Ktd ,td QQstudent.fees \ currencyRR

,Ktd

,Ktr

,tr

,td Su!?ect6 ,Ktd

,td

,ul

,li ng/repeat = su!?ect in student.su!?ects \ Elter6 su!?ectOa e \order y6V ar*sV

QQ su!?ect.na e Y VD ar*s6V Y su!?ect. ar*s RR


14/23

,Kli

,Kul

,Ktd

,Ktr

,Kta!le

,Kdiv

,script

var ainApp = angular . odule ( ainApp D + )

ainApp .controller (Vstudent8ontrollerV D function (@scope ) Q

@scope .student = Q

ErstOa e 6 &a es D


fees 67 D

su!?ects 6+

Qna e 6VP ysicsVD ar*s 6< RD

Qna e 6V8 e istryVD ar*s 6G RD Qna e 6V&at VD ar*s 6:7 R

D

fullOa e 6 function () Q

var student !?ect

student !?ect = @scope .student

return student !?ect .ErstOa e Y Y student !?ect .lastOa e

R R

R)

,Kscript

,K!ody


15/23

,K t l

AngularJS Sample ApplicationCnter Erst na e6

Cnter last na e6

Cnter fees6

Cnter su!?ect6

Oa e in Upper 8ase6 &A$CS$ PA9AS$A9Oa e in ower 8ase6 a es paras arfees6 @7 .

Su!?ect6• &at D ar*s6:7• P ysicsD ar*s6<• 8 e istryD ar*s6G

Angular JS *+, D5+:5ollowing 'irectives !ind t e application data to attri!utes of $t l 'o Cle ents.1) ng/disa!led2) ng/s ow") ng/ ide3) ng/clic*

Ng-disabled: Add ng/disa!led attri!ute to a $%& !utton and pass it a odel. indt e odel to a c ec*!o# and see t e variation.Ng-s&o!: Add ng/s ow attri!ute to a $%& !utton and pass it a odel. ind t e

odel to a c ec*!o# and see t e variation.Ng-&ide: Add ng/ ide attri!ute to a $%& !utton and pass it a odel. ind t e

odel to a c ec*!o# and see t e variation.Ng-clic6: Add ng/clic* attri!ute to a $%& !utton and update a odel. ind t e

odel to t l and see t e variation.

, t l

, ead

,title AngularJS $%& ' & ,Ktitle

,K ead

,!ody

, 2 AngularJS Sa ple Application ,K 2

,div ng/app =


16/23


17/23

'isa!le utton 8lic* &e

S ow utton

$ide utton 8lic* &e

%otal clic*6 12 8lic* &e

Angular JS +odules:

Angular JS support &odular approac . &odular is used to separate logic say serviceDapplicationD controller etc. and it will *eep t e code clean. 4e deEne odular inseparate JS Ele and t e na e t e as per t e odule.?s. % ey are two JS Ele one isApplication and 8ontroller JS Ele.

1) Application +odule: Application odule is used to initiali>e t e applicationwit controller.

2) Controller +odule: 8ontroller &odule is used to deEne t e controller.

Application +odule:+% is array contain dependent

&oduleSynta#6 var ainapp = angular. odule(F yapp-D + ) + Application&odule Oa e ng/app=- yapp- .

$ere weVve declared an application m4App odule using +angular. odulefunction . 4eVve passed an e pty array to it. % is array generally containsdependent odules.

Controller +odule:

Syntax: ainApp .controller ( student8ontroller D function (@scope ) Q

@scope .student = Q

ErstOa e 6 &a es D


fees 67 D


18/23

su!?ects 6+

Qna e 6VP ysicsVD ar*s 6< RD

Qna e 6V8 e istryVD ar*s 6G RD

Qna e 6V&at VD ar*s 6:7 RD

Qna e 6VCnglis VD ar*s 6


19/23


20/23

1) #dirt4: states t e value as c anged.

2) #invalid: states t at value entered is invalid

") #error: states t at e#act error.

, t l

, ead

,title Angular JS 5or s ,Ktitle


,style

ta!le D t D td Q

!order 6 1p# solid grey

!order /collapse 6 collapse

padding 6 7p#

R

ta!le tr 6nt /c ild (odd ) Q

!ac*ground /color 6 ]f2f2f2

R

ta!le tr 6nt /c ild (even ) Q

!ac*ground /color 6 ]

R

,Kstyle

,K ead

,!ody

, 2 AngularJS Sa ple Application ,K 2

,div ng/app = ainApp ng/controller = student8ontroller


21/23

,for na e = student5or novalidate

,ta!le !order =

,tr

,td Cnter Erst na e6 ,Ktd

,td ,input na e = Erstna e type = te#t ng/ odel = ErstOa e reBuired

,span style = color 6red ng/s ow = student5or .Erstna e.@dirty ^^student5or .Erstna e.@invalid

,span ng/s ow = student5or .Erstna [email protected] 5irst Oa e isreBuired. ,Kspan

,Kspan

,Ktd

,Ktr

,tr

,td Cnter last na e6 ,Ktd

,td ,input na e = lastna e type = te#t ng/ odel = lastOa e reBuired

,span style = color 6red ng/s ow = student5or .lastna e.@dirty ^^student5or .lastna e.@invalid

,span ng/s ow = student5or .lastna [email protected] ast Oa e isreBuired. ,Kspan

,Kspan

,Ktd

,Ktr

,tr

,td C ail6 ,Ktd ,td ,input na e = e ail type = e ail ng/ odel = e ail lengt =1 reBuired

,span style = color 6red ng/s ow = student5or .e ail.@dirty ^^ student5or .e ail.@invalid

,span ng/s ow = student5or .e [email protected] C ail is reBuired. ,Kspan

,span ng/s ow = student5or .e [email protected] ail Invalid e ail address. ,Kspan

,Kspan

,Ktd

,Ktr


22/23

,tr

,td

,!utton ng/clic* = reset() 9eset ,K!utton

,Ktd

,td

,!utton ng/disa!led = student5or .Erstna e.@dirty ^^

student5or .Erstna e.@invalid \\ student5or .lastna e.@dirty ^^

student5or .lastna e.@invalid \\ student5or .e ail.@dirty ^^

student5or .e ail.@invalid ng/clic* = su! it() Su! it ,K!utton

,Ktd

,Ktr

,Kta!le

,Kfor

,Kdiv

,script

var ainApp = angular . odule ( ainApp D + )

ainApp .controller (Vstudent8ontrollerV D function (@scope ) Q

@scope .reset = function ()Q

@scope .ErstOa e = &a es

@scope .lastOa e = Paras ar

@scope .e ail = &a es Paras ar_tutorialspoint.co

R

@scope .reset () R)

,Kscript

,K!ody

,K t l


23/23

angularjs notes

Documents