Web Fest AngularJS

7/17/2019 Web Fest AngularJS

http://slidepdf.com/reader/full/web-fest-angularjs 1/59



PRESENTED BY JAMES SPEIRS

DEMYS



Objectives

To give you a founation on !"ic" you can begin to une#stan a$$ ot"e# tuto#ia$s an ocu%entation out t"e#e&

'e !i$$ cove#() '"y

) Te#%ino$ogy

) *o!

'e !i$$ ve#y b#ie+y cove# "o! to bui$ you# ,#st Angu$a#JS a--$icati



Out$ine

.& Introduction / '"y you s"ou$ be using Angu$a#JS0& Terminology / T"e c#itica$ founation fo# une#staning

1& Modules / Reusab$e functiona$ity

2& Controllers / Faci$itating co%%unication bet!een t"e %oe$ avie!

3& Filters / 4"anging t"e !ay you see t"ings6. Services / Five #eci-e +avo#s

5& Directives / E6tening *TM7

8& Demo / 'o#s in action

9& Conclusions / T"e en is nig"



Int#ouction'*Y YO: S*O:7D BE :SIN; AN;:7ARJS



'"at is Angu$a#JS an !"y uit<

Fi#st o=> !"y use JavaSc#i-t<) To yna%ica$$y u-ate you# *TM7 ocu%ent an to get ata to an f#o%

Angu$a#JS is a f#a%e!o#? @a JavaSc#i-t $ib#a#y t"at %a?es it easie# co%%unicate bet!een you# *TM7 ocu%ent an JavaSc#i-t&

*o! %any -eo-$e a#e sti$$ using jue#y to getCu-ate t"ei# *TM7 oata<) T"e#e is a bette# !ay



Sa%-$e A--$ication

Objectives) *ave a fo#% t"at a$$o!s you to ente# you# na%e&

) '"i$e you ente# you# na%e it g#eets you by na%e&

) Once you c$ic? sub%it it uses AJA to sen you# na%e to a !eb se#vice&



jue#y E6a%-$e

*TM7 FRA;MENT JAAS4RIPT FRA;MENT

<form>

<p>

Enter your name:

<input type="text" id="name" required>

<button type="button"

disabled="disabled”>Submit</button>

</p>

<p id="greet" style="display: none">

Hello,

<span id="namerepeat"></span>

</p>

</form>

var name = !#$name#%,

name&epeat = !#$namerepeat#%,

greet = !"$greet"%,

submit = !"button"%'

