You are on page 1of 34

1

JavaScript

Versiune:iunie/2015

Cuprins

Cuprins
Introducere
PrimulprogramnJavaScript
JavaScriptpoateschimbaconinutulelementelorhtml
JSpoateschimbaatributelehtml
JSpoateschimbastilulCSS
JSpoatevalidadatele
UndepotfiplasatescripturileJS?
JSin<head>
JSn<body>
JSnfiiereexterne
PosibilitiledeafiarealeJS
Utilizareawindow.alert()
Utilizareadocument.write()
UtilizareainnerHTML
Utilizareaconsole.log()

ComentareacoduluinJS
VariabilenJS
Operatoruldeatribuire
TipuridedatenJavaScript
OperatorinJS
OperatorideatribuirenJS
Operatoridecomparaieilogici
Precedentaoperatorilor
TipuridedatenJS
BiblioteciJavaScript
IntroducerenAngularJS
ExpresiinAngularJS
NumerenAngularJS
TextnAngularJS
ObiectenAngularJS
ManipularearraysnAngularJS
Concluzii:
DirectiveAngularJS
LegareadatelornAngularJS
RepetareaelementelorHTML
ControllerinAngularJS
Controllerinfileexterne
FiltrenAngularJS
Adugareafiltrelornexpresii
Citireadatelordepeserver$http
TabelenAngularJS
AdugarestyleCSS
AdugareafiltruluiorderBy
Adugareafiltruluiuppercase
Adugareaunuiindexntabel
SQLiAngularJS
PHPiMySQL
ASP.NETcuSQL

Introducere

JavaScriptafostdezvoltatprimadatadecatrefirmaNetscape,cunumeledeLive
Script,unlimbajdescriptcareextindeacapacitatileHTML,oferaoalternativapartialala
utilizareaunuinumarmaredescripturiCGIpentruprelucrareainformatiilordinformularesi
careadaugadinamisminpaginileweb.

DupalansarealimbajuluiJava,NetscapeainceputsalucrezecufirmaSun,cu
scopuldeacreaunlimbajdescriptcuosintaxasisemanticaasemanatoarecualimbajului
Java,sidinmotivedemarketingnumelenouluilimbajdescriptafostschimbatin
"JavaScript".

JavaScriptaaparutdinnevoiacalogicasiinteligentasafiesipeparteadeclient,
nudoarpeparteadeserver.Dacatoatalogicaestepeparteadeserver,intreagaprelucrare
estefacutalaserver,chiarsipentrulucrurisimple,asacumestevalidareadatelor.Astfel,
JavaScriptilinzestreazapeclientsifacecarelatiasafieunadevaratsistemclientserver.

LimbajulHTMLoferaautorilordepaginiWeboanumitaflexibilitate,darstatica.
DocumenteleHTMLnupotinteractionacuutilizatorulnaltmodmaidinamic,dectpunela
dispozitiaacestuialegaturilaalteresurse(URLuri).CreareadeCGIuri(CommonGraphics
Interface)[programecareruleazapeserverulWebsicareacceptainformatiiprimitedin
paginadewebsireturneazacodHTML]aduslaimbogatireaposibilitatilordelucru.Astfel,
unpasimportantspreinteractivizareafostrealizatdeJavaScript,carepermiteinserarean
paginilewebascripturilorcareseexecutancadrulpaginiiweb,maiexactncadrul
browseruluiutilizatorului,usurandastfelsitraficuldintreserversiclient.Deexemplu,ntro
paginapentrucolectareadedatedelautilizatorsepotadaugascripturiJavaScriptpentrua
validacorectitudineaintroduceriisiapoipentruatrimiteserveruluidoardatecorectespre
procesare.

JavaScriptcontineolistadestuldeampladefunctiisicomenzimenitesaajutela
operatiimatematice,manipularidesiruri,sunete,imagini,obiectesiferestrealebrowserului,
linkurileURLsiverificarideintroducerialedatelornformulare.Codulnecesaracestor
actiunipoatefiinseratnpaginawebsiexecutatpecalculatorulvizitatorului.

Dupalansareasa,indecembrie1995,JavaScriptsiaatrassprijinulprincipalilor
distribuitoridindomeniu,cumsuntApple,Borland,Informix,Oracle,Sybase,HPsauIBM.
Sadezvoltatincontinuare,obtinandrecunoasteremajoritatiibrowserelor.Intelegand
importantascriptinguluiweb,MicrosoftsiadoritsaoferesuportsipentruJavaScript.

NetscapeapreferatsaacordelicentadetehnologiecompanieiMicrosoftinlocsao
vanda,astfelMicrosoftaanalizatJavaScript,sibazandusepedocumentatiapublicaacreat
propriasaimplementare,"Jscript",careesterecunoscutadeMicrosoftInternetExplorer.

Jscript1.0esteaproximativcompatibilcuJavaScript1.1,careesterecunoscutde
NetscapeNavigator.Totusi,versiunileulterioaredeJavaScriptsidiverselediferente
specificeplatformelordeoperareauinceputsadeadestuleproblemeprogramatorilorwebsi
astfelNetscape,Microsoftsialtidistribuitoriaufostdeacordsapredealimbajulunei
organizatiiinternationaledestandardizareECMAaceastaafinalizatospecificatiede
limbaj,cunoscutacaECMAScript,recunoscutadetotidistribuitorii.DesistandardulECMA
esteutil,atatNetscapecatsiMicrosoftaupropriilelorimplementarialelimbajuluisicontinua
saextindalimbajuldincolodestandarduldebaza.

PelangaJscript,MicrosoftaintrodussiunconcurentpentruJavaScript,numit
VBScript,realizatpentruausurapatrundereapewebaprogramatorilorVB.VBScripteste
unsubsetallimbajuluiVisualBasic.CutoateacesteaJavaScriptadevenitcunoscutca
limbajuldescriptingstandardpentruweb.

Primul program n JavaScript

<!DOCTYPE html>
<html>
<head>
<meta
http-equiv
=
"content-type"
content
=
"text/html; charset=utf-8"
/>
</head>
<body>
<h1>
Primul program JavaScript
</h1>
<button type="button"
onclick
=
"document.getElementById('demo').innerHTML = Date()">
Apasa

i aici pentru data

i timp
.</
button>
<p
id
=
"demo"
></p>
</body>
</html>

JavaScript poate schimba coninutul elementelor html


