Scribd
Upload
12 views

AngularJS Unit 5

Angular. Java script for degree

Uploaded by

sampadarao nirosha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

AngularJS Unit 5

Angular. Java script for degree

Uploaded by

sampadarao nirosha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

UNI

T-5

Angul
arJS

●JavaScr
iptf
ramewor
kforwr
iti
ngwebappli
cat
ions○Handl
es:
DOM mani
pul
ati
on,
input
val
i
dati
on,ser
vercommuni
cat
ion,URLmangement,
etc.

●UsesModel
-Vi
ew-
Cont
rol
l
erpat
ter
n○HTMLTempl
ati
ngappr
oachwi
tht
wo-
waybi
ndi
ng

●Mi
nimal
ser
ver
-si
desuppor
tdi
ctat
ed

●Focusonsuppor
ti
ngforprogrammingi
nthel
argeandsi
ngl
epageappl
i
cat
ions○Modul
es,
r
eusabl
ecomponents,
test
ing,etc.

●Wi
del
yusedf
ramewor
k(Angul
ar1-2009)wi
thamaj
orr
ewr
it
ecomi
ngout

Adv
ant
agesofAngul
arJS

Theadv
antagesofAngul
arJSar
e:I
tpr
ovi
dest
hecapabi
l
ityt
ocr
eat
eSi
ngl
ePageAppl
i
cat
ioni
n
aver
ycleanand

•mai
ntai
nabl
eway
.Itpr
ovi
desdat
abi
ndi
ngcapabi
l
ityt
oHTML.Thus,
itgi
vesuserar
ichand

•r
esponsi
veexper
ience.Angul
arJScodei
suni
ttest
abl
e.

•Angul
arJSusesdependencyi
nject
ionandmakeuseofsepar
ati
onofconcer
ns.

•Angul
arJSpr
ovi
desr
eusabl
ecomponent
s.

•Wi
thAngul
arJS,
thedev
eloper
scanachi
evemor
efunct
ional
i
tywi
thshor
t

•code.I
nAngul
arJS,
viewsar
epur
eht
mlpages,
andcont
rol
l
erswr
it
teni
nJav
aScr
ipt

•dot
hebusi
nesspr
ocessi
ng.

Di
sadv
ant
agesofAngul
arJS

ThoughAngul
arJScomeswi
thalotofmerit
s,her
earesomepoi
ntsofconcer
n:Notsecur
e:
Bei
ngJavaScr
iptonl
yfr
amewor
k,appli
cat
ionwrit
teni
n

•Angular
JSarenotsaf
e.Ser
versi
deauthent
icat
ionandaut
hor
izat
ionismustt
okeepan
appl
icati
onsecur
e.Notdegr
adabl
e:I
ftheuserofyourappl
i
cat
iondisabl
esJav
aScr
ipt
,then

•nothingwouldbev i
sible,
exceptthebasi
cpage.Angul
arJSDirecti
vesTheAngular
JS
fr
amewor kcanbedi vi
dedi nt
othreemajorpar
ts:ng-
app: Thi
sdirecti
vedef
inesandli
nksan
AngularJSappli
cat
iont oHTML.

•ng-
model
:Thi
sdi
rect
ivebi
ndst
hev
aluesofAngul
arJSappl
i
cat
iondat
ato

•HTMLinputcont
rol
s.ng-
bind:
Thi
sdi
rect
ivebi
ndst
heAngul
arJSappl
i
cat
iondat
atoHTML
tags.
<ht
ml>

<head>

<scr
iptsr
c="
htt
ps:
//aj
ax.
googl
eapi
s.com/
ajax/
li
bs/
angul
arj
s/1.
3.0-

bet
a.17/
angul
ar.
min.
js"
></
scr
ipt
>

</
head>

<bodyng-
app="
myapp"
>

<di
vng-
cont
rol
l
er="
Hel
l
oCont
rol
l
er">

<h2>Wel
come{
{hel
l
oTo.
ti
tl
e}}t
othewor
ldofTut
ori
alspoi
nt!
</h2>

</
div
>

<scr
ipt
>

angul
ar.
modul
e("
myapp"
,[]
)

.
cont
rol
l
er(
"Hel
l
oCont
rol
l
er"
,funct
ion(
$scope){

$scope.
hel
l
oTo={
};

$scope.
hel
l
oTo.
ti
tl
e="
Angul
arJS"
;

}
);