name(bind#)eyup#, function% *

var disabled, +alue'

+alue = name(+al%'

if +alue(lengt === -% *

submit(attr#disabled#, #disab

greet(.ss#display#, #none#%'

else *

submit(remo+e0ttr#disabled#%'

greet(.ss#display#, #blo.)#%'

name&epeat(innerH123 = +alue'

%'

submit(bind#.li.)#, function% *

!(a4ax#/ser+i.e5name=# 6 name(+al

%'



Angu$a#JS E6a%-$e


!s.ope(submit = function% *

!ttp(get#/ser+i.e5name=# 6 !s.op

'

<form>

<p>

Enter your name:

<input type="text" ngmodel="name" required>

<button type="button" ng.li.)="submit%"

ngdisabled="7name">Submit</button>

</p>

<p ngso8="name">

Hello, **name

</p>

</form>



Angu$a#JS E6a%-$e


<form>

<p>

Enter your name:


<button type="button" ng.li.)="submit%"

ngdisabled="7name">Submit</button>

</p>

<p ngso8="name">

Hello, **name

</p>

</form>

!s.ope(submit = function% *

!ttp(get#/ser+i.e5name=# 6 !s.op

'



Te#%ino$ogy T*E 4RITI4A7 FO:NDATION FOR :NDERSTANDIN;



Moe$ ie! 4ont#o$$e# '"at is t"e M4<) Moe$ / t"e ata

) ie! / t"e use# inte#face> !"at t"e use# sees an inte#act !it"

) 4ont#o$$e# / t"e inte#face bet!een t"e %oe$ an t"e vie!

T"e %oe$ is not necessa#i$y t"e ata f#o% t"e atabase&

T"e b#o!se#> se#ve#> an atabase can "ave t"ei# o!n M4 syste%often o&

'"en !e ta$? about t"e M4 in t"is -#esentation !eG$$ be ta$?ing abM4 on t"e b#o!se#&



Data Bining '"at is ata bining<

) DataHbining in Angu$a# a--s is t"e auto%atic sync"#oniation of ata b%oe$ an vie! co%-onents& @"tt-sCCocs&angu$a#js&o#gCguieCatabin

F#o% t"e -#evious Angu$a#JS e6a%-$e !e "ave seve#a$ ata bining@%a#?e be$o! in #e&

<form>

<p>

Enter your name:

<input type="text" ngmodel="name" required> <button type="button" ng.li.)="submit%" ngdisabled="7name">Submit</button>

</p>

<p ngso8="name">

Hello, **name

</p>

</form>

https://docs.angularjs.org/guide/databinding

https://docs.angularjs.org/guide/databinding



E6-#essions '"at is a JavaSc#i-t e6-#ession<

) An e6-#ession -#ouces a va$ue an can be !#itten !"e#eve# a va$ue is "tt-CC!!!&0a$ity&co%C0.0C9Ce6-#essionsHvsHstate%ents&"t%$

Angu$a#JS a$so "as e6-#essions)

Angu$a# e6-#essions a#e JavaSc#i-tH$i?e coe sni--ets t"at a#e usua$$y -$binings suc" asKK e6-#ession LL& @"tt-sCCocs&angu$a#js&o#gCguieCe6-#ession

my+ar

9 6 x

myfun."a", "b"%

<form>

<p>

Enter your name:


<button type="button" ng.li.)="submit%" ngdisabled="7name">Submit</button>

</p>

<p ngso8="name">

Hello, **name

</p></form>

http://www.2ality.com/2012/09/expressions-vs-statements.html


https://docs.angularjs.org/guide/expression

https://docs.angularjs.org/guide/expression





Di#ective '"at is a i#ective<

) It is a %a#?e# on an *TM7 e$e%ent @suc" as an att#ibute> e$e%ent na%e>o# 4SS c$ass t"at Angu$a#JS #ecognies an uses to c#eate a custo%iefunctiona$ity anCo# use# inte#face&

Angu$a#JS co%es !it" %any -#eHbui$t i#ectives> but you can a$so !o!n custo% i#ectives&<form>

<p>

Enter your name:

<input type="text" ngmodel="name" required> <button type="button" ng.li.)="submit%" ngdisabled="7name">Submit</button>

</p>

<p ngso8="name">

Hello, **name

</p>

</form>



Sco-e '"at is sco-e<

) It is t"e conte6t in !"ic" an e6-#ession is eva$uate&

T"is e6a%-$e "as t"#ee sco-es> one of !"ic" in"e#its a va#iab$e f#o-a#ent sco-e&function foo% *

var name = "on"'

function ello% *

var name = "a.)"'

return "Hello, " 6 name'

function goodbye% *

return ";ood bye, " 6 name'

ello%' //returns "Hello, a.)"

goodbye%' //returns ";ood bye, on"'



Se#vice '"at is a se#vice<

) T"e su--$ying o# su--$ie# of uti$ities o# co%%oities> as !ate#> e$ect#icity#eui#e o# e%ane by t"e -ub$ic& @"tt-CCictiona#y&#efe#ence&co%Cb#o!seCse#vice

In -#og#a%%ing !e can e,ne a se#vice as() T"e su--$ying of su--$ie# of uti$ities o# co%%oities> as functions> valu

objects> #eui#e o# e%ane by an expression&

In Angu$a#JS you can e,ne se#vices t"at -#ovie functiona$ity t"atuse #e-eate$y t"#oug"out you# coe&

http://dictionary.reference.com/browse/service






De-enency Injection

OPTION . ;7OBA77Y A44ESSIBI7ITYOPTION 0 :SE DEPENDEN4INJE4TION

'"en one function is e-enent on t"e ata o# functiona$ity of so%et"ing so%et"ing e$se %ust be accessib$e&

function di+idea, b% *

return a / b'

var a = , b = '

function di+ide% *

return a / b'



De-enency Injection De-enency injection #eui#es s-eci,c ata f#o% eac" -a#a%ete#& Yuse t"e ivie function $i?e t"is

function di+idea, b% *

return a / b'

di+ide#ello#, * x: %'



Mou$esRE:SAB7E F:N4TIONA7ITY



Mou$es '"at is a %ou$e<

) A containe# fo# coe fo# t"e i=e#ent -a#ts of you# a--$ications&

A %ou$e is use to e,ne services t"at a#e #eusab$e by bot" t"e ocu%ent an ot"e# %ou$es) 4ont#o$$e#

) Di#ective

) 4onstant> a$ue

) Facto#y> P#ovie#> Se#vice) Fi$te#

