angularjs basic concepts

8/16/2019 AngularJS Basic Concepts

1/24

IGATE Sensitive

Rambabu Ambala


2/24

• Introduction and defnition o AngularJS.

• Some o the key points about AngularJS.

• Basic example.

• The o! o the angular page.

• "hat is #irecti$e % Some examples.

• &nderstanding 'ontrollers % (xamples.

• )o! to create module%.

• 'reating controller in module.

• Template*expanding directi$e (xample.

• +ilters and (xamples.

IGATE Sensitive

This ,,T co$ers belo!topics


3/24

Introduction

• Client side programming is becoming the one of the main parts of

web applications. Now a days, e are seeing the e!plosion of "avaScript libraries. And the reason is that some "avaScriptlibraries got very pop#lar and developers too$ them hand to handbeca#se of its cool feat#re and almost negligible performancecost, Now in o#r pro%ects, co#nt of "avaScript 'les (pl#gins and

c#stom 'les) are increasing rapidly which is ma$ing it#nmanageable and #nmaintainable. Ang#lar"S provides best ofthe both the worlds and now a days, it is one of the most tal$edand #sed "avaScript framewor$ in web applications.

"hat is AngularJS%• AngularJS is not -ust another Ja$aScript library but it

pro$ides a rame!ork to !rite a proper architecturedmaintainable and testable client side code.

IGATE Sensitive Contin#e*


4/24

Some o the key points are/

• It ollo!s 01' rame!ork. I you don2t ha$e Idea 01'

rame!ork I2ll suggest you to get an Idea o 01'rame!ork and then start learning AngularJS.

• AngularJS is primarily aimed to de$elop S,As 3Single,age Applications4 it means your single )T05document turns into application. But it is also used alot in AS,.6(T and other applications .

• Allo!s you to !rite &nit and integration tests or Ja$aScript code. Testability is one o the main points

!hich !as kept in mind !hile !riting this rame!orkso it has great support o it

• It pro$ides it2s o!n and $ery rich list o attribute andproperties or )T05 controls !hich increases theusability o it exponentially. It is also called directi$es.



5/24

• Supports t!o*!ay binding that means your data model andcontrol2s data !ill be in sync.

• Angular library is also a$ailable on '#6 so you -ust need tothe url o the '#6 and it a$ailable or use.

6ote7 A content delivery networ$ or content distrib#tion networ$ (C+N) is a large distrib#ted system ofservers deployed in m#ltiple data centers across the Internet.

• It is an 8pen Source

• AngularJS is a open source library and de$eloped and

supported by 9oogle. Being an open source you can go

through the code itsel and customi:e it i re;uired. Thereis lot o support rom Ja$aScript community and e$en you

can contribute to it. 'urrently more that =>> contributors

ha$e contributed and it is increasing day by day.


Some o the key points are/


6/24

So let2s discuss the maincomponents o AngularJS.

• 'ontroller ? It is main component o AngularJS andcontains the state and logic both. It acts as bridgebet!een ser$ices and $ie!s.

• 1ie!s@#irecti$es ? )ere !e generate the &I.

#irecti$es extends the )T05 element and enablesus to generate the complex html easily. 'ontrollerstalks to $ie! to both directions.

• Ser$ices ? It contains the core logic and state othe application. In it !e can communicate to

ser$er to get and post the data.

• See all the abo$e components glued !ith eachother



7/24

IGATE Sensitive

Some o the eatures are/


8/24

"e are amiliar !ith .6(T but ne! to AngularJSthe table belo! sho!s a rough analogy that helpsexplain the role played by each type o AngularJS

ob-ect7

AngularJS .6et 'omment

mod#le Assembly Application b#ilding bloc$

controller iew-odelContains the application logic and

e!poses it to views

scope +ataConte!trovides data that can be bo#nd toview elements

'lteral#eConverter

-odi'es data before it reaches theview

directive Component /e0#sable 1I element

factory,service

1tilityclasses

rovide services to other mod#leelements

IGATE Sensitive


9/24

9ettingStarted/..

• To use AngularJS you must include it as a reerence inyour )T05 page

script srcCangular.min.-sDE@scriptE

38R4

script srcFhttp7@@code.angular-s.org@angular*=.>.=.-sFE@scriptE

