1

2

JavaScript

Versiune:iunie/2015

Cuprins

CuprinsIntroducerePrimulprogramnJavaScriptJavaScriptpoateschimbaconinutulelementelorhtmlJSpoateschimbaatributelehtmlJSpoateschimbastilulCSSJSpoatevalidadateleUndepotfiplasatescripturileJS?

JSinJSnJSnfiiereexterne

PosibilitiledeafiarealeJSUtilizareawindow.alert()Utilizareadocument.write()UtilizareainnerHTMLUtilizareaconsole.log()

3

ComentareacoduluinJSVariabilenJS

OperatoruldeatribuireTipuridedatenJavaScriptOperatorinJSOperatorideatribuirenJSOperatoridecomparaieilogiciPrecedentaoperatorilor

TipuridedatenJSBiblioteciJavaScript

IntroducerenAngularJSExpresiinAngularJS

NumerenAngularJSTextnAngularJSObiectenAngularJSManipularearraysnAngularJSConcluzii:

DirectiveAngularJSLegareadatelornAngularJSRepetareaelementelorHTML

ControllerinAngularJSControllerinfileexterne

FiltrenAngularJSAdugareafiltrelornexpresii

Citireadatelordepeserver$httpTabelenAngularJS

AdugarestyleCSSAdugareafiltruluiorderByAdugareafiltruluiuppercaseAdugareaunuiindexntabel

SQLiAngularJSPHPiMySQLASP.NETcuSQL

Introducere

JavaScriptafostdezvoltatprimadatadecatrefirmaNetscape,cunumeledeLiveScript,unlimbajdescriptcareextindeacapacitatileHTML,oferaoalternativapartialalautilizareaunuinumarmaredescripturiCGIpentruprelucrareainformatiilordinformularesicareadaugadinamisminpaginileweb.

DupalansarealimbajuluiJava,NetscapeainceputsalucrezecufirmaSun,cu

scopuldeacreaunlimbajdescriptcuosintaxasisemanticaasemanatoarecualimbajuluiJava,sidinmotivedemarketingnumelenouluilimbajdescriptafostschimbatin"JavaScript".

4

JavaScriptaaparutdinnevoiacalogicasiinteligentasafiesipeparteadeclient,

nudoarpeparteadeserver.Dacatoatalogicaestepeparteadeserver,intreagaprelucrareestefacutalaserver,chiarsipentrulucrurisimple,asacumestevalidareadatelor.Astfel,JavaScriptilinzestreazapeclientsifacecarelatiasafieunadevaratsistemclientserver.

LimbajulHTMLoferaautorilordepaginiWeboanumitaflexibilitate,darstatica.

DocumenteleHTMLnupotinteractionacuutilizatorulnaltmodmaidinamic,dectpuneladispozitiaacestuialegaturilaalteresurse(URLuri).CreareadeCGIuri(CommonGraphicsInterface)[programecareruleazapeserverulWebsicareacceptainformatiiprimitedinpaginadewebsireturneazacodHTML]aduslaimbogatireaposibilitatilordelucru.Astfel,unpasimportantspreinteractivizareafostrealizatdeJavaScript,carepermiteinserareanpaginilewebascripturilorcareseexecutancadrulpaginiiweb,maiexactncadrulbrowseruluiutilizatorului,usurandastfelsitraficuldintreserversiclient.Deexemplu,ntropaginapentrucolectareadedatedelautilizatorsepotadaugascripturiJavaScriptpentruavalidacorectitudineaintroduceriisiapoipentruatrimiteserveruluidoardatecorectespreprocesare.

JavaScriptcontineolistadestuldeampladefunctiisicomenzimenitesaajutela

operatiimatematice,manipularidesiruri,sunete,imagini,obiectesiferestrealebrowserului,linkurileURLsiverificarideintroducerialedatelornformulare.Codulnecesaracestoractiunipoatefiinseratnpaginawebsiexecutatpecalculatorulvizitatorului.

Dupalansareasa,indecembrie1995,JavaScriptsiaatrassprijinulprincipalilor

distribuitoridindomeniu,cumsuntApple,Borland,Informix,Oracle,Sybase,HPsauIBM.Sadezvoltatincontinuare,obtinandrecunoasteremajoritatiibrowserelor.Intelegandimportantascriptinguluiweb,MicrosoftsiadoritsaoferesuportsipentruJavaScript.