UnadinmetodelehtmlestegetElementById().nacestexemplumetotacaut
elementulhtml(cuid=demo)ilinlocuetecuSalut!,JavaScript.
<!DOCTYPE html>
<html>
<body>

<h1>

Schimbarea continutului elementelor html


</h1>
<p

id
=
"demo"
>
JavaScript poate schimba continutul html
</p>
<button type="button"
onclick
=
"document.getElementById('demo').innerHTML = 'Salut!, JavaScript'">
Apasatiaici

!</
button>
</body>

</html>

JS poate schimba atributele html

<!DOCTYPE html>
<html>
<body>

<h1>

JS poate schimba imaginile


</h1>
<img

id
=
"myimage"
onclick
=
"
changeImage
()
"
src
=
"pic_bulboff.gif"
width
=
"100"
height
=
"180">
<p>

Apasati pe imagine pentru a o schimba


</p>
<script>

functionchangeImage

(){
varimage

=document
.
getElementById
(
'myImage'
);
if

(
image
.
src
.
mach
(
"bulbon"
)){
image
.
src
=
"pic_bullboff.gif";
}

else{
image
.
src
=
"pic_bulbon.gif";
}
}

</script>

</body>

</html>

JS poate schimba stilul CSS

<!DOCTYPE html>
<html>
<body>

<h1>

JS poate schimba stilul CSS


</h1>
<p

id
=
"demo"
>
JS poate schimba stilul unui element HTML
</p>
<script>

functionmyFunction

(){
varx

=document
.
getElementById
(
"demo"
);
x
.
style
.
fontSize
=
"25px";
x
.
style
.
color
=
"red";
}

</script>

<button

type
=
"button"
onclick
=
"
myFunction
()
"
>
Apasa aici!
</button>
</body>

</html>

JS poate valida datele

<!DOCTYPE html>
<html>
<body>

<h1>

JS poate valida datele


</h1>
<p>

Va rugam introduce-ti un numar intre 1 si 10:


</p>
<input

id
=
"numb"
type
=
"number"
/>
<button

type
=
"button"
onclick
=
"
myFunction
()
"
>
Trimite
</button>
<p

id
=
"demo"
></p>
<script>

functionmyFunction

(){
varx

,text;
//preia valoarea din campul de input id="numb"

x
=document
.
getElementById
(
"numb"
).
value;
//daca x nu este numar sau are valoarea mai mica decat 1 sau mai

mare de 10
if

(
isNaN
(
x
)
||
x
<
1
||
x
>
10
){
text
=
"Inputul nu este valid";
}

else{
text
=
"Input OK"
}
document
.
getElementById
(
"demo"
).
innerHTML
=text;
}

</script>

</body>

</html>

Unde pot fi plasate scripturile JS?


Scripturile JavaScript pot fi plasate ntre tagurile HTML
<body>
sau
<head>
. Iar
dup cum ati vzut n exemplele de mai sus codul JS trebuie inclus ntre tagurile
<script>
</script>
. Exemplele de cod mai vechi sunt incluse intre tagurile
<script

type=text/javascript></script>
.OaltmodalitatedeplasareacoduluiJSesteinfiiere
externe.

JS in <head>

<!DOCTYPE html>
<html>
<head>

<script

type
=
"text/javascript">
functionmyFunction

(){
document
.
getElementById
(
"demo"
).
innerHTML
=
"AM SCHIMBAT TEXTUL.";
}
</script>

</head>

<body>

<h1>

Pagina mea web


</h1>
<p

id
=
"demo"
>Acest paragraf va fi modificat.
</p>
<button

type
=
"button"
onclick
=
"
myFunction
()
"
>
Incearca
</button>
</body>

</html>

JS n <body>

<!DOCTYPE html>
<html>
<body>

<h1>

>Mihai Cornel's web page


</h1>
<p

id
=
"demo"
>JavaScript in elementul "body".
</p>
<button

type
=
"button"
onclick
=
"
myFunction
()
"
>
Apasa pentru a incerca!
</button>
<script

type
=
"text/javascript"
>
functionmyFunction

()
{
document
.
getElementById
(
"demo"
).
innerHTML
=
"JS functioneaza!!!"
;
}

</script>

</body>

</html>

JS n fiiere externe

Fiiereleexterneauctevaavantaje:
separcodulHTMLdecodulJavaScript
facecodulHTMLiJavaScriptmaiuordentreinut
cretevitezadencrcareapaginilorweb.
Fiierulhtml:

<!DOCTYPE html>
<html>
<body>

<h1>

JS in fisiere externe
</h1>
<p

id
=
"demo"
>Paragraful va fi schimbat
</p>
<button

type
=
"button"
onclick
=
"
oFunctie
()
"
>Apasa!!!
</button>
<p><strong>

Nota:
</strong>oFunctie() este scrisa intr-o fila externa
</p>
<script

src
=
"script.js"
></script>
</body>

</html>

Fisieruljavascript:

functionoFunctie
(){
document
.
getElementById
(
"demo"
).
innerHTML
=
"Text modificat";
}

Posibilitile de afiare ale JS

JSpoateafiadateleprinmaimulteci:
scriereaintrofereastrdealertare,
window.alert()

scriereanpaginaHTMLprin
document.write()

scriereantrunelementalpaginiiHTMLprin
innerHTML

scriereanconsolabrowserului,utiliznd
console.log()
.

Utilizarea window.alert()

<!DOCTYPE html>
<html>
<body>

<h1>

Aceasta pagina conine o fereastra de alerta!


</h1>
<p>

Pe care o ve-ti vedea la rulare.


</p>
<script

type
=
"text/javascript">
window
.
alert
(
9
+
7
);
</script>

</body>

</html>

Utilizarea document.write()
<!DOCTYPE html>
<html>
<body>

<h1>

Aceasta pagina utilizeaza document.write()


</h1>
<p>

Va fi afisat in pagina
</p>
<script>

document
.
write
(
9
+
9
);
</script>

</body>

</html>

Stergereapaginiiwebiafiarearezultatuluinpaginagoala:

<!DOCTYPE html>
<html>
<body>

<h1>

Aceasta pagina va fi stearsa la apasarea butonului


</h1>
<p>

Si va fi afisat rezultatul:
</p>
<button

onclick
=
"
document
.
write
(
89
+
98
)
"
>
Onclick!
</button>
</body>

</html>

Utilizarea innerHTML

