Java Script

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
=
></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
=
></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
></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
=
></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
=
></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
=
></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
=
></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
=
></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
=
></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
=
></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
=
></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
=
></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
=
></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
=
></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
=
></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
=
></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
=
></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
=
></script>
<body>
<div data-ng-app="" data-ng-init="lista=[

{
nume
:
'vali'
,
tara
:
'Romania'
},
{
nume
:
'andrei'
,tara
:
'Anglia'
},
{
nume
:
'doru'
,tara
:
'Spania'
}]
">
<h2>

</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
=
></script>
<body>
<div
ng-app
=
"myApp"
ng-controller
=
"myCtrl">
<p>

</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
=
></script>
<body>
<div
ng-app
=
"myApp"
ng-controller
=
"myCtrl">
<p>

</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
=
></script>
<body>
<div
ng-app
=
"myApp"
ng-controller
=
"myCtrl">
<p>

</p>
<p>
Nume:
<input
type
=
"text"
ng-model
=
"nume"
/></p><br>
<p>
Prenume:
<input
type
=
"text"
ng-model
=
"prenume"
/></p><br>
<br>
</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
=
></script>
<body>
<div
ng-app
=
"myApp"
ng-controller
=
"myCtrl">
<p>

</p>
<p>
Nume:
<input
type
=
"text"
ng-model
=
"nume"
/></p><br>
<p>
Prenume:
<input
type
=
"text"
ng-model
=
"prenume"
/></p><br>
<br>
</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
=
></script>
<body>
<div
ng-app
=
"myApp"
ng-controller
=
"myCtrl">
<p>

</p>
<p>
Nume:
<input
type
=
"text"
ng-model
=
"nume"
/></p><br>
<p>
Prenume:
<input
type
=
"text"
ng-model
=
"prenume"
/></p><br>
<br>
</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
=
></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
=
></script>
<body>
<div data-ng-app="" data-ng-init="lista=[

{
nume
:
'vali'
,
tara
:
'Romania'
},
{
nume
:
'andrei'
,tara
:
'Anglia'
},
{
nume
:
'doru'
,tara
:
'Spania'
}]
">
<h2>

</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
=
></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
=
></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
=
</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
(
.
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
=
</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
(
.
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
=
</script>
<body>
<div
ng-app
=
"myApp"
ng-controller
=
"clienti">
<table>
<tr
ng-repeat
=
<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
(
.
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
=
</script>
<body>
<div
ng-app
=
"myApp"
ng-controller
=
"clienti">
<table>
<tr
ng-repeat
=
<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
(
.
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
=
></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
=
></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
(
);
$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
(
);
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
=
></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
=
></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
=
></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

Java Script

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Java Script

Încărcat de

Drepturi de autor:

Formate disponibile

1

Primul program n JavaScript

i aici pentru data

JavaScript poate schimba coninutul elementelor html

Schimbarea continutului elementelor html

JS poate schimba atributele html

JS poate schimba imaginile

Apasati pe imagine pentru a o schimba

JS poate schimba stilul CSS

JS poate schimba stilul CSS

JS poate valida datele

JS poate valida datele

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

Unde pot fi plasate scripturile JS?

Pagina mea web

>Mihai Cornel's web page

Posibilitile de afiare ale JS

Aceasta pagina conine o fereastra de alerta!

Pe care o ve-ti vedea la rulare.

Aceasta pagina utilizeaza document.write()

Aceasta pagina va fi stearsa la apasarea butonului

Acesta a fost cel mai utilizat.

Afisarea in consola browserului cu console.log()

Activarea consolei se face cu tasta F12

In acest exemplu, x,y, z sunt variabile

//acesta este un comentariu pe o linie

Tipuri de date n JavaScript

Crearea unei variabile, atribuirea unei valori si afisarea acesteia.

Aceasta pagina a fost scrisa de:

Operatori de comparaie i logici

Introduce-ti text in caseta:

Numele meu este:

Numele meu este:

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

Introduce-ti text in caseta de input:

Incercati sa schimbati numele.

Manipulare arrays n AngularJS

Introduce-ti un nume in caseta input:

Legarea datelor n AngularJS

Repetarea elementelor HTML

Repetarea codului HTML

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

Repetarea codului HTML

Introduce-ti un nume in caseta input:

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

Introduce-ti un nume in caseta input:

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

Controller-i n file externe

Introduce-ti un nume in caseta input:

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

Adugarea filtrelor n expresii

Introduce-ti un nume in caseta input:

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

Numele este {{ nume | uppercase}}

Introduce-ti un nume in caseta input:

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

Prenumele este {{prenume | lowercase}}

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

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

Repetarea codului HTML

Citirea datelor de pe server $http

Adugare style CSS

Adugarea filtrului orderBy