NetscapeapreferatsaacordelicentadetehnologiecompanieiMicrosoftinlocsao

vanda,astfelMicrosoftaanalizatJavaScript,sibazandusepedocumentatiapublicaacreatpropriasaimplementare,"Jscript",careesterecunoscutadeMicrosoftInternetExplorer.

Jscript1.0esteaproximativcompatibilcuJavaScript1.1,careesterecunoscutde

NetscapeNavigator.Totusi,versiunileulterioaredeJavaScriptsidiverselediferentespecificeplatformelordeoperareauinceputsadeadestuleproblemeprogramatorilorwebsiastfelNetscape,MicrosoftsialtidistribuitoriaufostdeacordsapredealimbajuluneiorganizatiiinternationaledestandardizareECMAaceastaafinalizatospecificatiedelimbaj,cunoscutacaECMAScript,recunoscutadetotidistribuitorii.DesistandardulECMAesteutil,atatNetscapecatsiMicrosoftaupropriilelorimplementarialelimbajuluisicontinuasaextindalimbajuldincolodestandarduldebaza.

PelangaJscript,MicrosoftaintrodussiunconcurentpentruJavaScript,numit

VBScript,realizatpentruausurapatrundereapewebaprogramatorilorVB.VBScriptesteunsubsetallimbajuluiVisualBasic.CutoateacesteaJavaScriptadevenitcunoscutcalimbajuldescriptingstandardpentruweb.

5

Primul program n JavaScript Primul program JavaScript Apasai aici pentru data i timp.

JavaScript poate schimba coninutul elementelor html UnadinmetodelehtmlestegetElementById().nacestexemplumetotacaut

elementulhtml(cuid=demo)ilinlocuetecuSalut!,JavaScript. Schimbarea continutului elementelor html JavaScript poate schimba continutul html Apasati aici!

JS poate schimba atributele html JS poate schimba imaginile Apasati pe imagine pentru a o schimba function changeImage() { var image = document.getElementById('myImage'); if (image.src.mach("bulbon")) { image.src = "pic_bullboff.gif"; }else { image.src = "pic_bulbon.gif"; } }

6

JS poate schimba stilul CSS JS poate schimba stilul CSS JS poate schimba stilul unui element HTML function myFunction() { var x = document.getElementById("demo"); x.style.fontSize = "25px"; x.style.color = "red"; } Apasa aici!

JS poate valida datele JS poate valida datele Va rugam introduce-ti un numar intre 1 si 10: Trimite function myFunction() { var x, 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) ||x10) { text = "Inputul nu este valid"; } else { text = "Input OK" } document.getElementById("demo").innerHTML = text; }

Unde pot fi plasate scripturile JS? Scripturile JavaScript pot fi plasate ntre tagurile HTML sau . Iar

dup cum ati vzut n exemplele de mai sus codul JS trebuie inclus ntre tagurile . Exemplele de cod mai vechi sunt incluse intre tagurile

7

type=text/javascript> . O alt modalitate de plasare a codului JS este in fiiere externe.

JS in function myFunction() { document.getElementById("demo").innerHTML = "AM SCHIMBAT TEXTUL."; } Pagina mea web Acest paragraf va fi modificat. Incearca

JS n >Mihai Cornel's web page JavaScript in elementul "body". Apasa pentru a incerca! function myFunction() { document.getElementById("demo").innerHTML = "JS functioneaza!!!"; }

JS n fiiere externe Fiiereleexterneauctevaavantaje:

separcodulHTMLdecodulJavaScript facecodulHTMLiJavaScriptmaiuordentreinut cretevitezadencrcareapaginilorweb.

Fiierulhtml: JS in fisiere externe Paragraful va fi schimbat Apasa!!! Nota: oFunctie() este scrisa intr-o fila externa

8

Fisieruljavascript:

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

Posibilitile de afiare ale JS JSpoateafiadateleprinmaimulteci:

scriereaintrofereastrdealertare,window.alert() scriereanpaginaHTMLprindocument.write() scriereantrunelementalpaginiiHTMLprininnerHTML scriereanconsolabrowserului,utilizndconsole.log().

Utilizarea window.alert() Aceasta pagina conine o fereastra de alerta! Pe care o ve-ti vedea la rulare. window.alert(9 +7);

Utilizarea document.write()