<!DOCTYPE html>
<html>
<body>

<h1>

Utilizarea innerHTML
</h1>
<p>

Acesta a fost cel mai utilizat.


</p>
<p

id
=
"demo"
></p>
<script>

document
.
getElementById
(
"demo"
).
innerHTML
=
123
+
321
;
</script>

</body>

</html>

Utilizarea console.log()
ActivareaconsoleibrowseruluisefacecutastaF12.

<!DOCTYPE html>
<html>
<body>

<h1>

Afisarea in consola browserului cu console.log()


</h1>
<p>

Activarea consolei se face cu tasta F12


</p>
<script>

console
.
log
(
123
+
456
);
</script>

</body>

</html>

Comentarea codului n JS
Pentrucomentareauneisingureliniidecadseutilizeazcaracterele//dupaceste
caractereliniadecodvafiignorat.Pentrucomentareamaimultorliniidecodsevautiliza/*
sisevancheiacu*/.

Variabile n JS
nJSvariabilelesuntcontainerecarestocheazvalori.

<!DOCTYPE html>
<html>
<body>

<h1>

JavaScript si variabilele
</h1>
<p>

In acest exemplu, x,y, z sunt variabile


</p>
<p

id
=
"demo"
></p>
<script>

//acesta este un comentariu pe o linie

/* acesta este un

comentariu pe mai
multe linii
*/
varx

=
5;
vary

=
22;

10

arz
v
=x
+
y;
document
.
getElementById
(
"demo"
).
innerHTML
=z
;
</script>

</body>

</html>

nJSvariabilelesuntidentificateprinnumeunice.Acestenumedeidentificarea
variabilelorpotfi:
numecarecontinlitere,numere,liniidesubliniere,etc.
trebuiesnceapcuoliter
suntcasesensitive(Asiasuntdouvariabilediferite)
nupotluacanumecuvintelerezervatelimbajuluiJS.

Operatorul de atribuire
nJSsemnul=esteunoperatordeatribuire,nusemnulegaldinmatematic.

Tipuri de date n JavaScript


nJSvariabilelepotconinenumeredeexemplu22sitextdeexemplumihaicornel
saumihaicornelambelevariantetextsuntcunoscuteicudenumireadestring.Variabilele
suntcreatecuajutorulcuvntuluicheie
var
.

varnumeleDumneavoastra;

Daraceastdeclaraie,demaisus,nuareatribuitniciovaloare,casiatribuiiopovaloare
utilizaisemnulegal(=).

numeleDumneavoastra
=
"
mihai cornel
";

Acestedoudeclaraiipotfifcutentrosinguradeclaraie:

varnumeleDumneavoastra
=
"
Mihai
Cornel
";

Pentruaafiaacestedateputemutilizaurmtorulcod:

<!DOCTYPE html>
<html>
<body>

<h1>

Variabile in JS
</h1>
<p>

Crearea unei variabile, atribuirea unei valori si afisarea acesteia.


</p>
<p>

Aceasta pagina a fost scrisa de:


</p><p
id
=
"demo"
></p>
<script>

varnumeleDumneavoastra

=
"Mihai Cornel";
document
.
getElementById
(
"demo"
).
innerHTML
=numeleDumneavoastra
;
</script>

</body>

</html>

11

Operatori n JS

Operator

Descriere

Adunare

Scadere

nmulire

mprire

Modulo(returneazarestulmpririi)

++

ncrementare

Decrementare

Operatori de atribuire n JS

Operator

Exemplu

nseamn

x=y

x=y

+=

x+=y

x=x+y

x=y

x=xy

*=

x*=y

x=x*y

/=

x/=y

x=x/y

%=

x%=y

x=x%y

Operatori de comparaie i logici

Operatori

Descriere

==

esteegal

===

esteegalideacelaitip

!=

estediferit

!==

estediferitcavaloareitip

<

maimic

12

>

maimare

<=

maimicsauegal

>=

maimaresauegal

Precedenta operatorilor

Operator

Descriere

()

paranteze

++

incrementare,decrementare

*/%

nmulire,mprire,modulo

plus,minus

Tipuri de date n JS
VariabilelediJavaScriptpotluacavalorimaimultetipuridedateca:numere,strings,
arrays,objectssialtetipuri:

varnumar
=
16
;
varnume
=
cornel"
;
varmasini
=
[
"Saab"
,
"Volvo"
,
"BMW"
];
varobiect
=
{
firstName
:
"John"
,lastName
:
"Doe"
};

// Numar

// String

// Array

// Object

nprogramareconceptuldedateestefoarteimportant,pentruaoperacuacestedateeste
necesarscunoatemctevalucruricadeexempludeclaraia:

varmasina
=
25
+
"
mihai cornel
";

Eibine,cumvainterpretacomputerulacestcod,careadununnumarcuuntext?

Biblioteci JavaScript

Bibliotec

Site

Utilizare

AngularJS

https://angularjs.org/

jQuery

https://jquery.com/

Bootstrap

http://getbootstrap.com/

Node.js

http://getbootstrap.com/

13

Ember.js

http://emberjs.com/

Introducere n AngularJS
AngularJSesteolibrrieJavaScriptcepoatefiadugatnpaginileHTMLprintagul
<script>
iareurmtoareaform:

<script
src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>

AngularJSextindeHTMLcudirectivele
ngdirectives
:
ngapp
defineteoaplicatieAngularJS,inexempluldemaijosaceastdirectiv
indiccelementul<div>esteproprietarulaplicaieiAngularJS
ngmodel
leagvalorileHTMLdininput,select,textareadeaplicaie,nexemplulde
maijosvaloareadin<input>estelegatdevariabila
name
ngbind
leagdateleaplicaieideHTML,nexempluldemaijosvaloareanameeste
atribuit(legat)deelementulHTML<p>careafieazvaloarea.

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

ng-app
=
"">
<p>

Introduce-ti text in caseta:


</p>
<p>

Nume:
<input
type
=
"text"
ng-model
=
"name"
></p>
<p

ng-bind
=
"name"
></p>
</div>

</body>

</html>

DirectiveleAngularJSsuntatributeHTMLprefixatecung,spreexempludirectiva
nginit,iniiazvariabileledinaplicaieileafieaznHTML.

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

ng-app
=
""
ng-init
=
"numeleMeu='Cornel'">
<p>

Numele meu este:


<big><span
ng-bind
=
"numeleMeu"
></span></big></p>
</div>

</body>

</html>

DacdoriisvalidaicodulHTMLputeiutilizaprefixul
data
:

<!DOCTYPE html>
<html>
<script

src
=

14

"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

data-ng-app
=
""
data-ng-init
=
"numeleMeu='Cornel'">
<p>

Numele meu este:


<big><span
data-ng-bind
=
"numeleMeu"
></span></big></p>
</div>

/body>
<
</html>

ExpresiilenAngularJSsescriunparantezeduble
{{expresie}}
idatelevorfi
afiatenloculncareafostscrisexpresia:

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

data-ng-app
=
"">
<p>

Acesta este primul calcul in AngularJS: {{15+22}}


</p>
</div>

</body>

</html>

ExpresiileAngularJSafieazdatelenHTMLlafelcumofaceidirectivangbind:

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

data-ng-app
=
"">
<p>

Introduce-ti text in caseta de input:


</p>
<p>

Numele:
<input
type
=
"text"
ng-model
=
"nume"
/></p>
<p>

{{nume}}
</p>
</div>

</body>

</html>

IntroaplicaieAngularJSdirectivangappdefineteaplicaiaiardirectiva
ngcontrollerdefinetecontrolerulaplicaiei:

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<p>

Incercati sa schimbati numele.


</p>
<div

ng-app
=
"myApp"
ng-controller
=
"myCtrl">
Nume

:
<
input type
=
"text"ng
-
model
=
"nume"
><
br
>
Prenume

:
<
input type
=
"text"ng
-
model
=
"prenume"
/><
br>
<br>

Numelecomplet

:
{{
nume
+
" "
+prenume
}}
</div>

<script>

varapp

=angular
.
module
(
'myApp'
,
[]);
app
.
controller
(
'myCtrl'
,
function
(
$scope
){
$scope
.
nume
=
"Mihai";

15

);
}
</script>

</body>

</html>

$scope
.
prenume
=
"Cornel"

Definireamoduluiseobineprincodul:

varapp
=angular
.
module
(
'myApp'
,
[]);

Definireacontroleruluiseobineprincodul:

app
.
controller
(
'myCtrl'
,
function
(
$scope
){
$scope
.
nume
=
"Mihai";
$scope
.
prenume
=
"Cornel"
});

Expresii n AngularJS
Expresiilesuntscriseintreparantezeduble
{{expresie}}
acesteaafieazdaten
HTMLasemntorcudirectiva
ngbind
isuntafiatenloculundeaufostdeclarate.
Acesteapotconinelitere,operatoriivariabile.

Numere n AngularJS

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

ng-app
=
""
ng-init
=
"cantitate = 8; pret=5">
<p>Pretul Total: {{cantitate*pret}}

</p>
</div>

</body>

</html>

Acelaicodutilizndngbind:

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

ng-app
=
""
ng-init
=
"cantitate = 8; pret=5">
<p>Pretul Total:

<span
ng-bind
=
"cantitate*pret"
></span></p>
</div>

</body>

</html>

Text n AngularJS

16

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

ng-app
=
""
ng-init
=
"nume = 'Mihai'; prenume='Cornel'">
<p>Nume si prenume: {{nume + " "+prenume}}

</p>
</div>

</body>

</html>

Utilizarengbind:

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

ng-app
=
""
ng-init
=
"nume = 'Mihai'; prenume='Cornel'">
<p>Nume si prenume:

<span
ng-bind
=
"nume + ' '+prenume"
></span></p>
</div>

</body>

</html>

Obiecte n AngularJS

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

ng-app
=
""
ng-init
=
"persoana={nume:'Mihai', prenume:'Cornel'}">
<p>Prenumele persoanei este: {{persoana.prenume}}

</p>
</div>

</body>

</html>

Manipulareobiecteutilizndngbind:

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

ng-app
=
""
ng-init
=
"persoana={nume:'Mihai', prenume:'Cornel'}">
<p>Prenumele persoanei este:

<span
ng-bind
=
"persoana.prenume"
><span></p>
</div>

</body>

</html>

Manipulare arrays n AngularJS

<!DOCTYPE html>

17

<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

ng-app
=
""
ng-init
=
"scor=[22,33,44,55,66]">
<p>Scorul este: {{scor[3]}}

</p>
</div>

</body>

</html>

Arrayscungbind:

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

ng-app
=
""
ng-init
=
"scor=[22,33,44,55,66]">
<p>Scorul este:

<span
ng-bind
=
"scor[2]"
><span></p>
</div>

</body>

</html>

Concluzii:

DiferenteIntreJavaScriptiAngularJS:
CainJS,expresiiledinAngularJSpotconinetext,operatoriivariabile
ExpresiileAngularJSpotfiscriseninteriorulcoduluiHTML,InJSnusepoate
ExpresiileAngularJSnupotconine:conditii,loopsiexcepii
ExpresiileAngularJSsuportfiltre.

Directive AngularJS

DirectiveleAngularJSsuntatributeHTMLprefixatecu
ng
:
ngapp
iniializeazaplicaiaAngularJS
nginit
iniializeazdateledinaplicaie
ngmodel
leagvaloriledinHTMLdedateledinaplicaie.

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

ng-app
=
""
ng-init
=
"prenume='Cornel'">
<p>

Introduce-ti un nume in caseta input:


</p>
<p>

Prenume:
<input
type
=
"text"
ng-model
=
"prenume"
/></p>
<p>A-ti introdus: {{prenume}}

</p>
</div>

</body>

</html>

18

Legarea datelor n AngularJS


Expresia{{prenume}}dincoduldemaisus,esteuncaztipicdelegareadatelor,
aceastasincronizeazexpresiilecudateleAngularJS,{{prenume}}estesincronizatcu
ngmodel=prenume.

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

data-ng-app
=
""
data-ng-init
=
"cantitate=3; pret = 9">
<h2>

Calculator
</h2>
<p>

Cantitate:
<input
type
=
"number"
ng-model
=
"cantitate"
/></p>
<p>

Pret:
<input
type
=
"number"
ng-model
=
"pret"
/></p>
<p>Pretul este in LEI: {{cantitate*pret}}

</p>
</div>

</body>

</html>

Repetarea elementelor HTML

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

data-ng-app
=
""
data-ng-init
=
"lista=['vali', 'andrei', 'doru']">
<h2>