38R4

scriptsrcFhttps7@@a-ax.googleapis.com@a-ax@libs@angular-s@=.>[email protected] typeFtext@-a$ascriptFE@scriptE

6ote7 &se 9oogle2s '#6 is recommended. 9oogle2s ser$ers are $ery ast andthe scripts cacheable across applications.

• Add a directi$e in )T05 tag called ng*app toindicate that this is using Angular JS.

html ng*appE@htmlE 3or4 body ng*appE@bodyE

IGATE Sensitive

+ i r e c t i v e + i r e c t i v e


10/24

Basic (xample oAngularJS

H#8'T,( htmlE

htmlE

headE script srcFangular.min.-sFE@scriptE

@headE

body ng*app E input ng*modelFmsgF @E

pE

msgKK

@pE

@bodyE

@htmlE

"hen AngularJS loads it scans the document or the ng*appattribute. This tag is usually set to the name o the applicationLs

main module. 8nce the ng*app attribute is ound Angular !illprocess the document loading the main module and itsdependencies scanning the document or custom directi$es andso on.

The ng0odel directi$e binds an inputselect textarea 3or customorm control4 to a property on the scope using

6g0odel'ontroller !hich is created and exposed by thisdirecti$e.IGATE Sensitive

+ i r e c t i v e

+ i r e c t i v e

+ a t a b i n d i n g E ! p r e s s i o n


11/24

The 2ow of the ang#larpage

3low,age start

loading andAngularJS gets

do!nloaded

Angular.Jsregisters abootstrap

callback

Angular

compiles the#80 startingroot elementand process

the directi$es

bindings

8nce ng*app isound thecorresponding

element isconsidered asroot element

8nce ull #80

is loadedAngular

tra$erses the#80 And fnd

ng*app

directi$e

&ser makes are;uest to

&R5

IGATE Sensitive


12/24

#irecti$es

• It pro$ides it2s o!n and $ery rich list o attribute and properties

or )T05 controls !hich increases the usability o itexponentially. It is also called directi$es.

• #irecti$es are most po!erul eature o Angular Js and they !illlet you speciy ho! your page should be structured or the dataa$ailable in a gi$en scope.

• There are M>N directi$es in angular Js !hich !e are using in many!ays.

• )ere all !ords prefxing !ith CngD key!ord aredirecti$es.

•

Some useul directi$es are ng*repeat ng * init ng*sho! ng*hide ng*model ng* s!itch ng ? i ng*model*instant ng*controller ng*click etc/.

• Some time it is prefxed !ith data like Cdata * ng* s!itchD.Both are o same meaning.

IGATE Sensitive


13/24

#irecti$es

At a high le$el directi$es are markers on a #80element 3such as an attribute element name or 'SSclass4 that tell AngularJSLs )T05 compiler3Ocompile4 to attach a specifed beha$ior to that#80 element or e$en transorm the #80 element

and its childrenaforminp#tinp#t.chec$bo!inp#t.email

inp#t.n#mberinp#t.radioinp#t.te!tinp#t.#rlngAppngBind

ngBind)tmlngBindTem

ngBlurng'hangengChec$edng'lassng'lass($enng'lass8dd

ng'lick ngCloa$ng'ontrollerngCopyngCspngC#t

ng+blclic$

ng#isabledng+ocusng+ormng)ideng)re

ngIf ngIncludengInitngPeydo!nngPeypre

ssngPeyup

ng-o#seleaveng-o#semoveng-o#seover

ng-o#se#pngNon4indableng8penngastengl#rali5e

ng/eadonlyngRepeat

ngSrcngSrcsetngStylengSubmitngS!itchngTranscl#d

eng1aluescriptselectte!tarea

IGATE Sensitive


14/24