Aceasta pagina utilizeaza document.write() Va fi afisat in pagina document.write(9 + 9);

Stergereapaginiiwebiafiarearezultatuluinpaginagoala:

Aceasta pagina va fi stearsa la apasarea butonului Si va fi afisat rezultatul: Onclick!

9

Utilizarea innerHTML Utilizarea innerHTML Acesta a fost cel mai utilizat. document.getElementById("demo").innerHTML = 123 +321;

Utilizarea console.log() ActivareaconsoleibrowseruluisefacecutastaF12.

Afisarea in consola browserului cu console.log() Activarea consolei se face cu tasta F12 console.log(123+456);

Comentarea codului n JS Pentrucomentareauneisingureliniidecadseutilizeazcaracterele//dupaceste

caractereliniadecodvafiignorat.Pentrucomentareamaimultorliniidecodsevautiliza/*sisevancheiacu*/.

Variabile n JS nJSvariabilelesuntcontainerecarestocheazvalori.

JavaScript si variabilele In acest exemplu, x,y, z sunt variabile //acesta este un comentariu pe o linie /* acesta este un comentariu pe mai multe linii */ var x =5 ; var y = 22;

10

var z = x +y; document.getElementById("demo").innerHTML = z;

nJSvariabilelesuntidentificateprinnumeunice.Acestenumedeidentificarea

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

Operatorul de atribuire nJSsemnul=esteunoperatordeatribuire,nusemnulegaldinmatematic.

Tipuri de date n JavaScript nJSvariabilelepotconinenumeredeexemplu22sitextdeexemplumihaicornel

saumihaicornelambelevariantetextsuntcunoscuteicudenumireadestring.Variabilelesuntcreatecuajutorulcuvntuluicheievar.var numeleDumneavoastra;

Daraceastdeclaraie,demaisus,nuareatribuitniciovaloare,casiatribuiiopovaloareutilizaisemnulegal(=).numeleDumneavoastra = "mihai cornel";

Acestedoudeclaraiipotfifcutentrosinguradeclaraie:var numeleDumneavoastra = "Mihai Cornel";

Pentruaafiaacestedateputemutilizaurmtorulcod: Variabile in JS Crearea unei variabile, atribuirea unei valori si afisarea acesteia. Aceasta pagina a fost scrisa de: var numeleDumneavoastra = "Mihai Cornel"; document.getElementById("demo").innerHTML = numeleDumneavoastra;

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

12

> maimare

= maimaresauegal

Precedenta operatorilor

Operator Descriere

() paranteze

++ incrementare,decrementare

*/% nmulire,mprire,modulo

+ plus,minus

Tipuri de date n JS VariabilelediJavaScriptpotluacavalorimaimultetipuridedateca:numere,strings,

arrays,objectssialtetipuri:var numar = 16; // Numar var nume = cornel"; // String var masini = ["Saab", "Volvo", "BMW"]; // Array var obiect = {firstName:"John", lastName:"Doe"}; // Object

nprogramareconceptuldedateestefoarteimportant,pentruaoperacuacestedateestenecesarscunoatemctevalucruricadeexempludeclaraia:var masina = 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

iareurmtoareaform:

AngularJSextindeHTMLcudirectivelengdirectives:

ngappdefineteoaplicatieAngularJS,inexempluldemaijosaceastdirectivindiccelementulesteproprietarulaplicaieiAngularJS

ngmodelleagvalorileHTMLdininput,select,textareadeaplicaie,nexempluldemaijosvaloareadinestelegatdevariabilaname

ngbindleagdateleaplicaieideHTML,nexempluldemaijosvaloareanameesteatribuit(legat)deelementulHTMLcareafieazvaloarea.

Introduce-ti text in caseta: Nume:

DirectiveleAngularJSsuntatributeHTMLprefixatecung,spreexempludirectiva

nginit,iniiazvariabileledinaplicaieileafieaznHTML. Numele meu este:

DacdoriisvalidaicodulHTMLputeiutilizaprefixuldata:

14

"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> Numele meu este:

ExpresiilenAngularJSsescriunparantezeduble{{expresie}}idatelevorfi

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

ExpresiileAngularJSafieazdatelenHTMLlafelcumofaceidirectivangbind:

Introduce-ti text in caseta de input: Numele: {{nume}}