Repetarea codului HTML


</h2>
<ul>

<li

data-ng-repeat
=
"x in lista">
{{

x
}}
</li>

</ul>

</div>

</body>

</html>

Utilizarea
ngrepeat
asupreunuiarraydeobiecte:

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div data-ng-app="" data-ng-init="lista=[


{

nume
:
'vali'
,
tara
:
'Romania'
},
{

nume
:
'andrei'
,tara
:
'Anglia'
},
{

nume
:
'doru'
,tara
:
'Spania'
}]
">
<h2>

Repetarea codului HTML


</h2>
<ul>

<li

data-ng-repeat
=
"x in lista">
{{

x
.
nume
+
', '
+
x
.
tara
}}
</li>

</ul>

</div>

</body>

19

</html>

AngularJSpoatefifolositcusuccespentruaplicaiiceinteracioneazcubazelededate
CRUD(CreateReadUpdateDelete).
Directiva
ngapp
defineteelementuldebazaluneiaplicaiiAngularJS,carevafiiniializat
laincarcareapaginiiipoateconectamoduledecod.
Directiva
nginit
definetevariabileleiniialealeuneiaplicaiiAngularJS.
Directiva
ngmodel
leagvaloriledinHTML(input,select,textarea)ladateleaplicaiei,de
asemeneapoatevalidadateleaplicaiei(number,email,required),poateafiastatuspentru
aplicaie(invalid,dirty,touched,error)poatelivracodCSSpentruelementeleHTML,poate
lipiielementenformeleHTML.
Directiva
ngrepeat
cloneazelementeledinHTML.

Controller-i n AngularJS
DeregulacontrolleriinAngularJSsuntobiecteJavaScriptcareaucascopcontrolul
datelordinaplicaie.

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

ng-app
=
"myApp"
ng-controller
=
"myCtrl">
<p>

Introduce-ti un nume in caseta input:


</p>
<p>

Nume:
<input
type
=
"text"
ng-model
=
"nume"
/></p><br>
<p>

Prenume:
<input
type
=
"text"
ng-model
=
"prenume"
/></p><br>
<br>

<p>A-ti introdus numele: {{nume+ " "+prenume}}

</p>
</div>

<script>

varapp

=angular
.
module
(
'myApp'
,
[]);
app
.
controller
(
'myCtrl'
,
function
(
$scope
){
$scope
.
nume
=
"Mihai";
$scope
.
prenume
=
"Cornel";
});

</script>

</body>

</html>

AplicaiaAngularJSestedefinitde
ngapp=myApp
careruleazninteriorulelementului
<div>
.Atributul
ngcontroller=myCtrl
esteodirectivcaredefineteuncontroler.Funcia
myCtrl
esteofuncieJavaScript.AngularJSinvoccontrolerulcuobiectul
$scope.
Controlerulcreazdouvariabile
nume
i
prenume
,iar
ngmodel
leagcmpuriledeinput
cuproprietilecontrolerului.

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

ng-app
=
"myApp"
ng-controller
=
"myCtrl">
<p>

Introduce-ti un nume in caseta input:


</p>

20

p>
<
Nume:
<input
type
=
"text"
ng-model
=
"nume"
/></p><br>
<p>

Prenume:
<input
type
=
"text"
ng-model
=
"prenume"
/></p><br>
<br>

<p>A-ti introdus numele: {{totNumele()}}

</p>
</div>

<script>

varapp

=angular
.
module
(
'myApp'
,
[]);
app
.
controller
(
'myCtrl'
,
function
(
$scope
){
$scope
.
nume
=
"Mihai";
$scope
.
prenume
=
"Cornel";
$scope
.
totNumele
=
function
(){
return$scope

.
nume
+
" "
+
$scope
.
prenume;
}
});

</script>

</body>

</html>

Dupcumvedeinexempluldemaisuscontrollerulpoateaveaimetode(functiecao
variabil).

Controller-i n file externe


persoanaController.js

varapp
=angular
.
module
(
'myApp'
,
[]);
app
.
controller
(
'myCtrl'
,
function
(
$scope
){
$scope
.
nume
=
"Mihai";
$scope
.
prenume
=
"Cornel";
$scope
.
totNumele
=
function
(){
return$scope

.
nume
+
" "
+
$scope
.
prenume;
}
});

angular20.html

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

ng-app
=
"myApp"
ng-controller
=
"myCtrl">
<p>

Introduce-ti un nume in caseta input:


</p>
<p>

Nume:
<input
type
=
"text"
ng-model
=
"nume"
/></p><br>
<p>

Prenume:
<input
type
=
"text"
ng-model
=
"prenume"
/></p><br>
<br>

<p>A-ti introdus numele: {{totNumele()}}

</p>
</div>

<script

src
=
"persoanaController.js"
></script>
</body>

</html>

Filtre n AngularJS
FiltrelesuntadaugatenAngularJScuajutorulcaracteruluipipe(|).Acesteasunt
folositepentrutransformareadatelor.Filtrelesunt:

21

Filtru

Descriere

currency

formateazunnumr

filter

selecteazunitemsaumaimulidintrun
array

lowercase

formateaztextulnliteremici

orderBy

ordoneazunarraydupoexpresie

uppercase

formateaztextuldupliteremari.

Adugarea filtrelor n expresii

uppercase

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

ng-app
=
"myApp"
ng-controller
=
"myCtrl">
<p>

Introduce-ti un nume in caseta input:


</p>
<p>

Nume:
<input
type
=
"text"
ng-model
=
"nume"
/></p><br>
<p>

Prenume:
<input
type
=
"text"
ng-model
=
"prenume"
/></p><br>
<br>

<p>A-ti introdus numele: {{totNumele()}}

</p>
<p>

Numele este {{ nume | uppercase}}


</p>
</div>

<script>

varapp

=angular
.
module
(
'myApp'
,
[]);
app
.
controller
(
'myCtrl'
,
function
(
$scope
){
$scope
.
nume
=
"Mihai";
$scope
.
prenume
=
"Cornel";
$scope
.
totNumele
=
function
(){
return$scope

.
nume
+
" "
+
$scope
.
prenume;
}
});

</script>

</body>

</html>

lowercase

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

ng-app
=
"myApp"
ng-controller
=
"myCtrl">
<p>

Introduce-ti un nume in caseta input:


</p>
<p>

Nume:
<input
type
=
"text"
ng-model
=
"nume"
/></p><br>
<p>