(xample o#irecti$e

H#8'T,( htmlE

htmlE

headE

script srcFangular.min.-sFE@scriptE

@headE

body ng*app ng*initFmsg Lhello !orldLFE input ng*modelFmsgF @E

pE

msgKK

@pE

@bodyE

@htmlE

In this example the ng*init attribute initiali:es an msg $ariableto Fhello !orldF and the ng*model attribute binds the contento the $ariable to an input element. The text enclosed in curlybraces is a binding expression. AngularJS e$aluates theexpression and updates the document !hene$er the $alue o

the expression changes.IGATE Sensitive

+irective

+ i r e c t i v e

t


15/24

n erstan ng'ontrollers

• In Angular a 'ontroller is a Ja$aScript constructor

unction that is used to augment the Angular Scope.

• The ng'ontroller directi$e attaches a controllerclass to the $ie!

•"hen a 'ontroller is attached to the #80 $iathe ng*controller directi$e Angular !ill instantiatea ne! 'ontroller ob-ect using the specifed'ontrollerLs constructor unction. A ne! childscope !ill be a$ailable as an in-ectable parameter tothe 'ontrollerLs constructor unction as Oscope.

&se controllers to7• Set up the initial state o the Oscope ob-ect.• Add beha$ior to the Oscope ob-ect.



16/24

#o not use controllers to7

• 0anipulate #80 Q 'ontrollers should contain onlybusiness logic. ,utting any presentation logic into'ontrollers signifcantly aects its testability. Angularhas data binding or most cases and directi$es toencapsulate manual #80 manipulation.

• +ormat input Q &se angular orm controls instead.

• +ilter output Q &se angular flters instead.

•

Share code or state across controllers Q &se angularser$ices instead.

• 0anage the lie*cycle o other components 3orexample to create ser$ice instances4.

IGATE Sensitive


17/24

H#8'T,( htmlE

html ng*appEheadE

titleE77 Angular JS (xample@titleE


scriptE

unction 6ame'trl3Oscope4

Oscope.frst6ameLRambabuL

Oscope.last6ameLAmbalaL

K

@scriptE @headE

body ng*controllerF6ame'trlFE

+irst 6ame7 input ng*modelFfrst6ameFtypeFtextF @E

brE* F F

IGATE Sensitive

(xample o 'ontroller

( l ' t ll i d l


18/24

(xample o 'ontroller in module

H#8'T,( htmlE

html ng*appFnameAppFEheadE



scriptE

$ar nameAppangular.module3LnameAppLU4nameApp.controller3L6ame'trlLunction3Oscope4

Oscope.frst6ameLRambabuL

Oscope.last6ameLAmbalaL

K4

@scriptE

@headE


+irst 6ame7 input ng*modelFfrst6ameF typeFtextF@EbrE IGATE Sensitive

l


19/24

H#8'T,( htmlE

html ng*appFnameAppFE

headE



scriptE

$ar nameAppangular.module3LnameAppLU4

nameApp.controller3L6ame'trlLunction3Oscope4Oscope.namesLRambabuLL#e$ishLLAmbalaLU

K4

@scriptE

@headE


ulE

li ng*repeatFname in namesFE

nameKK

@liE

@ulE

@bodyE

@htmlE

IGATE Sensitive

(xample o Cng*repeatD#irecti$e

+ i r e c t i v e

+irective

emp ate expan ng rect $e


20/24

emp ate*expan ng rect $e(xample

IGATE Sensitive

H#8'T,( htmlE

htmlE

headE


scriptsrcFangular.min.-sFE@scriptE

script

srcF(xpanding#erecti$e.-sFE@scriptE

@headE

body ng*appFdocsSimple#irecti$eFE

di$ ng*controllerF'ontrollerFE

di$ my*customerE@di$E

@di$E

@bodyE

@htmlE

angular.module3LdocsSimple#irecti$eL U4

.controller3L'ontrollerL LOscopeLunction3Oscope4

Oscope.customer

name7 V#e$ish!arL

address7 V"hitefeld BangaloreL

K

KU4

.directi$e3Lmy'ustomerL unction34

return

template7 L6ame7customer.nameKK Address7customer.addressKKL

K

K4

Template*expandingdirecti$e.html (xpanding#erecti$e.-s


21/24

+ilters

• Selects a subset o items rom array and returns it asa ne! array.

• +ilters does the ormatting o output as peruser re;uirement.

• This can lead to eatures such as searchingordering and more.Types o +ilters• C#rrency• date• 'lter• %son

• limitTo• lowercase• n#mber• order4y• #ppercase

IGATE Sensitive

(xample o +ilter


22/24

IGATE Sensitive

H#8'T,( htmlE

htmlE

headEtitleE77 Angular JS (xample@titleE

script rcFangular.min.-sFE@scriptE

scriptsrcF(xpanding#erecti$e.-sFE@scriptE

@headE

body ng*controllerF'ountry'trlFE

Search 7 input ng*modelF;ueryF

typeFtextFEtable E

trEthE'ountry@thE

thE,opulation@thE

@trE

tr ng*repeatFcountry in countries W

flter7;uery W orderBy7 L*populationLFE

tdEcountry.nameKK@tdE

tdEcountry.populationKK@tdE

@trE

@tableE

@bodyE@htmlE

$ar countryAppangular.module3LcountryAppLU4

countryApp.controller3L'ountry'trlLunction3Osc

ope4 Oscope.countries

FnameF7 F'hinaF FpopulationF7 =XYMXG>>>>K

FnameF7 FIndiaF FpopulationF7 =Z[Y=Y>>>>K

FnameF7 F&nited StatesF FpopulationF7X=\XZ>>>>K

FnameF7 FIndonesiaF FpopulationF7ZMZ=Y[\>>K

FnameF7 FBra:ilF FpopulationF7 Z>ZG][>>>K

FnameF7 F,akistanF FpopulationF7 =\\>Z>>>>K

FnameF7 F6igeriaF FpopulationF7 =G\M=G>>> K

FnameF7 FBangladeshF FpopulationF7=MYMMG>>>K

FnameF7 FRussiaF FpopulationF7 =[Y>>>>>>KU

Template*expandingdirecti$e.html

(xpanding#erecti$e.-s

(xample o +ilter

Reeren


23/24

Reerence

• http899codewala.net9:;9;?9learning0ang#lar%s0with0e!amples0part0<9

•

http899stephanebega#dea#.t#mblr.com9post9=@>B;@?9everything0yo#0need0to0#nderstand0to0start0with

• http899www.ng0newsletter.com9posts9validations.html

• http899fastand2#id.com9p#blicdownloads9Ang#lar"SIn>;-in#tes

• htt 899an #lar s.orIGATE Sensitive

http://codewala.net/2014/06/03/learning-angularjs-with-examples-part-1/http://codewala.net/2014/06/03/learning-angularjs-with-examples-part-1/http://codewala.net/2014/06/03/learning-angularjs-with-examples-part-1/http://stephanebegaudeau.tumblr.com/post/48776908163/everything-you-need-to-understand-to-start-withhttp://stephanebegaudeau.tumblr.com/post/48776908163/everything-you-need-to-understand-to-start-withhttp://stephanebegaudeau.tumblr.com/post/48776908163/everything-you-need-to-understand-to-start-withhttp://www.ng-newsletter.com/posts/validations.htmlhttp://fastandfluid.com/publicdownloads/AngularJSIn60Minuteshttp://fastandfluid.com/publicdownloads/AngularJSIn60Minuteshttp://fastandfluid.com/publicdownloads/AngularJSIn60Minuteshttp://angularjs.org/http://angularjs.org/http://fastandfluid.com/publicdownloads/AngularJSIn60Minuteshttp://fastandfluid.com/publicdownloads/AngularJSIn60Minuteshttp://fastandfluid.com/publicdownloads/AngularJSIn60Minuteshttp://www.ng-newsletter.com/posts/validations.htmlhttp://www.ng-newsletter.com/posts/validations.htmlhttp://stephanebegaudeau.tumblr.com/post/48776908163/everything-you-need-to-understand-to-start-withhttp://stephanebegaudeau.tumblr.com/post/48776908163/everything-you-need-to-understand-to-start-withhttp://stephanebegaudeau.tumblr.com/post/48776908163/everything-you-need-to-understand-to-start-withhttp://stephanebegaudeau.tumblr.com/post/48776908163/everything-you-need-to-understand-to-start-withhttp://codewala.net/2014/06/03/learning-angularjs-with-examples-part-1/http://codewala.net/2014/06/03/learning-angularjs-with-examples-part-1/http://codewala.net/2014/06/03/learning-angularjs-with-examples-part-1/


24/24

IGATE Sensitive

Rambabu Ambala

angularjs basic concepts

Documents