1) Angular JS = Utilizat în aplicații cu o singură pagină (SPA).

Este o bibliotecă JavaScript foarte puternică.

3) Extinde atributele DOM HTML și face acțiunea utilizatorului receptiv. [<div

clasa='cap' ng-*=''>
Angular JS este un cadru de aplicații web open source.
-
Angular JS este un cadru de dezvoltare JavaScript puternic pentru a crea Internet RICHI
Aplicatie (RIA).
6) Angular JS oferă dezvoltatorilor opțiunea de a scrie aplicații de tip client (folosind
JavaScript) într-un mod curat MVC (Model Vizualizare Controler).

7) Compatibilitate între browsere. Angular JS gestionează codul JavaScript potrivit pentru

fiecare browser.

Per ansamblu, asupra punctelor de mai sus pot spune:

Angular JS este un cadru open source pentru a construi aplicații de mari dimensiuni și de înaltă performanță
aplicație web menținându-le ușor de întreținut.

-
1) Legarea de date: Este sincronizarea automată a datelor între model și vedere
Componente.
2) Domeniu: Acestea sunt obiecte care se referă la Model. Ele acționează ca un lipici între
Controler și vedere.
3) Controller: Este o funcție JavaScript care este legată de un anumit domeniu.
4) Servicii: Angular JS vine cu mai multe Servicii încorporate, de exemplu $http pentru
realizați un XMLHttpRequests. Acestea sunt obiecte singleton care sunt instanțiate
o singură dată în aplicație.
5) Filtre: Acestea selectează un subset de elemente dintr-un tablou și le returnează într-un nou tablou.
6) Directive: Directivele sunt markerii pentru elemente DOM, cum ar fi (Elemente,
atribute, CSS și altele). Este folosit pentru a crea un Custom HtmlTag care servește
ca noi, Widgets personalizate. Angular JS are directive încorporate precum (ng-app, ng-
model).
7)Șablon: Acestea sunt vizualizările redării cu informații din controler
și model. Poate fi un fișier single ([Link]) sau mai multe vizualizări cu o pagină
folosind 'Partial'.
8) Rutare: Este conceptul de comutare a Viziunilor.
9) Model View Whatever: MVC este utilizat ca model de design pentru a împărți aplicația
în părți diferite, cum ar fi (Model, view, Controller). Angular JS nu are nevoie de MVC
structure în sens tradițional, ci mai degrabă ceva apropiat de MV-VM (Model
Vizualizare sau Model de Vizualizare). Model Vizualizare Orice.
10) Linkuri adânci: Linkurile adânci permit codificarea stării aplicației în
URL astfel încât să poată fi salvat. Aplicația poate fi restaurată din
URL către aceeași stare.
11) Injectarea dependențelor: Angular JS are injectare de dependențe încorporată
subsystem care îi ajută pe dezvoltatori făcând aplicația ușor de dezvoltat,
testează și înțelege.

Avantajele AngularJS:-
1) AngularJS oferă capacitatea de a crea aplicații pe o singură pagină într-un mod foarte curat
și într-un mod ușor de întreținut.
2) AngularJS oferă capacitatea de legare a datelor la HTML, oferind astfel utilizatorului o experiență bogată.

și experiență reactivă
Codul AngularJS este testabil la unitate.
4) AngularJS utilizează injecția de dependență și face uz de separarea preocupărilor.
5) AngularJS oferă componente reutilizabile. Cu AngularJS, dezvoltatorul scrie
mai puțin cod și obțineți mai multă funcționalitate.
6) În AngularJS, vederile sunt pagini HTML pure, iar controlerele sunt scrise în JavaScript.
efectuează procesarea afacerii.
Pe lângă toate acestea, aplicațiile AngularJS pot rula pe toate browserele majore.
și telefoane inteligente, inclusiv telefoane/tablete bazate pe Android și iOS.

Dezavantajele AngularJS:-
Deși AngularJS vine cu multe avantaje, în același timp ar trebui să
considerați următoarele puncte−

Non sigur− Fiind un cadru doar JavaScript, aplicaț ia scrisă în AngularJS