est !ractice" Divie you# coe into %ou$es !it" istinct functioDonGt -ut eve#yt"ing in one %ou$e&



Mou$e De,nition De,ne a %ou$e

De,ne a %ou$e !it" e-enencies on ot"e# %ou$es

;et an e6isting %ou$e

var module = angular(module#my2odule#, ?%'

var module = angular(module#my2odule#%'

var module = angular(module#my2odule#, #oter2odule#?%'



A--$ication Mou$e


Angu$a#JS -#ovies a !ay fo# you to bin you# %ain %ou$e to t"e *TM7 using t"e ngHa-- i#ective&

angular(module#my0pp#, ?%'<di+ ngapp=#my0pp#>

(((

</di+>



Mou$e P"ases

4ONFI;

T"e con,g -"ase "a--ens ea#$y !"i$e t"e a--$ication is sti$$ being bui$t& On$y t"e-#ovie# se#vices an constant se#vices a#e #eay fo# e-enency injection at

t"is stage&

R:N

T"e #un -"ase "a--ens once t"e %ou$e "as $oavar module = angular(module#my2odule#, ?%'

module(.onfigfunction% * alert#@ run first#%'

?%'

module(runfunction% *

alert#@ run se.ond#%'

?%'



Mou$e 4o%-onents anDe-enency Injection

Angu$a#JS $ets you inject services @eit"e# f#o% its o!n %ou$e o# f#

%ou$es !it" t"e fo$$o!ing -atte#n

'"at about JavaSc#i-t %ini,e#s<

var module = angular(module#my2odule#, ?%'

module(ser+i.e#ser+i.e0#, function% * ((( %'

module(ser+i.e#ser+i.eA#, functionser+i.e0% * ((( %'

module(ser+i.e#ser+i.eA#, #ser+i.e0#, functionser+i.e0% *

(((

?%'



4ont#o$$e#sFA4I7ITATIN; 4OMM:NI4ATION BET'EEN T*E MOAND T*E IE'



4ont#o$$e# De,nition anAssign%ent


<di+ ngapp=#my0pp# ng.ontroller="myBontroller">

<p>Hello, **name7</p>

<p>**greet%</p>

</di+>

var module = angular(module#my0pp#,

module(.ontroller#myBontroller#,

#!s.ope#, function!s.ope% *

!s.ope(name = #on Smit#'

!s.ope(greet = function% *

return #Hello, # 6 !s.ope(nam

'

?%'

4ont#o$$e#s $in? t"e %oe$ an t"e vie! using t"e Angu$a#JS se#vice

Nesting cont#o$$e#s is bot" -ossib$e an f#euent$y one&



Fi$te#s4*AN;IN; T*E 'AY YO: SEE T*IN;S



Fi$te#s '"at is a ,$te#

) A ,$te# fo#%ats t"e va$ue of an e6-#ession fo# is-$ay to t"e use#& @"tt-socs&angu$a#js&o#gCguieC,$te#

Fi$te#s can be use in *TM7 using t"e ba# notation o# t"ey can be u JavaSc#i-t by injecting t"e ,$te# se#vice&

https://docs.angularjs.org/guide/filter






Fi$te#s

*TM7 EAMP7E JAAS4RIPT EAMP7E

var module = angular(module#my0pp#,

module(.ontroller#myBontroller#,

#!s.ope#, #!filter#, function!s.op

!s.ope(name = #on Smit#'

!s.ope(upper.aseCame = function

return !filter#upper.ase#%!

'

?%'

<di+ ngapp=#my0pp# ng.ontroller="myBontroller">

<p>**name D upper.ase</p>

<p>**upper.aseCame%</p>

</di+>



Fi$te#s !it" Pa#a%ete#s

*TM7 EAMP7E JAAS4RIPT EAMP7E** expression D filterCame : param : param !filter#filterCame#%expression, para



4o#e Fi$te#s Angu$a#JS "as seve#a$ ,$te#s bui$t in

) cu##ency

) ate

) ,$te#

) json

) $i%itTo

) $o!e#case

)nu%be#) o#e#by

) u--e#case

** #-F-9G1G:--:--(---# D date : #2

!filter#date#%new Iate%, #2222 yyyy#%'




) cu##ency

) ate

) ,$te#

) json

) $i%itTo

) $o!e#case

) nu%be#

) o#e#by

) u--e#case

** #pear#, #apple#, #orange#? D filter :

!filter#filter#%#pear#, #apple#, #oran




) cu##ency) ate

) ,$te#

) json

) $i%itTo

) $o!e#case

) nu%be#

) o#e#by

) u--e#case