Prenume:
<input
type
=
"text"
ng-model
=
"prenume"
/></p><br>
<br>

<p>A-ti introdus numele: {{totNumele()}}

</p>

22

p>
<
Numele este {{ nume | uppercase}}
</p>
<p>

Prenumele este {{prenume | lowercase}}


</p>
</div>

<script>

varapp

=angular
.
module
(
'myApp'
,
[]);
app
.
controller
(
'myCtrl'
,
function
(
$scope
){
$scope
.
nume
=
"Mihai";
$scope
.
prenume
=
"Cornel";
$scope
.
totNumele
=
function
(){
return$scope

.
nume
+
" "
+
$scope
.
prenume;
}
});

</script>

</body>

</html>

currency

<!DOCTYPE html>
<html>
<script
src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div

ng-app
=
"myApp"
ng-controller
=
"costCtrl">
uantity
Q
:
<
input type
=
"number"ng
-
model
=
"quantity">
Price

:
<
input type
=
"number"ng
-
model
=
"price">
<p>

Total = {{ (quantity * price) | currency }}


</p>
</div>

<script>

varapp

=angular
.
module
(
'myApp'
,
[]);
app
.
controller
(
'costCtrl'
,
function
(
$scope
){
$scope
.
quantity
=
1;
$scope
.
price
=
9.99;
});

</script>

</body>

</html>

orderBy

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

<div data-ng-app="" data-ng-init="lista=[


{

nume
:
'vali'
,
tara
:
'Romania'
},
{

nume
:
'andrei'
,tara
:
'Anglia'
},
{

nume
:
'doru'
,tara
:
'Spania'
}]
">
<h2>

Repetarea codului HTML


</h2>
<ul>

<li

data-ng-repeat
=
"x in lista | orderBy:'tara'">
{{

x
.
nume
+
', '
+
x
.
tara
}}
</li>

</ul>

23

</div>

/body>
<
</html>

filter
fila.html
<!DOCTYPE html>
<html>
<script
src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>
<div
ng-app
=
"myApp"
ng-controller
=
"namesCtrl">
<p>
Filtering input:
</p>
<p><input
type
=
"text"
ng-model
=
"test"
></p>
<ul>
<li

ng-repeat
=
"x in names | filter:test | orderBy:'country'">
{{
(
x
.
name
|uppercase
)
+
', '
+x
.
country
}}
</li>

</ul>
</div>
<script
src
=
"namesController.js"
></script>
</body>
</html>

filacontroller.js
angular
.
module
(
'myApp'
,
[]).
controller
(
'namesCtrl'
,
function
(
$scope
){
$scope
.
names
=[
{
name
:
'Jani'
,
country
:
'Norway'
},
{
name
:
'Hege'
,
country
:
'Sweden'
},
{
name
:
'Kai'
,
country
:
'Denmark'}
];
});

Citirea datelor de pe server $http


Datelesuntpeserverdeexemplu:

http://www.w3schools.com/angular/customers.php

{
"records"
:[
{
"Name"
:
"Alfreds Futterkiste",
"City"
:
"Berlin",
"Country"

:
"Germany"
},

{
"Name"
:
"Berglunds snabbkp",

24

,
}
{

"City"
:
"Lule",
"Country"
:
"Sweden"
"Name"
:
"Centro comercial Moctezuma",
"City"
:
"Mxico D.F.",
"Country"
:
"Mexico"

,
}
{
"Name"

:
"Ernst Handel",
"City"
:
"Graz",
"Country"
:
"Austria"
},

{
"Name"
:
"FISSA Fabrica Inter. Salchichas S.A.",
"City"
:
"Madrid",
"Country"

:
"Spain"
},

{
"Name"
:
"Galera del gastrnomo",
"City"

:
"Barcelona",
"Country"
:
"Spain"
},

{
"Name"
:
"Island Trading",
"City"
:
"Cowes",
"Country"
:
"UK"
},

{
"Name"
:
"Kniglich Essen",
"City"
:
"Brandenburg",
"Country"
:
"Germany"
},

{
"Name"

:
"Laughing Bacchus Wine Cellars",
"City"
:
"Vancouver",
"Country"

:
"Canada"
},

{
"Name"
:
"Magazzini Alimentari Riuniti",
"City"

:
"Bergamo",
"Country"
:
"Italy"
},

{
"Name"
:
"North/South",
"City"
:
"London",
"Country"
:
"UK"
},

{
"Name"

:
"Paris spcialits",
"City"
:
"Paris",
"Country"
:
"France"
},

{
"Name"
:
"Rattlesnake Canyon Grocery",
"City"
:
"Albuquerque",
"Country"

:
"USA"
},

{
"Name"
:
"Simons bistro",
"City"
:
"Kbenhavn",
"Country"

:
"Denmark"
},

{
"Name"
:
"The Big Cheese",

25

,
}
{

"City"
:
"Portland",
"Country"
:
"USA"

"Name"
:
"Vaffeljernet",
"City"

:
"rhus",
"Country"
:
"Denmark"
},

{
"Name"
:
"Wolski Zajazd",
"City"
:
"Warszawa",
"Country"
:
"Poland"
}
]
}

CodulhtmliAngularJSpentrupreluareadatelor:

<!DOCTYPE html>
<html>
<script
src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>
<div
ng-app
=
"myApp"
ng-controller
=
"customersCtrl"
>
<ul>
<li

ng-repeat
=
"x in names"
>
{{ x.Name + ', ' + x.Country }}
</li>

</ul>
</div>
<script>
varapp
=angular
.
module
(
'myApp'
,
[]);
app
.
controller
(
'customersCtrl'
,
function
(
$scope
,$http
)
{
$http
.
get
(
"http://www.w3schools.com/angular/customers.php"
)
.

success
(
function
(
response
)
{
$scope
.
names
=response
.
records
;});
});
</script>
</body>
</html>

Tabele n AngularJS

<!DOCTYPE html>
<html>
<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

<body>

<div

ng-app
=
"myApp"
ng-controller
=
"clienti">
<table>

<tr

ng-repeat
=
"x in names">
<td>

{{x.Name}}
</td>
<td>

{{x.Country}}
</td>
</tr>

</table>

26

/div>
<
<script>

varapp