</
scr
ipt
>

</
body
>

</
html
>

Cont
rol
l
er

Thecont
rol
l
erpar
tis:

<scr
ipt
>

angul
ar.
modul
e("
myapp"
,[]
)
.
cont
rol
l
er(
"Hel
l
oCont
rol
l
er"
,funct
ion(
$scope){

$scope.
hel
l
oTo={
};

$scope.
hel
l
oTo.
ti
tl
e="
Angul
arJS"
;})
;</
scr
ipt
>

Angul
arJSdi
rect
ives:
-

Q)whati
sadi
rect
ive?

Adi r
ecti
veisreal
lyawayt oteachHTMLnewt ricks.Thewebwheni tfi
rstcameoutwasr eal
ly
j
ustdesignedtodisplaystat
icpages.Asweal lknowi t’
sbecomev er
ydy namicandwe’vedealt
withthatpr
ettywell
.j
Quer ycameoutmanyy earsagoandi tprov
idedawayt odoi
t.Ev
enbef or
e
thenwecoul duseraw, v
anil
laJavaScri
pt.Angulartakesitupawholenot chandal
lowsusto
extendHTMLv er
yeasil
ybysi mpl
yaddingat t
ri
but es,el
ementsorcomment s.
.

Templ
ates,
Scopes&Cont
rol
l
ers

●Bestpr
act
ice:
Eacht
empl
atecomponentget
sanewscopeandi
spai
redwi
thacont
rol
l
er.

●Expressi
onsint
emplat
es:{{
foo+2*func()
}}ar
eev al
uat
edinthecontextoft
hescope.
Cont
roll
erset
supscope:$scope.
foo=.
..;
$scope.f
unc=functi
on(){.
..}
;

●Bestpr
act
ice:
Keepexpr
essi
onssi
mpl
eputcompl
exi
tyi
ncont
rol
l
er

●Cont
rol
l
ersmakemodel
dat
aav
ail
abl
etov
iewt
empl
ate

Scopedi
gestandwat
ches

●Two-
waybindi
ngworksbywatchi
ngwhenexpr
essi
onsi
nvi
ewt
empl
atechangeandupdat
ing
t
hecor
respondi
ngpar
toftheDOM.

●Angul
araddawat
chf
orev
eryv
ari
abl
eorf
unct
ioni
ntempl
ateexpr
essi
ons

●Duri
ngthedigestpr
ocessingallwatchedexpr essi
onsar
ecomparedtot
hei
rpreviousl
yknown
val
ueandifdi
ffer
entthetemplateisreprocessedandtheDOM updat
e○Angularautomati
cal
ly
r
unsdigestaf
tercont
roll
errun,et
c.Itispossibl
et o:

Addy
ourownwat
ches:(
$scope.
$wat
ch(
..
))(
e.g.cachi
ngi
ncont
rol
l
er)

Tr
iggeradi
gestcy
cle:(
$scope.
$di
gest
())(
e.g.model
updat
esi
nev
ent
)

Exampl
eofneedi
ngscope$wat
ch

Name:
{{f
ir
stName}
}{{
last
Name}
} v
s Name:
{{f
ull
Name}
}

$scope.
ful
l
Name=$scope.
fi
rst
Name+""+$scope.
last
Name;

$scope.
$wat
ch(
'f
ir
stName'
,f
unct
ion(
){

$scope.
ful
l
Name=$scope.
fi
rst
Name+""+$scope.
last
Name;

}
);
Angul
arBoot
Str
appi
ng:
-

Angul
arJSScopeExampl
e:-

<!
DOCTYPEht
ml>

<ht
ml>

<head>Angul
arJSScope

<scr
iptsr
c="
htt
ps:
//aj
ax.
googl
eapi
s.com/
ajax/
li
bs/
angul
arj
s/1.
6.4/
angul
ar.
min.
js"
></
scr
ipt
>

</
head>

<scr
ipt
>

v
arapp=angul
ar.
modul
e('
myApp'
,[
])
;

app.
cont
rol
l
er(
'my
cont
rol
l
er'
,f
unct
ion(
$scope){

$scope.
names=[
"JAVA"
,".
NET"
,"PHYTHON"
];}
);

</
scr
ipt
>

<body
>

<di
vng-
app="
myApp"ng-
cont
rol
l
er="
mycont
rol
l
er"
>