** * first: #on#, last: #Smit D 4son

!filter#4son#%* first: #on#, last: #S



Fi$te# De,nition You can e,ne a ne! ,$te# !it"in a %ou$e&

angular(module#re+erseJilter#, ?%

(filter#re+erse#, function% *

return functioninput, upper.ase% *

var i, out = ""'

input = input DD ##'

for i = -' i < input(lengt' i66% *

out = input(.ar0ti% 6 out'

// .onditional based on optional argument

if upper.ase% *

out = out(toKpperBase%'

return out'

'

?%'

!filter#re+erse#%#Hello, L

** #Hello, Lorld7# D re+erse



Se#vicesFIE RE4IPE F7AORS



a$ue T"e va$ue #eci-e sto#es a va$ue !it"in an injectab$e se#vice&

A va$ue can sto#e any se#vice ty-e a st#ing> a nu%be#> a function> aetc&

T"is va$ue of t"is se#vice can no! be injecte into any cont#o$$e#> ,se#vice&//define a module

var my2odule = angular(module#my2odule#, ?%'

//define a +alue

my2odule(+alue#.lient@d#, #a9FMF9x#%'

//define a .ontroller tat in4e.ts te +aluemy2odule(.ontroller#myBontroller#, #!s.ope#, #.lient@d#, function !s.ope, .lient@d% *

!s.ope(.lient@d = .lient@d'

?%'



Facto#y T"e facto#y #eci-e is si%i$a# to a va$ue #eci-e e6ce-t t"at it as t"

abi$ities) Abi$ity to use e-enency injection

) 7ay initia$iation

A facto#y @$i?e a va$ue can a$so #etu#n any ata ty-e&//define a fa.tory

my2odule(fa.tory#toKpperBase#, #!filter#, function!filter% *

return function+alue% *

return !filter#upper.ase#%+alue%'

?%'

//in4e.t te toKpperBase fa.tory

my2odule(.ontroller#myBontroller#, #toKpperBase#, functiontoKpperBase% *

this(upper.ase = toKpperBase#4on#%'

?%'



Se#vice Just to %a?e t"ings a $itt$e confusing> !e "ave a se#vice #eci-e ca$$e

) Yes> !e "ave ca$$e one of ou# se#vice #eci-es Se#vice& 'e #eg#et t"is at"at !e$$ be so%e"o! -unis"e fo# ou# %isee& Its $i?e !e na%e oneo=s-#ing 4"i$& Boy> t"at !ou$ %ess !it" t"e teac"e#s& @"tt-sCCocs&angu$a#js&o#gCguieC-#ovie#s

https://docs.angularjs.org/guide/providers






Se#vice T"e se#vice #eci-e !i$$ gene#ate a sing$eton of an instantiate objec

//define a ser+i.e

my2odule(ser+i.e#person#, function% *

this(first = #on#'

this(last = #ones#'

this(name = function% *

return this(first 6 # # 6 this(last'

'

?%'

//in4e.t te person ser+i.e

my2odule(.ontroller#myBontroller#, #!s.ope#, #person#, function!s.ope, person% *

!s.ope(name = person(name%'

?%'



P#ovie# (t"e P#ovie# #eci-e is t"e co#e #eci-e ty-e an a$$ t"e ot"e# #eci-

a#e just syntactic suga# on to- of it& It is t"e %ost ve#bose #eci-e !%ost abi$ities> but fo# %ost se#vices its ove#?i$$Q @"tt-sCCocs&angu$a#js&o#gCguieC-#ovie#s&

T"e -#ovie# #eci-e can be injecte u#ing a %ou$eGs con,gu#atio







P#ovie#//define a pro+ider

my2odule(pro+ider#prefix#, function

% * var prefix = ##'

//setNrefix .an be .alled during te module#s .onfig pase

this(setNrefix = function+alue% *

prefix = +alue'

'

//tis spe.ial property is required and returns a fa.tory

this(!get = function% *

return function+alue% *

return prefix 6 +alue'

?'

?%'

//in4e.t te pro+ider in te .onfig pase

my2odule(.onfig#prefixNro+ider#, functionprefixNro+ider% *

prefixNro+ider(setNrefix#on #%'

?%'

//in4e.t te pro+ider#s fa.tory

my2odule(.ontroller#myBontroller#, #prefix#, functionprefix% *

this(+alue = prefix#Smit#%' //+alue is set to "on Smit"

?%'



4onstant T"e constant #eci-e is si%i$a# to t"e va$ue #eci-e e6ce-t t"at its se#

is a$so avai$ab$e u#ing t"e %ou$eGs con,gu#ation -"ase&my2odule(.onstant#autor#, #on Smit#%'

my2odule(.onfig#autor#, functionautor% *

.onsole(log#1is app 8as made by: # 6 autor%' // "on Smit"

?%'

my2odule(.ontroller#myBontroller#, "autor", function autor% *

this(autor = autor' // "on Smit"

?%'



Di#ectivesETENDIN; *TM7



Di#ectives '"at is it<

) At a "ig" $eve$> i#ectives a#e %a#?e#s on a DOM e$e%ent @suc" as an ate$e%ent na%e> co%%ent o# 4SS c$ass t"at te$$ Angu$a#JSs *TM7 co%-i@co%-i$e to attac" a s-eci,e be"avio# to t"at DOM e$e%ent o# even tt"e DOM e$e%ent an its c"i$#en& @"tt-sCCocs&angu$a#js&o#gCguieCi#e

<form>

<p>

Enter your name:


<button type="button" ng.li.)="submit%" ngdisabled="7name">Submit</button>

</p> <p ngso8="name">

Hello, **name

</p>

</form>

https://docs.angularjs.org/guide/directive




Di#ectives '"at is it<

) At a "ig" $eve$> i#ectives a#e %a#?e#s on a DOM e$e%ent @suc" as an ate$e%ent na%e> co%%ent o# 4SS c$ass t"at te$$ Angu$a#JSs *TM7 co%-i@co%-i$e to attac" a s-eci,e be"avio# to t"at DOM e$e%ent o# even tt"e DOM e$e%ent an its c"i$#en& @"tt-sCCocs&angu$a#js&o#gCguieCi#e

'#iting custo% i#ectives is not fo# t"e faint of "ea#t&

'e cou$ easi$y "ave a t!o "ou# iscussion just on "o! to !#ite i#but !eG$$ sti$$ cove# so%e basics&







Di#ective Docu%entation Fo# fu$$ ocu%entation on "o! to !#ite i#ectives> see t"ese -ages

"tt-sCCocs&angu$a#js&o#gCguieCi#ective

"tt-sCCocs&angu$a#js&o#gCa-iCngCse#viceCco%-i$e


https://docs.angularjs.org/api/ng/service/$compile

https://docs.angularjs.org/api/ng/service/$compile




Di#ective Na%ing '"en e,ning a i#ective in JavaSc#i-t> t"e na%e is in ca%e$ case f

'"en !e activate t"at i#ective !e use a $o!e# case fo#%

Angu$a#JS !i$$ no#%a$ie t"e *TM7 to %atc" i#ective na%es by

.& St#i--ing t"e 6H an ataH f#o% t"e f#ont of t"e e$e%entCatt#ibutes0& 4onve#ting t"e co$on> as"> an une#sco#e e$i%ite na%e into ca%e

) iv ataH%yHi#ectiveCiv is #ecognie as t"e i#ective %yDi#ective

module(dire.ti+e#myIire.ti+e#, function% * ((( ?%'

<mydire.ti+e></mydire.ti+e>

<di+ mydire.ti+e></di+>

my2odule(dire.ti+e#dire.ti+eCame#, function% *

return *

priorit -



priority: -,

template: #<di+></di+>#, // or // fun.tiontElement, t0ttrs% * ((( ,

// or

// templateKrl: #dire.ti+e(tml#, // or // fun.tiontElement, t0ttrs% * ((( ,

trans.lude: false,

restri.t: #0#, // "0E2B"

templateCamespa.e: #tml#, // #tml#, #s+g#, #mat#

s.ope: false, // true, *

.ontroller: function!s.ope, !element, !attrs, !trans.lude, [email protected]% * ((( ,

.ontroller0s: #string0lias#,

require: #siblingIire.ti+eCame#, // or // #OparentIire.ti+eCame#, #5optionalIire.ti+eCame#

OoptionalNarent#?,

.ompile: function .ompiletElement, t0ttrs, trans.lude% *

return *

pre: function pre3in)s.ope, iElement, i0ttrs, .ontroller% * ((( ,

post: function post3in)s.ope, iElement, i0ttrs, .ontroller% * (((

// or

// return fun.tion post3in) ((( % * (((

,

// or // lin): *

// pre: fun.tion pre3in)s.ope, iElement, i0ttrs, .ontrollers% * ((( ,

// post: fun.tion post3in)s.ope, iElement, i0ttrs, .ontrollers% * (((

//

// or

// lin): fun.tion post3in) ((( % * (((

'

?%'



De%o A--$ication'ORDS IN A4TION



De%o A--$ication "tt-sCC!-Hev&byu&euCe6a%-$e

https://wp-dev.byu.edu/example





E6a%-$e A--$ication !ee?&js//define te "8ee)" module

var module = angular(module#8ee)#, ?%'

//define te daysPfLee) pro+ider

module(pro+ider#daysPfLee)#, function% *

var languages, default3anguage'

//define default languages

languages = *

Englis: #Sunday#, #2onday#, #1uesday#, #Lednesday#, #1ursday#, #Jriday#, #Saturday#

Jren.: #diman.e#, #lundi#, #mardi#, #mer.redi#, #4eudi#, #+endredi#, #samedi# ?,

;erman: #Sonntag#, #2ontag#, #Iienstag#, #2itt8o.#, #Ionnerstag#, #Jreitag#, #Samstag

Spanis: #domingo#, #lunes#, #martes#, #mier.oles#, #4ue+es#, #+iernes#, #sabado# ?

'

default3anguage = #Englis#'

//define te days of a 8ee) for a language

this(define = functionlanguage, sun, mon, tue, 8ed, tu, fri, sat% *

languageslanguage? = mon, tue, 8ed, tu, fri, sat ?'

'

//get or set te default language

this(default3anguage = functionlanguage% *

default3anguage = language'

return default3anguage'

'

'

//get or set te default language

this(default3anguage = functionlanguage% *

default3anguage = language'



E6a%-$e A--$ication !ee?&js default3anguage language'

return default3anguage'

'

//te fa.tory

this(!get = function% *

var fa.tory'

fa.tory = *

//get an array of te days of te 8ee) for te language spe.ified

days: functionlanguage% *

if arguments(lengt === -% language = fa.tory(default3anguage'

if 7language in languages%% throw new Error#Kn)no8n language spe.ified#%'

return languageslanguage?'

,

//te default language

default3anguage: default3anguage,

//get a+ailable languages

languages:function

% * return Pb4e.t(keyslanguages%'

'

return fa.tory'

?'

?%'

//.reate a days of 8ee) dire.ti+e to print out te days of te 8ee) in a spe.ified language

module(dire.ti+e#daysPfLee)#, #daysPfLee)#, functiondaysPfLee)% *

return *

restri.t: #0#,



E6a%-$e A--$ication a--&js//define our appli.ation and require te "8ee)" module

var app = angular(module#app#, #8ee)#?%'

//define a ne8 language for te days of te 8ee) ser+i.e

app(.onfig#daysPfLee)Nro+ider#, functiondaysPfLee)Nro+ider% *

//define te days of te 8ee) in Ianis

daysPfLee)Nro+ider(define#Ianis#, #sondag#, #mandag#, #tirsdag#, #onsdag#, #torsdag#, #fre

?%'

app(.ontroller#appBontroller#, #!s.ope#, #daysPfLee)#, function!s.ope, daysPfLee)% *

//set te sele.ted language

!s.ope(language = daysPfLee)(default3anguage'

//get te list of languages

!s.ope(languages = daysPfLee)(languages%'

?%'



De%o A--$ication ine6&"t%<7do.type tml>

<tml lang="en">

<ead> <title>0pp 1itle</title>

</ead>

<body>

<di+ ngapp="app" ng.ontroller="appBontroller">

<p>

<label for="3anguages">Sele.t a 3anguage</label><br>

<sele.t id="3anguages" ngoptions="label for label in languages" ngmodel="languag

</p>

<p>

<strong>3anguage: </strong> **language<br>

<span daysof8ee)="language"></span>

</p> </di+>

<s.ript sr.="4s/angular(4s"></s.ript>

<s.ript sr.="4s/app(4s"></s.ript>

<s.ript sr.="4s/8ee)(4s"></s.ript>

</body>

</tml>



4onc$usions T*E END IS NI;*

Essentia$s fo# Bui$ing You# F



sse a s o u g ouA--

*TM7 DO4:MENT APP&JS

var module = angular(module#app#, #m<7do.type tml>

<tml lang="en" ngapp="app">

<ead>

<title>0pp 1itle</title>

<lin) rel="styleseet" ref=".ss/styles(.ss">

</ead>

<body>

<s.ript sr.="4s/angular(4s"></s.ript>

<s.ript sr.="4s/app(4s"></s.ript>

<s.ript sr.="4s/module0(4s"></s.ript>

</body></tml>



;#eat Resou#ces Ocia$ Tuto#ia$ / "tt-sCCocs&angu$a#js&o#gCtuto#ia$

Ocia$ API / "tt-sCCocs&angu$a#js&o#gCa-i

Deve$o-e# ;uie / "tt-sCCocs&angu$a#js&o#gCguie

ieo Tuto#ia$s / "tt-sCCegg"ea&ioC

ieo Int#ouction / "tt-sCC!!!&youtube&co%C!atc"<vUi9M*ig:VW

YouTube 4"anne$ / "tt-sCC

!!!&youtube&co%Cc"anne$C:4%9iiIfg%OD:J6INec*?A A#tic$es> e6-$anations> tuto#ia$s / "tt-CC!!!&ngHne!s$ette#&co%C

https://docs.angularjs.org/tutorial

https://docs.angularjs.org/api

https://docs.angularjs.org/guide

https://egghead.io/

https://www.youtube.com/watch?v=i9MHigUZKEM

https://www.youtube.com/channel/UCm9iiIfgmVODUJxINecHQkA


http://www.ng-newsletter.com/







https://egghead.io/

https://egghead.io/










About Me Ja%es S-ei#s

A--$ication Founations

OIT 4o#e Se#vices

B#ig"a% Young :nive#sity

Documents

Web Fest AngularJS