=angular
.
module
(
'myApp'
,
[]);
app
.
controller
(
'clienti'
,
function
(
$scope
,$http
){
$http
.
get
(
"http://www.w3schools.com/angular/customers.php")
.

success
(
function
(
response
)
{
$scope
.
names
=response
.
records
;});
})

;
</script>

</body>

</html>

Adugare style CSS

<!DOCTYPE html>
<html>
<style>

table
,th
,td {
border
:
1pxsolid grey;
border
-
collapse
:collapse;
padding
:
5px
;
}

table tr
:
nth
-
child
(
even
){
background
-
color
:
#ffffff;
}
table tr
:
nth
-
child
(
odd
){
background
-
color
:
#f1f1f1;
}
</style>

<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

<body>

<div

ng-app
=
"myApp"
ng-controller
=
"clienti">
<table>

<tr

ng-repeat
=
"x in names">
<td>

{{x.Name}}
</td>
<td>

{{x.Country}}
</td>
</tr>

</table>

</div>

<script>

varapp

=angular
.
module
(
'myApp'
,
[]);
app
.
controller
(
'clienti'
,
function
(
$scope
,$http
){
$http
.
get
(
"http://www.w3schools.com/angular/customers.php")
.

success
(
function
(
response
)
{
$scope
.
names
=response
.
records
;});
})

;
</script>

</body>

</html>

Adugarea filtrului orderBy

<!DOCTYPE html>
<html>
<style>

table
,th
,td {
border
:
1pxsolid grey;
border
-
collapse
:collapse;
padding
:
5px
;

27

}
table tr
:
nth
-
child
(
even
){
background
-
color
:
#ffffff;
}
table tr
:
nth
-
child
(
odd
){
background
-
color
:
#f1f1f1;
}
</style>

<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

<body>

<div

ng-app
=
"myApp"
ng-controller
=
"clienti">
<table>

<tr

ng-repeat
=
"x in names | orderBy : 'Country'">
<td>

{{x.Name}}
</td>
<td>

{{x.Country}}
</td>
</tr>

</table>

</div>

<script>

varapp

=angular
.
module
(
'myApp'
,
[]);
app
.
controller
(
'clienti'
,
function
(
$scope
,$http
){
$http
.
get
(
"http://www.w3schools.com/angular/customers.php")
.

success
(
function
(
response
)
{
$scope
.
names
=response
.
records
;});
})

;
</script>

</body>

</html>

Adugarea filtrului uppercase

<!DOCTYPE html>
<html>
<style>

table
,th
,td {
border
:
1pxsolid grey;
border
-
collapse
:collapse;
padding
:
5px
;
}

table tr
:
nth
-
child
(
even
){
background
-
color
:
#ffffff;
}
table tr
:
nth
-
child
(
odd
){
background
-
color
:
#f1f1f1;
}
</style>

<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

<body>

<div

ng-app
=
"myApp"
ng-controller
=
"clienti">
<table>

<tr

ng-repeat
=
"x in names | orderBy : 'Country'">
<td>

{{x.Name}}
</td>
<td>{{x.Country | uppercase}}</td>

</tr>

</table>

</div>

<script>

varapp

=angular
.
module
(
'myApp'
,
[]);
app
.
controller
(
'clienti'
,
function
(
$scope
,$http
){
$http
.
get
(
"http://www.w3schools.com/angular/customers.php")
.

success
(
function
(
response
)
{
$scope
.
names
=response
.
records
;});

28

})

/script>
<
</body>

</html>

Adugarea unui index n tabel

<!DOCTYPE html>
<html>
<style>

table
,th
,td {
border
:
1pxsolid grey;
border
-
collapse
:collapse;
padding
:
5px
;
}

table tr
:
nth
-
child
(
even
){
background
-
color
:
#ffffff;
}
table tr
:
nth
-
child
(
odd
){
background
-
color
:
#f1f1f1;
}
</style>

<script

src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>

<body>

<div

ng-app
=
"myApp"
ng-controller
=
"clienti">
<table>

<tr

ng-repeat
=
"x in names | orderBy : 'Country'">
<td>{{$index + 1}}</td>

<td>

{{x.Name}}
</td>
<td>

{{x.Country | uppercase}}
</td>
</tr>

</table>

</div>

<script>

varapp

=angular
.
module
(
'myApp'
,
[]);
app
.
controller
(
'clienti'
,
function
(
$scope
,$http
){
$http
.
get
(
"http://www.w3schools.com/angular/customers.php")
.

success
(
function
(
response
)
{
$scope
.
names
=response
.
records
;});
})

;
</script>

</body>

</html>

SQL i AngularJS
Obinereadatelordepeservere.

PHP i MySQL

<!DOCTYPE html>
<html>
<style>
table
,th
,td {
border
:
1pxsolid grey;
border
-
collapse
:collapse;
padding
:
5px;
}

29

table tr
:
nth
-
child
(
odd
){
background
-
color
:
#f1f1f1;
}
table tr
:
nth
-
child
(
even
){
background
-
color
:
#ffffff;
}
</style>
<script
src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>
<div
ng-app
=
"myApp"
ng-controller
=
"customersCtrl">
<table>
<tr

ng-repeat
=
"x in names">
<td>
{{ x.Name }}
</td>
<td>
{{ x.Country }}
</td>
</tr>

</table>
</div>
<script>
varapp
=angular
.
module
(
'myApp'
,
[]);
app
.
controller
(
'customersCtrl'
,
function
(
$scope
,$http
){
$http
.
get
(
"http://www.w3schools.com/angular/customers_mysql.php")
.

success
(
function
(
response
)
{
$scope
.
names
=response
.
records
;});
});
</script>
</body>
</html>

ASP.NET cu SQL

<!DOCTYPE html>
<html>
<style>
table
,th
,td {
border
:
1pxsolid grey;
border
-
collapse
:collapse;
padding
:
5px;
}
table tr
:
nth
-
child
(
odd
) {
background
-
color
:
#f1f1f1;
}
table tr
:
nth
-
child
(
even
){
background
-
color
:
#ffffff;
}
</style>
<script
src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>
<div
ng-app
=
"myApp"
ng-controller
=
"customersCtrl">
<table>
<tr

ng-repeat
=
"x in names">
<td>
{{ x.Name }}
</td>
<td>
{{ x.Country }}
</td>
</tr>

</table>

30