nu sunt sigure. Autentificarea și autorizarea pe partea serverului sunt esențiale pentru a menține un
aplicație securizată.

Nu este degradabil - Dacă utilizatorul aplicației dvs. dezactivează JavaScript, atunci utilizatorul va just
vezi pagina de bază și nimic mai mult.

Componente Angular JS:

Există trei părți principale ale componentelor:
1)Ng-app: Această directivă definește și leagă o aplicație Angular JS de HTML.
2)Ng-model: Această directivă leagă valorile datelor aplicației Angular JS la
Controale de intrare HTML.
3)Ng-binds: Această directivă leagă datele Angular JS de HTMLTag.

1) Indicaț i aplicaț ia Angular JS: Atunci când plasăm ng-app, Angular JS

start aplicație/ link către pagina html. [Exemplu: <body ng-app = "myapp" :Așadar
aici Modulul este myapp:]
 2) Vedere:
Așadar, sub sintaxă se spune Vizualizare.
a) Ng-controller spune lui Angular JS ce controler să folosească cu această vizualizare.
b) [Link] spune lui Angular JS să scrie valoarea Modelului pe pagina HTML la acest
locație.

Vizualizare :<divng-controller="HelloController">
<h2>Bine ai venit {{[Link]}} în lumea Tutorialspoint!</h2>

</div>

3) Controler: Sintaxa de mai jos, aici codul înregistrat cu funcț ia controler