IntroaplicaieAngularJSdirectivangappdefineteaplicaiaiardirectiva

ngcontrollerdefinetecontrolerulaplicaiei: Incercati sa schimbati numele. Nume: Prenume: Numele complet: {{nume +" "+ prenume}} var app = angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.nume = "Mihai";

15

$scope.prenume = "Cornel" });

Definireamoduluiseobineprincodul:var app = angular.module('myApp', []);

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

Expresii n AngularJS Expresiilesuntscriseintreparantezeduble{{expresie}}acesteaafieazdaten

HTMLasemntorcudirectivangbindisuntafiatenloculundeaufostdeclarate.Acesteapotconinelitere,operatoriivariabile.Numere n AngularJS Pretul Total: {{cantitate*pret}}

Acelaicodutilizndngbind: Pretul Total:

Text n AngularJS

16

Nume si prenume: {{nume + " "+prenume}}

Utilizarengbind: Nume si prenume:

Obiecte n AngularJS Prenumele persoanei este: {{persoana.prenume}}

Manipulareobiecteutilizndngbind: Prenumele persoanei este:

Manipulare arrays n AngularJS

17

Scorul este: {{scor[3]}}

Arrayscungbind: Scorul este:

Concluzii: DiferenteIntreJavaScriptiAngularJS:

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

Directive AngularJS DirectiveleAngularJSsuntatributeHTMLprefixatecung:

ngappiniializeazaplicaiaAngularJS nginitiniializeazdateledinaplicaie ngmodelleagvaloriledinHTMLdedateledinaplicaie.

Introduce-ti un nume in caseta input: Prenume: A-ti introdus: {{prenume}}

18

Legarea datelor n AngularJS Expresia{{prenume}}dincoduldemaisus,esteuncaztipicdelegareadatelor,

aceastasincronizeazexpresiilecudateleAngularJS,{{prenume}}estesincronizatcungmodel=prenume. Calculator Cantitate: Pret: Pretul este in LEI: {{cantitate*pret}}

Repetarea elementelor HTML Repetarea codului HTML {{x}}

Utilizareangrepeatasupreunuiarraydeobiecte: Repetarea codului HTML {{x.nume+', '+x.tara}}

19

AngularJSpoatefifolositcusuccespentruaplicaiiceinteracioneazcubazelededateCRUD(CreateReadUpdateDelete).DirectivangappdefineteelementuldebazaluneiaplicaiiAngularJS,carevafiiniializatlaincarcareapaginiiipoateconectamoduledecod.DirectivanginitdefinetevariabileleiniialealeuneiaplicaiiAngularJS.DirectivangmodelleagvaloriledinHTML(input,select,textarea)ladateleaplicaiei,deasemeneapoatevalidadateleaplicaiei(number,email,required),poateafiastatuspentruaplicaie(invalid,dirty,touched,error)poatelivracodCSSpentruelementeleHTML,poatelipiielementenformeleHTML.DirectivangrepeatcloneazelementeledinHTML.

Controller-i n AngularJS DeregulacontrolleriinAngularJSsuntobiecteJavaScriptcareaucascopcontrolul

datelordinaplicaie. Introduce-ti un nume in caseta input: Nume: Prenume: A-ti introdus numele: {{nume+ " "+prenume}} var app= angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.nume = "Mihai"; $scope.prenume="Cornel"; });

AplicaiaAngularJSestedefinitdengapp=myAppcareruleazninteriorulelementului.Atributulngcontroller=myCtrlesteodirectivcaredefineteuncontroler.FunciamyCtrlesteofuncieJavaScript.AngularJSinvoccontrolerulcuobiectul$scope.Controlerulcreazdouvariabilenumeiprenume,iarngmodelleagcmpuriledeinputcuproprietilecontrolerului. Introduce-ti un nume in caseta input:

20

Nume: Prenume: A-ti introdus numele: {{totNumele()}} var app= angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.nume = "Mihai"; $scope.prenume="Cornel"; $scope.totNumele = function () { return $scope.nume +" " +$scope.prenume; } });

Dupcumvedeinexempluldemaisuscontrollerulpoateaveaimetode(functiecaovariabil).

Controller-i n file externe persoanaController.jsvar app= angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.nume = "Mihai"; $scope.prenume="Cornel"; $scope.totNumele = function () { return $scope.nume +" " +$scope.prenume; } });