</div>
<script>
varapp
=angular
.
module
(
'myApp'
,
[]);
app
.
controller
(
'customersCtrl'
,
function
(
$scope
,$http
){
$http
.
get
(
"http://www.w3schools.com/angular/customers_sql.aspx")
.

success
(
function
(
response
)
{
$scope
.
names
=response
.
records
;});
});
</script>
</body>
</html>

1. CodulpeserverPHPcuMySQL:
<?
php
header
(
"Access-Control-Allow-Origin: *"
);
header
(
"Content-Type: application/json; charset=UTF-8"
);
$conn
=
newmysqli
(
"myServer"
,
"myUser"
,
"myPassword"
,
"Northwind"
);
$result
=$conn
->
query
(
"SELECT CompanyName, City, Country FROM Customers"
);
$outp
=
"";
while
(
$rs
=$result
->
fetch_array
(
MYSQLI_ASSOC
)){
if

(
$outp
!=
""
)
{
$outp
.=
","
;}
$outp
.=
'{"Name":"'
.$rs
[
"CompanyName"
]
.
'",';
$outp
.=
'"City":"'
.$rs
[
"City"
]
.
'",';
$outp
.=
'"Country":"'
.$rs
[
"Country"
]
.
'"}';
}
$outp
=
'{"records":['
.
$outp
.
']}';
$conn
->
close
();
echo
(
$outp
);
?>

2. PHPiMSAccess:
<?
php
header
(
"Access-Control-Allow-Origin: *"
);
header
(
"Content-Type: application/json; charset=ISO-8859-1"
);
$conn
=
newCOM
(
"ADODB.Connection"
);
$conn
->
open
(
"PROVIDER=Microsoft.Jet.OLEDB.4.0;Data Source=Northwind.mdb"
);
$rs
=$conn
->
execute
(
"SELECT CompanyName, City, Country FROM Customers"
);
$outp
=
"";
while
(!
$rs
->
EOF
){
if

(
$outp
!=
""
)
{
$outp
.=
","
;}
$outp
.=
'{"Name":"'
.$rs
[
"CompanyName"
]
.
'",';
$outp
.=
'"City":"'
.$rs
[
"City"
]
.
'",';
$outp
.=
'"Country":"'
.$rs
[
"Country"
]
.
'"}';
$rs
->
MoveNext
();
}
$outp
=
'{"records":['
.
$outp
.
']}';
$conn
->
close
();
echo
(
$outp
);
?>

31

3. ASP.NET,VBiMSAccess:
<%@
Import
Namespace
=
"System.IO"
%>
<%@
Import
Namespace
=
"System.Data"
%>
<%@
Import
Namespace
=
"System.Data.OleDb"
%>
<%
Response
.
AppendHeader
(
"Access-Control-Allow-Origin"
,
"*")
Response
.
AppendHeader
(
"Content-type"
,
"application/json")
Dimconn
As
OleDbConnection
DimobjAdapter
As
OleDbDataAdapter
DimobjTable
As
DataTable
DimobjRow
As
DataRow
DimobjDataSet
As
New
DataSet
()
Dimoutp
Dimc
conn
=
New
OledbConnection
(
"Provider=Microsoft.Jet.OLEDB.4.0;data
source=Northwind.mdb")
objAdapter
=
New
OledbDataAdapter
(
"SELECT CompanyName, City, Country FROM
Customers"
,conn)
objAdapter
.
Fill
(
objDataSet
,
"myTable")
objTable
=
objDataSet
.
Tables
(
"myTable")
outp
=
""
c
=chr
(
34)
foreach x
inobjTable
.
Rows
ifoutp
<>
""
thenoutp
=outp
&
","
outp
=outp
&
"{"
&c
&
"Name"
&c
&
":"
&c
&x
(
"CompanyName"
)
&c
&
","
outp
=outp
&
c
&
"City"
&c
&
":"
&c
&x
(
"City"
)
&c
&
","
outp
=outp
&
c
&
"Country"
&c
&
":"
&c
&x
(
"Country"
) &c
&
"}"
next
outp
=
"{"
&c
&
"records"
&c
&
":["
&outp
&
"]}"
response
.
write
(
outp)
conn
.
close
%>

4. ASP.net,VBRazoriSQLLite:
@{
Response
.
AppendHeader
(
"Access-Control-Allow-Origin"
,
"*")
Response
.
AppendHeader
(
"Content-type"
,
"application/json")
vardb
=
Database
.
Open
(
"Northwind"
);
varquery
=db
.
Query
(
"SELECT CompanyName, City, Country FROM Customers"
);
varoutp
=
""
varc
=chr
(
34)
}
@foreach
(
varrow
inquery)
{
ifoutp
<>
""
thenoutp
=outp
+
","
outp
=outp
+
"{"
+c
+
"Name"
+c
+
":"
+c
+
@row
.
CompanyName
+c
+
","
outp
=outp
+
c
+
"City"
+c
+
":"
+c
+
@row
.
City
+c
+
","
outp
=outp
+
c
+
"Country"
+c
+
":"
+c
+
@row
.
Country +c
+
"}"
}
outp
=
"{"
+c
+
"records"
+c
+
":["
+outp
+
"]}"
@outp

32

HTML DOM n AngularJS


Directiva ng-disabled

<!DOCTYPE html>
<html>
<script
src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>
<div
ng-app
=
""
ng-init
=
"mySwitch=true">
<p>
<button
ng-disabled
=
"mySwitch"
>
Apasa!
</button>
</p>
<p>
<input
type
=
"checkbox"
ng-model
=
"mySwitch"
/>
Button
</p>
<p>
{{mySwitch
}}
</p>
</div>
</body>
</html>

DirectivangdisabledleagbutonulApasa!decheckboxulButton,laincarcarea
paginiibutonulApasa!vafiinactiv.

Directiva ng-show
ngshowafiseazcomponentaHTMLcndaceastaestesetattrue.
<!DOCTYPE html>
<html>
<script
src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>
<div
ng-app
=
"">
<p
ng-show
=
"true"
>
Sunt vizibil.
</p>
<p
ng-show
=
"false"
>
Nu sunt vizibil.
</p>
</div>
</body>
</html>

Directiva ng-hide

<!DOCTYPE html>
<html>
<script
src
=
"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<body>

33

<div
ng-app
=
"">
<p
ng-hide
=
"true"
>
I am not visible.
</p>
<p
ng-hide
=
"false"
>
I am visible.
</p>
</div>
</body>
</html>

Evenimente n AngularJS

34