nume numit `HelloController‘ în modulul angular numit myapp. Așadar, modulul
și Controlerul poate învăța în capitolul următor, care este marcat cu culoare albastru deschis.
aici funcția Controller [HelloController] este înregistrată în angular prin angular
apelul funcției module() și .controller()

$Scope: este un parametru transmis func ț iei controller care se nume ș te `Model`.
Funcția controller adaugă obiectul helloToJavaScript, iar în acel obiect
adaugă un câmp titlu.
4)<script>

5) [Link]("myapp", [])

6)

7) .controller("HelloController", function($scope) {

8) $[Link]= {};

9) $[Link]="AngularJS";

10)});

11)</script>

4) Când pagina este încărcată în browser, următoarele lucruri se întâmplă -

Documentul HTML este încărcat în browser și evaluat de browser.

Fișierul JavaScript AngularJS este încărcat, obiectul global angular este creat. Apoi,
JavaScript care înregistrează funcțiile controller este executat.

Următorul AngularJS scanează HTML-ul pentru a căuta aplicații și vederi AngularJS.

Odată ce vizualizarea este localizată, aceasta conectează acea vizualizare la controllerul corespunzător.

funcție.
 Apoi, AngularJS execută funcțiile controller-ului. Apoi, redă vizualizările cu
datele din model populate de controler. Pagina este acum gata.

Model View Controller sau MVC, cum este cunoscut popular, este un model de design software.
pentru dezvoltarea aplicațiilor web. Un model de tip Model-View-Controller este alcătuit din
următoarele trei părți -

Modelul - Este cel mai mic nivel al modelului responsabil pentru menținerea datelor.

Vizualizare - Este responsabilă pentru afișarea tuturor sau a unei părți din date utilizatorului.

Controller - Este un cod software care controlează interacțiunile dintre Model

și Vizualizare.
MVC este popular deoarece izolează logica aplicației de stratul interfeței utilizatorului
și susține separarea preocupărilor. Controlerul primește toate cererile pentru
aplicația și apoi lucrează cu modelul pentru a pregăti orice date necesare vederii.
Apoi, vederea folosește datele pregătite de controler pentru a genera un final
un răspuns prezentabil. Abstracția MVC poate fi reprezentată grafic ca
următoarele.

AngularJS MVC
Modelul
Modelul este responsabil pentru gestionarea datelor aplicației. Răspunde la cerere
din vedere și la instrucțiunile din controler pentru a se actualiza.

Viziunea
O prezentare a datelor într-un format particular, declanșată de decizia controlerului de a
prezentați datele. Acestea sunt sisteme de șabloane bazate pe script, cum ar fi JSP, ASP, PHP și
foarte ușor de integrat cu tehnologia AJAX.

Controlearul
Controlerul răspunde la inputul utilizatorului și efectuează interacțiuni asupra modelului de date
obiecte. Controlerul primește input, îl validează și apoi efectuează afacerea
operațiuni care modifică starea modelului de date.

AngularJS este un cadru bazat pe MVC. În capitolele următoare, vom vedea cum
AngularJS folosește metodologia MVC.

Cum se integrează AngularJS cu HTML:

1) Ng-app: Această directivă definește începutul aplicației Angular JS.

2) Ng-model: Această directivă creează o variabilă de model numită „Anything” care poate
fi folosit în pagina html și în cadrul <div> unde se află ng-app.
3) Ng-binds: Aceste directive păstrează valoarea variabilei modelului și afișează textul
când utilizatorul tastează în caseta de text.
Tag-ul de închidere </div> indică faptul că aplicația Angular JS este închisă.

AngularJS – Directive:
Directivelor Angular JS sunt folosite pentru a extinde elementele HTML. Acestea sunt atribute speciale.
începe cu ng-prefix. Unele directive sunt
1) ng-app: Această directivă pornește aplicația Angular JS
2) ng-init: Aceste directive inițializează datele aplicației
3) ng-model: Această directivă definește un model care este o variabilă în Angular JS.
ng-repeat: Această directivă repetă elementul HTML pentru fiecare element din Angular JS.

Ng-app: Ng-App începe aplicația Angular JS. Aceasta definește elementul rădăcină. Aceasta
inițiază și pornește automat aplicația atunci când pagina web conține Angular
Aplicația JS este încărcată. De asemenea, este folosită pentru a încărca diverse module Angular JS în Angular JS
Aplicație.
 <divng-app="">

...

</div>

Ng-init: Directiva Ng-init iniț iază datele aplicaț iei Angular JS. Aceasta pune valorile.
pentru variabilă care să fie utilizată în aplicație.

<divng-app=""ng-init="countries = [{locale:'en-US',name:'United States'}, {locale:'en-

Regatul Unit

...

</div>

Ng-model: Directiva Ng-model defineș te modelul/variabila care va fi utilizată în Angular JS

Aplicații.
<divng-app="">

...

<p>Introduceți numele dvs.:<input type="text" ng-model="name"></p>

Ng-Repeat: Directiva Ng-repeat este folosită pentru a crea un element HTML pentru fiecare element atunci când
datele aplicației sunt necesare ca un element.

<divng-app="">

...

<p>Lista țărilor cu localizare :</p>

<ol>

<ling-repeat="țară în țări">

Țara:

</li>

</ol>

</div>

Exemplu pentru Angular JS – Directive:

<html>
 <head>

Directive AngularJS

</cap>

<body>

Aplicație Exemplu

en-US
Regatul Unit

<p>Introduceți-vă numele:<input type="text" ng-model="name"></p>

<p>Bună<span ng-bind="name"></span>!</p>

<p>Lista țărilor cu locale:</p>

<ol>

<ling-repeat="țară în țări">

Țară:

</li>

</ol>

</div>

<script src=[Link]

</body>

</html>
Angular JS – Expresie:
Expresiile sunt folosite pentru a lega datele aplicației de html. Expresiile sunt scrise în interiorul
două acolade ca {{expresie}}. Expresiile se comportă în același mod ca ng-bind
directives. Expresiile aplicației AngularJS sunt expresii JavaScript pure și
afișează datele unde sunt folosite.

<p>Bună {{cost * product}} </p>

<p>Prenume: {{[Link]}} </p>

<p>Nume de familie: {{[Link]}} </p>

<p>Număr de rol: {{[Link]}} </p>

Folosind Array: <p>note; {{note [4]}} </p>.

<html>

<head>

Expresii AngularJS

</head>

<body>

<h1>Aplicație Exemplu</h1>

<divng-app=""ng-init="quantity = 1;cost = 30; student =

Mahesh

<p>Bună {{[Link] + " " + [Link]}}!</p>

<p>Cheltuieli pe cărți : {{cost * quantity}} RON</p>

 <p>Număr de înmatriculare: {{[Link]}}</p>

<p>Note(Matematică): {{marks[3]}}</p>

</div>

<scriptsrc=[Link]

</body>

</html>

Angular JS – Controller:
Angular JS se bazează în principal pe Controller pentru a controla fluxul de date în aplicație.
controllerul este definit folosind directiva ng-controller. Controllerul este un obiect JavaScript
conținând atribute/proprietăți și funcții. Fiecare controler acceptă $scope ca un
parametru care se referă la aplicația/modulul pe care controlerul trebuie să-l controleze.

<divng-app=""ng-controller="studentController">

...

</div>

Aici am declarat un controller ‘Student Controller’ folosind directiva ng-controller.

<script>

funcția studentController($scope) {

$[Link]= {

Mahesh

Parashar

functie() {

varstudentObject;

$[Link];

[Link] + " " + [Link];

};

</script>
 1) StudentController este definit ca un obiect JavaScript cu $scope ca un
argument.
$scope este o referință la aplicația care urmează să folosească studentController
obiect.
$[Link] este o proprietate pentru StudentController.
4) Prenumele și numele de familie sunt proprietăți pentru $[Link] și acum
$[Link] este un Obiect.
5) Aici fullname este o funcție a obiectului $[Link] și sarcina sa este de a
returnează numele combinat.
6) Funcția fullname primește obiectul student și apoi returnează
valoare combinată.
7) Ca o notă, putem defini de asemenea obiectul controller într-un fișier JS separat.

Acum putem folosi obiectul StudentController în ng-model pentru a obține valorile din
controler prin utilizarea expresiei.
Introduceți prenumele: <input type="text" ng-model="[Link]"><br>

<input type="text" ng-model="[Link]"><br>

<br>

Intră: {{[Link]()}}

Aici [Link] și [Link] au fost plasate în ng-model și în pagină.

vor arăta valorile implicite care sunt asignate în fișierul JS.

Și metoda fullname() poate oferi în două moduri a) expresie sau b) ng-binds.

Exemplu pentru ng-controller (Controler Angular JS):

<html>

<head>

Controler Angular JS

<scriptsrc=[Link]

</head>

<body>

<h2>Aplicație Exemplu AngularJS</h2>

<divng-app="mainApp"ng-controller="studentController">

Introduceți prenumele:<input type="text" ng-model="[Link]"><br><br>

Introduceți numele de familie:<input type="text" ng-model="[Link]"><br>

 <br>

Intrii: {{[Link]()}}

</div>

<script>

varmainApp=[Link]("mainApp", []);

[Link]('studentController',function($scope) {

$[Link]= {

Mahesh

Parashar

functie() {

varstudentObject;

$[Link];

[Link] + " " + [Link];

};

});

</script>

</body>

</html>

Angular JS – Filtre:
Filtrele sunt folosite pentru a schimba și modifica datele și sunt agrupate într-o expresie sau
directive folosind caracterul pipe. Următoarea este lista utilizată frecvent în directive.

1) Litere mari: Transformă textul în litere mari

2) Litere mici: convertește textul în litere mici
3) Moneda: Plasează simbolul monedei înaintea valorii numerice.
4) Filtru: filtrează array-ul pentru a obține un subset al acestuia bazat pe criteriile furnizate.
5) Order BY: ordonează array-ul pe baza criteriilor furnizate.

Filtru Majuscule:
Adaugă filtru cu majuscule la o expresie folosind caracterul pipe. Aici am adăugat
filtru cu litere mari pentru a tipări numele studentului cu litere mari.

Filtru pentru litere mici

Adaugă filtru cu litere mici la o expresie folosind caracterul pipe. Aici am adăugat
filtru cu litere mici pentru a imprima numele studentului cu litere mici.

Filtru valutar:
Adăugați un filtru valutar la o expresie care returnează un număr folosind caracterul pipe. Aici
am adăugat un filtru de valută pentru a imprima comisioanele folosind formatul valutar.

Filtru
Pentru a afișa doar valorile utilizatorului necesare.

Sortează după:
Pentru a ordona valorile numeric.

<html>

<head>

Filtre Angular JS

<scriptsrc=[Link]

</head>

<body>

<h2>Aplicație exemplu AngularJS</h2>

<divng-app="mainApp"ng-controller="studentController">

<tableborder="0">

<tr>

<td>Introduceți prenumele:</td>

<td><input type="text" ng-model="[Link]"></td>

</tr>

<tr>

<td>Introduceți numele de familie:</td>

<td><input type="text" ng-model="[Link]"></td>

</tr>
 <tr>

<td>Introduceti taxe:</td>

<td><input type="text" ng-model="[Link]"></td>

</tr>

<tr>

<td>Introduceți subiectul:</td>

<td><input type="text" ng-model="numeleSubiectului"></td>

</tr>

</table>

<br/>

<tableborder="0">

<tr>

Nume cu majuscule:

</tr>

<tr>

Nume cu litere mici:

</tr>

<tr>

taxe:

</td>

</tr>

<tr>

<td>Subiect:</td>

<td> </td>

<ul>

<ling-repeat="subject in [Link] | filter: subjectName |orderBy:'marks'">

{{ [Link] + ', note:' + [Link] }}

 </li>

</ul>

</td>

</tr>

</tabel>

<script>

varmainApp=[Link]("mainApp", []);

[Link]('studentController',function($scope) {

$[Link]= {

Mahesh

Parashar

fees:500,

subjects:[

Fizică

Chimie

Matematica

],

funcția() {

varstudentObject;

$[Link];

[Link] + " " + [Link];

};

});

</script>

</body>
</html>

Aplicaț ie Exemplu AngularJS

Introduceți prenumele:

Introduceți numele de familie:

Introduceți taxe:

Introduceți subiectul:

NUME CU LITERE MARI: MAHESH PARASHAR

nume cu litere mici: Mahesh Parashar
taxe 500,00 $
Math, marks:65
Subiect: Fizică, note: 70
Chimie

Angular JS – HTML DOM:

Următoarele directive leagă datele aplicației de atributele elementelor DOM Html.
ng-disabled
2) ng-arata
3) ng-hide
4) ng-click

Ng-disabled: Adaugă atributul ng-disabled la un buton HTML ș i atribuie-i un model. Leagă

modelul la o casetă de selectare și vezi variația.
Ng-show: Adăugaț i atributul ng-show la un buton HTML ș i transmiteț i-i un model. Ligaț i-l
modelează un checkbox și vezi variația.
Ng-hide: Adăugaț i atributul ng-hide la un buton HTML ș i transmiteț i-i un model. Legaț i-l
model pentru o casetă de selectare și observă variația.
Ng-click: Adaugăatributul ng-click la un buton HTML ș i actualizează un model. Leagă-l
model la html și vezi variația.

<html>

<head>

AngularJS HTML DOM

</head>

<body>

<h2>Aplicație de exemplu AngularJS</h2>

<divng-app="">
 <tableborder="0">

<tr>

<td><input type="checkbox" ng-model="enableDisableButton"> Dezactivează Butonul</td>

<td><button ng-disabled="enableDisableButton">Apasă-mă!</button></td>

</tr>

<tr>

<td><input type="checkbox" ng-model="showHide1">Arată Buton</td>

<td><button ng-show="showHide1">Apasă-mă!</button></td>

</tr>

<tr>

<td><input type="checkbox" ng-model="showHide2">Buton de Înlăturare</td>

<td><button ng-hide="showHide2">Apasă-mă!</button></td>

</tr>

<tr>

<td><p>Total clicuri: {{ clickCounter }}</p></td>

<td><button ng-click="clickCounter = clickCounter + 1">Apasă-mă!</button></td>

</tr>

</table>

</div>

<scriptsrc=[Link]

</body>

</html>

Aplicaț ie Exemplu AngularJS

 Dezactivează butonul
Click pe mine!

Arată butonul

Buton de ascundere
Click pe mine!

Totalclicuri:12 Click pe mine!

Angular JS – Module:
Angular JS suportă abordarea modulară. Modularul este folosit pentru a separa logica, de exemplu serviciul,
aplicație, controler etc. și va menține codul curat. Definim modular în
fișier JS separat și denumiți-l conform [Link]. Există două fișiere JS, unul este
Fișier JS de aplicație și controler.

1) Modul de aplicație: Modulul de aplicație este folosit pentru a iniția aplicația

cu controller.
Modulul controller: Modulul controller este folosit pentru a defini controllerul.

Modul de aplicaț ie:

Acest tablou conține dependent
Modul
Sintaxă: var mainapp = [Link]('myapp', []);
Aplicație
Numele modulului ng-app=’myapp’].

Aici am declarat o aplicație myApp folosind [[Link]

funcția]. Am trecut un array gol la ea. Acest array conține, în general,
module dependente.

Modul de Control:

Sintaxă:[Link]("studentController",function($scope) {

$[Link]= {

Mahesh

Parashar

fees:500,
 subjects:[

Fizică

Chimie

Matematica

Engleză

Hindi

],

funcție() {

varstudentObject;

$[Link];

[Link] + " " + [Link];

};

});

Aici am declarat modulul Controller StudentController în [Link]()

Funcție.

UseModules

<divng-app="mainApp"ng-controller="studentController">

...

<script src="[Link]"></script>

<script src="[Link]"></script>

</div>

Aici am folosit modulul aplicației utilizând directiva ng-app și controlerul utilizând ng-
directiva controller. Am importat [Link] și [Link] în
pagina principală html.
Angular JS – Formulare:

Angular JS îmbogățește completarea formularelor și validarea. Aici folosim evenimentul ng-click pentru

butonul click Angular JS și folosiți $dirty și $invalid pentru validare într-un mod fără întreruperi.

În validarea formularelor, folosim „novalidation” pentru a dezactiva validarea specifică browserului.

Controalele formularului folosesc intens evenimentele Angular JS.

Evenimente

Ng-click

Ng-dublu-click

Ng-mouseenter

Ng-mouseleave

Ng-moverhover

Ng-mouseup

Ng-mousedown

Ng-mousemove

Ng-keyup

Ng-keydown

Ng-change

Ng-apăsare

Validare date:

Următoarele pot fi folosite pentru a urmări eroarea:

indică faptul că valoarea s-a schimbat.

stările care indică că valoarea introdusă este invalidă

3) $eroare: declară exact acea eroare.

<html>

<head>

Formulare Angular JS

<scriptsrc=[Link]

<style>

tabel,th,td{

border:1pxsolid grey;

border-collapse:colapsare;

margine:5px;

tabel tr:nth-child(impair) {

culoare de fundal:#f2f2f2;

tabloul tr:nth-child(par) {

background-color:#ffffff;

</head>

<corp>

<h2>Aplicație Exemplu AngularJS</h2>

<divng-app="mainApp"ng-controller="studentController">
 <form name="studentForm" novalidate>

<tableborder="0">

<tr>

<td>Introduceti prenumele:</td>

<td><input name="firstname" type="text" ng-model="firstName" required>

<span style="color:red" ng-show="[Link].$dirty &&

[Link].$invalid

Prenume este
necesar.

</span>

</td>

</tr>

<tr>

<td>Introduceți numele de familie:</td>

<td><input name="lastname" type="text" ng-model="lastName" required>

<span style="color:red" ng-show="[Link].$dirty &&

[Link].$invalid

Numele de familie este

necesar.

</span>

</td>

</tr>

<tr>

<td>Email:</td><td><input name="email" type="email" ng-model="email" length=

100

<span style="color:red" ng-show="[Link].$dirty && [Link].

$invalid">

Email-ul este necesar.

<span ng-show="[Link].$[Link]">Adresă de email invalidă.</span>

</span>

</td>

</tr>
 <tr>

<td>

<button ng-click="reset()">Resetare</button>

</td>

<td>

<button ng-disabled="[Link].$dirty &&

[Link].$invalid || [Link].$dirty &&

[Link].$invalid || [Link].$dirty &&

[Link].$invalid"ng-click="submit()">Trimite</button>

</td>

</tr>

</tabel>

</form>

</div>

<script>

varmainApp=[Link]("mainApp", []);

[Link]('studentController',function($scope) {

$[Link]=function(){

Mahesh

Parashar

MaheshParashar@[Link]

$[Link]();

});

</script>

</body>

</html>