angular20.html Introduce-ti un nume in caseta input: Nume: Prenume: A-ti introdus numele: {{totNumele()}}

Filtre n AngularJS FiltrelesuntadaugatenAngularJScuajutorulcaracteruluipipe(|).Acesteasunt

folositepentrutransformareadatelor.Filtrelesunt:

21

Filtru Descriere

currency formateazunnumr

filter selecteazunitemsaumaimulidintrunarray

lowercase formateaztextulnliteremici

orderBy ordoneazunarraydupoexpresie

uppercase formateaztextuldupliteremari.

Adugarea filtrelor n expresii uppercase

Introduce-ti un nume in caseta input: Nume: Prenume: A-ti introdus numele: {{totNumele()}} Numele este {{ nume | uppercase}} var app= angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.nume = "Mihai"; $scope.prenume="Cornel"; $scope.totNumele = function () { return $scope.nume +" " +$scope.prenume; } });

lowercase

Introduce-ti un nume in caseta input: Nume: Prenume: A-ti introdus numele: {{totNumele()}}

22

Numele este {{ nume | uppercase}} Prenumele este {{prenume | lowercase}} var app= angular.module('myApp', []); app.controller('myCtrl', function ($scope) { $scope.nume = "Mihai"; $scope.prenume="Cornel"; $scope.totNumele = function () { return $scope.nume +" " +$scope.prenume; } });

currency

Quantity: Price: Total = {{ (quantity * price) | currency }} var app = angular.module('myApp', []); app.controller('costCtrl', function($scope) { $scope.quantity = 1; $scope.price = 9.99; });

orderBy

Repetarea codului HTML {{x.nume+', '+x.tara}}

23

filter

fila.html Filtering input:

{{ (x.name | uppercase) + ', ' + x.country }}

filacontroller.jsangular.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:

{{ x.Name + ', ' + x.Country }} var app = 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;}); });

Tabele n AngularJS {{x.Name}} {{x.Country}}

26

var app = 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;}); }) ;

Adugare style CSS table, th, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(even) { background-color: #ffffff; } table tr:nth-child(odd){ background-color: #f1f1f1; } {{x.Name}} {{x.Country}} var app = 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;}); }) ;

Adugarea filtrului orderBy table, th, td { border: 1px solid grey; border-collapse: collapse; padding: 5px;

27

} table tr:nth-child(even) { background-color: #ffffff; } table tr:nth-child(odd){ background-color: #f1f1f1; } {{x.Name}} {{x.Country}} var app = 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;}); }) ;

Adugarea filtrului uppercase table, th, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(even) { background-color: #ffffff; } table tr:nth-child(odd){ background-color: #f1f1f1; } {{x.Name}} {{x.Country | uppercase}} var app = 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

}) ;

Adugarea unui index n tabel table, th, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(even) { background-color: #ffffff; } table tr:nth-child(odd){ background-color: #f1f1f1; } {{$index + 1}} {{x.Name}} {{x.Country | uppercase}} var app = 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;}); }) ;

SQL i AngularJS Obinereadatelordepeservere.

PHP i MySQL table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; }

29

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

{{ x.Name }} {{ x.Country }}

var app = 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;}); });

ASP.NET cu SQL table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f1f1f1; } table tr:nth-child(even) { background-color: #ffffff; }

{{ x.Name }} {{ x.Country }}

30

var app = 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;}); });

1. CodulpeserverPHPcuMySQL:

2. PHPiMSAccess:

31

3. ASP.NET,VBiMSAccess:

4. ASP.net,VBRazoriSQLLite:

@{ Response.AppendHeader("Access-Control-Allow-Origin", "*") Response.AppendHeader("Content-type", "application/json") var db = Database.Open("Northwind"); var query = db.Query("SELECT CompanyName, City, Country FROM Customers"); var outp ="" var c = chr(34) } @foreach(var row in query) { if outp "" then outp = 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 Apasa! Button {{ mySwitch }}

DirectivangdisabledleagbutonulApasa!decheckboxulButton,laincarcarea

paginiibutonulApasa!vafiinactiv.

Directiva ng-show ngshowafiseazcomponentaHTMLcndaceastaestesetattrue.

Sunt vizibil. Nu sunt vizibil.

Directiva ng-hide

33

I am not visible. I am visible.

Evenimente n AngularJS

34