<ul
>

<l
ing-
repeat
="xi
nnames"
>{{
x}}
</l
i
>

</
ul>

</
div
>

<p>Hel
l
oXHowRU?
???
???
???
???
???
???
?..
..
..
..
..
..
..
..
..
..
..
</p>

</
body
>

</
html
>

Angul
arJSDi
rect
iveExampl
e:-

<!
--
ng-
app-Thi
sdi
rect
ivest
art
sanAngul
arJSAppl
i
cat
ion.

ng-
ini
t-Thi
sdi
rect
ivei
nit
ial
i
zesappl
i
cat
iondat
a.

ng-
model
-Thi
sdi
rect
ivebi
ndst
hev
aluesofAngul
arJSappl
i
cat
iondat
atoHTMLi
nputcont
rol
s.
ng-
repeat-Thi
sdi
rect
iver
epeat
sht
mlel
ement
sforeachi
tem i
nacol
l
ect
ion.
--
>

<ht
ml>

<head>

<scr
iptsr
c=
"
htt
ps:
//aj
ax.
googleapi
s.com/
ajax/
li
bs/
angul
arj
s/1.
3.14/
angul
ar.
min.
js"
></
scr
ipt
>

</
head>

<body
>

<h1>Usi
ngal
lDi
rect
ives</
h1>

<di
vng-app=" "ng-
ini
t="
count
ri
es=[
{name:
'
Uni
tedSt
ates'
},
{name:
'
Uni
tedKi
ngdom'
},
{
name:'
France'
}]
">

<p>Ent
ery
ourName:
<inputt
ype="
text
"ng-
model
="name"
></
p>

<p>Hel
l
oGuy
s..
..
..
..
..
..
..
<spanng-
bind="
name"
></
span>!
</p>

<p>Li
stofCount
ri
es:
</p>

<ol
>

<l
ing-
repeat="
count
ryi
ncount
ri
es"
>

{
{'Count
ry:
'+count
ry.
name+'
'}}

</
li
>

</
ol>

</
div
>

</
body
>

</
html
>

Angul
arJSCont
rol
l
erExampl
e:-

<ht
ml>

<scr
iptsr
c="
htt
ps:
//aj
ax.
googl
eapi
s.com/
ajax/
li
bs/
angul
arj
s/1.
6.4/
angul
ar.
min.
js"
></
scr
ipt
>

<body
>

<di
vng-
app="
myApp"ng-
cont
rol
l
er="
namesCt
rl
">

<ul
>

<l
ing-
repeat
="xi
nnames"
>
{
{x.
name+'
,'+x.
count
ry}
}

</
li
>

</
ul>

</
div
>

<scr
iptsr
c="
namesCont
rol
l
er.
js"
></
scr
ipt
>

</
body
>

</
html
>

Angul
arJSExpr
essi
ons:
-

<ht
ml>

<head>

<t
it
le>Angul
arJSExpr
essi
ons</
ti
tl
e>

<scr
iptsr
c=
"
htt
ps:
//aj
ax.
googleapi
s.com/
ajax/
li
bs/
angul
arj
s/1.
3.14/
angul
ar.
min.
js"
></
scr
ipt
>

</
head>

<body
>

<h1>St
udentDat
a</
h1>

<di
vng-
app=""ng-
ini
t="quant
it
y=1;cost=30;st
udent={
fi
rst
name:
'
Siddu'
,
last
name:
'
from
Sr
ikakul
am'
,rol
l
no:
101}
;marks=[80,
90,
75,73,
60]
">

<p>Hel
l
o..
..
..
..
..{
{st
udent
.f
ir
stname+""+st
udent
.l
ast
name}
}!
</p>

<p>ExpenseonBooks:
{{cost*quant
it
y}}Rs</
p>

<p>Rol
lNo:
{{st
udent
.r
oll
no}
}</
p>

<p>Mar
ks(
Mat
h):
{{mar
ks[
3]}
}</
p>

</
div
>

</
body
>

</
html
>

Angul
arJSDi
rect
ives:
-

Angul
arJSdir
ectiv
esareusedtoextendHTML.Theyarespeci
alat
tri
but
esstar
ti
ngwit
hng-
pr
efi
x.Letusdiscusst
hefoll
owingdirect
ives:ng-
app–Thi
sdir
ecti
vestar
tsanAngul
arJS
Appl
i
cat
ion.

•ng-
ini
t–Thi
sdi
rect
ivei
nit
ial
i
zesappl
i
cat
iondat
a.

•ng-
model
–Thi
sdi
rect
ivedef
inest
hemodel
thati
svar
iabl
etobeusedi
nAngul
arJS.

•ng-
repeat–Thi
sdi
rect
iver
epeat
sHTMLel
ement
sforeachi
tem i
nacol
l
ect
ion.

ng-
appdi
rect
ive

Theng-
appdi
rect
ivest
art
sanAngul
arJSAppl
i
cat
ion.I
tdef
inest
her
ootel
ement
.It

aut
omat
ical
l
yini
ti
ali
zesorboot
str
apst
heappl
i
cat
ionwhent
hewebpagecont
aini
ng

Angul
arJSAppl
i
cat
ioni
sloaded.I
tisal
sousedt
oloadv
ari
ousAngul
arJSmodul
esi
n

Angul
arJSAppl
i
cat
ion.I
nthef
oll
owi
ngexampl
e,wedef
ineadef
aul
tAngul
arJS

appl
i
cat
ionusi
ngng-
appat
tri
but
eofa<di
v>el
ement
.

EX:
-

<di
vng-
app="
">

.
..

</
div
>

ng-
ini
tdi
rect
ive

Theng-i
nitdi
rect
iveini
ti
ali
zesanAngul
arJSAppli
cat
iondata.I
tisusedt
oassi
gnval
uestot
he
var
iabl
es.Int
hefollowi
ngexample,weini
ti
ali
zeanarrayofcount
ri
es.WeuseJSONsynt
axto
def
inethearr
ayofcount r
ies.

Ex:
-

<di
vng-
app="
"ng-
ini
t="
count
ri
es=[
{l
ocal
e:'
en-
US'
,
name:
'
Uni
tedSt
ates'
},

{
local
e:'
en-
GB'
,
name:
'
Uni
tedKi
ngdom'
},

{
local
e:'
en-
FR'
,
name:
'
France'
}]
">

.
..

</
div
>

ng-
model
dir
ect
ive

Theng-modeldi
rect
ivedef
inest
hemodel
/var
iabl
etobeusedi
nAngul
arJSAppl
i
cat
ion.I
nthe
fol
l
owingexample,wedefi
neamodelnamedname.

Ex:
-
<di
vng-
app="
">

.
..

<p>Ent
ery
ourName:
<inputt
ype="
text
"ng-
model
="name"
></
p>

</
div
>

ng-
repeatdi
rect
ive

Theng-r
epeatdi
recti
verepeat
sHTMLel ement
sforeachi
tem i
nacol
l
ect
ion.I
nthef
oll
owi
ng
exampl
e,weit
erateoverthear
rayofcount
ri
es.

Ex:
-

<di
vng-
app="
">

.
..

<p>Li
stofCount
ri
eswi
thl
ocal
e:</
p>

<ol
>

<l
ing-
repeat
="count
ryi
ncount
ri
es"
>

{
{'Count
ry:
'+count
ry.
name+'
,Local
e:'
+count
ry.
local
e}}

</
li
>

</
ol>

</
div
>

Angul
arJSAni
mat
ion:
-

Angul
arJSpr
ovi
desani
matedtransi
ti
ons,wit
hhel
pf r
om CSS.AnAnimat
ioni
swhent
he
tr
ansf
ormati
onofanHTMLelementgivesy
ouanil
lusi
onofmot i
on.

ThengAnimatemoduledoesnotanimateHTMLelement
s,butwhenngAnimatenot
icecer
tai
n
event
s,l
ikehi
deorshowofanHTMLel ement
,theel
ementgetssomepre-
defi
nedcl
asses
whichcanbeusedtomakeanimations.

Thedi
rect
ivei
nAngul
arJSwhi
chadd/
remov
eqcl
assesar
e:

• ng-
show

• ng-
hide

• ng-
class

• ng-
view

• ng-
incl
ude

• ng-
repeat
• ng-
if

• ng-
swi
tch

ng-
showandng-
hidedi
rect
iveaddsorr
emov
esang-
hidecl
assv
alue.

Theot
herdir
ecti
veaddsang-entercl
assv
aluewhent
heyent
ert
heDOM ,
andang-
leav
e
at
tri
but
ewhentheyarer
emov edf
rom theDOM.

Theng-
repeatdi
rect
iveal
soaddsang-
mov
ecl
assv
aluewhent
heHTMLel
ement
changesposi
ti
on.

Exampl
e:-

<!
DOCTYPEht
ml>

<ht
ml>

<st
yle>

di
v{

backgr
ound-
col
or:
#00FF80;

hei
ght
:100px;

wi
dth:
100%;

posi
ti
on:
rel
ati
ve;

t
op:
0;

.
ng-
hide{

hei
ght
:0;

wi
dth:
0;

backgr
ound-
col
or:
transpar
ent
;

t
op:
-200px;

l
eft
:200px;}

</
sty
le>

<scr
iptsr
c="
htt
ps:
//aj
ax.
googl
eapi
s.com/
ajax/
li
bs/
angul
arj
s/1.
4.8/
angul
ar.
min.
js"
></
scr
ipt
>

<scri
ptsrc="ht
tps:
//aj
ax.
googl
eapi
s.com/
ajax/
li
bs/
angul
arj
s/1.
4.8/
angul
ar-
animate.
js"></
scri
pt>

<bodyng-
app="
ngAni
mat
e">
<h1>Ani
mat
ion:
<inputt
ype="
checkbox"ng-
model
="my
Check"
></
h1>

<di
vng-
hide="
myCheck"
></
div
>

</
body
>

</
html
>

Angul
arCRUDoper
ati
ons

Cr
eat
etabl
einSQLSer
ver
:-

Youwil
lfi
rstneedt
ocr eat
etabl
ethatwi
l
lhol
dthedat
aand
wi
l
lhel
pusdot
heCRUDoper
ati
ons.Thetablei
sdbo.Books.

CREATETABLE[
dbo]
.[
Books]
(

[
BookI
D][
int
]NOTNULL,

[
BookName]
[var
char
](
50)NULL,

[
Pri
ce]
[f
loat
]NULL

PRI
MARYKEYCLUSTERED[
BookI
D])

• Thetabl
ejusthas3columns.Thefi
rst(
theBookI
D)isoft
ypeNOTNULL,
i
.e,
itwi
l
l
cr
eat
eauniqueidforeachbookwheny oui
nsertanewdata.

Angul
arJSCRUDExampl
e:-

<ht
ml>

<head>

<scr
iptsr
c=ht
tps:
//aj
ax.
googl
eapi
s.com/
ajax/
li
bs/
angul
arj
s/1.
4.5/
angul
ar.
min.
js></
scr
ipt
>

<st
yle>

di
v{wi
dth:
200px;
text
-al
i
gn:
cent
er;
}

<scr
ipt
>

v
army
App=angul
ar.
modul
e(‘
myApp’
,
[]
);

my
App.
cont
rol
l
er(
‘my
Cont
rol
l
er’
,
funct
ion(
$scope,
$ht
tp)
{

$scope.
sav
e=f
unct
ion(
){

Per
for
m_CRUD(
‘SAVE’
,
0)

Cl
ear
Input
();}
;

</
scr
ipt
>
</
head>

<body
>

<di
vng-
app=”
myApp”ng-
cont
rol
l
er=”
myCont
rol
l
er”

ng-
ini
t=”
myLi
st”=[
{cat
egor
y:’
Bussi
ness’
},

{
cat
egor
y:’
Comput
er’
},

{
cat
egor
y:’
Sci
ence’
}]
>

<di
v>

<l
abel
>{{
BookI
D}}
</l
abel
>

<ul
>

<l
i
><i
nputname=”
BookName”pl
acehol
der
=”Ent
erBookName”
></
li
>

<l
i
><i
nputname=”
pri
ce”pl
acehol
der
=”Ent
erPr
ice”
></
li
>

</
ul>

<p>

<but
toni
d=”
sav
e”ng-
disabl
ed=”
isDi
sabl
ed”ng-
cli
ck=”
sav
e()
”>Sav
eBook</
but
ton>

<but
toni
d=”
updat
e”ng-
cli
ck=”
updat
e()
”>Updat
eBook</
but
ton>

<but
toni
d=”
del
ete”ng-
cli
ck=”
del
ete(
)”>Del
eteBook</
but
ton>

</
p>

</
div
>

</
body
>

</
html
>

You might also like