Note Despre Angular JS
Tradus de
ScribdTranslationsNote Despre Angular JS
Tradus de
ScribdTranslationsAngularJS
Versiunea AngularJS 1.0 a fost lansată în 2012.
Miško Hevery, un angajat Google, a început să lucreze cu AngularJS
în 2009.
AngularJS este un cadru JavaScript. Poate fi adăugat la un
Pagina HTML cu un tag <script>.
AngularJS extinde atributele HTML cu directive ș i le leagă
date în HTML cu expresii.
AngularJS este un cadru JavaScript
AngularJS este un cadru JavaScript scris în JavaScript.
AngularJS este distribuit ca un fiș ier JavaScript ș i poate fi
adăugat pe o pagină web cu o etichetă script:
<scriptsrc[Link]
/1.6.9/[Link]"></script>
AngularJS Extinde HTML
AngularJS extinde HTML cu directive ng.
Theng-appdirective defineș te o aplicaț ie AngularJS.
Directiva theng-model leagă valoarea controalelor HTML
(input, select, textarea) la datele aplicaț iei.
Theng-binddirective leagă datele aplicaț iei de HTML
vedere.
Exemplu AngularJS
<!DOCTYPEhtml>
<html>
<scriptsrc[Link]
/1.6.9/[Link]"></script>
<corp>
<divng-app="">
<p>Nume:<input type="text" ng-model="name"></p>
<png-bind="name"></p>
</div>
</body>
</html>
Exemplul explicat:
AngularJS porneș te automat când pagina web s-a încărcat.
Theng-appdirective îi spune AngularJS-ului că elementul <div>
este "proprietarul" unei aplicaț ii AngularJS.
Modelul theng-directive leagă valoarea câmpului de input la
aplicaț ia variablename.
Theng-binddirective leagă conț inutul elementului <p>
la aplicaț ia variablename.
Directive AngularJS
Aș a cum aț i văzut deja, directivele AngularJS sunt HTML
atribute cu anngprefix.
Theng-initdirective iniț iază aplicaț ia AngularJS
variabile.
Exemplu AngularJS
<divng-app=""ng-init="firstName='John'">
<p>Numele este<span ng-bind="firstName"></span></p>
</div>
Alternativ cu HTML valid:
Exemplu AngularJS
<div data-ng-app="" data-ng-init="firstName='John'">
<p>Numele este<spandata-ng-bind="firstName"></span></p>
</div>
Puteț i folosi data-ng-, în loc de ng-, dacă doriț i să creaț i
pagina HTML validă.
Expresiile AngularJS
Expresiile AngularJS sunt scrise între acolade duble:
{{ expresie }}
AngularJS will "output" data exactly where the expression is
scris:
Exemplu AngularJS
<!DOCTYPEhtml>
<html>
<script src="[Link]
/1.6.9/[Link]"></script>
<body>
<divng-app="">
<p>Prima mea expresie:{{ 5 + 5 }}</p>
</div>
</body>
</html>
Expresiile AngularJS leagă datele AngularJS de HTML
în acelaș i mod ca theng-binddirective.
Exemplu AngularJS
<!DOCTYPEhtml>
<html>
<scriptsrc[Link]
/1.6.9/[Link]"></script>
<body>
<divng-app="">
<p>Nume:<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Aplicaț ii AngularJS
Modulele AngularJS definesc aplicaț iile AngularJS.
Controalele AngularJS controlează aplicaț iile AngularJS.
Theng-appdirective defineș te aplicaț ia, theng-
directivele controller definesc controllerul.
Exemplu AngularJS
<divng-app="myApp"ng-controller="myCtrl">
First Name:<inputtype="text"ng-model="firstName"><br>
Last Name:<inputtype="text"ng-model="lastName"><br>
<br>
Full Name:{{firstName + " " + lastName}}
</div>
<script>
varapp = [Link]('myApp', []);
[Link]('myCtrl', function($scope) {
$[Link]="John";
$[Link]="Doe";
});
</script>
Modulele AngularJS definesc aplicaț ii:
Modul AngularJS
var app = [Link]('myApp', []);
Controlerul AngularJS controlează aplicaț iile:
Controller AngularJS
[Link]('myCtrl', function($scope) {
$[Link]= "John";
$[Link]= "Doe";
});
Expresii AngularJS
Expresiile AngularJS pot fi scrise între ghilimele duble
braces: {{expression}}.
Expresiile AngularJS pot fi scrise ș i într-o directivă:ng-
bind="expresie".
AngularJS va rezolva expresia ș i va returna rezultatul
exact unde este scrisă expresia.
Exprimările AngularJS sunt foarte asemănătoare cu JavaScript
expressions:They can contain literals, operators, and variables.
Exemplu {{ 5 + 5 }} sau {{ firstName + " " + lastName }}
Dacă îndepărtezing-appdirectivă, HTML va afiș a
exprimaț i-l aș a cum este, fără a-l rezolva
Unele exemple folosindng-bind:
Exemplu
<divng-app=""ng-init="quantity=1;cost=5">
<p>Total în dolari:<spanng-bind="quantity *
cost"></span></p>
</div>
Stringurile AngularJS sunt ca stringurile JavaScript:
Exemplu
<divng-app=""ng-init="firstName='John';lastName='Doe'">
<p>The name is{{ firstName + " " + lastName }}</p>
</div>
Acelaș i exemplu folosindng-bind:
Exemplu
<divng-app=""ng-init="firstName='John';lastName='Doe'">
Numele este
lastName"></span></p>
</div>
Obiecte AngularJS
Obiectele AngularJS sunt asemănătoare cu obiectele JavaScript:
Exemplu
<divng-app=""ng-
init="person={firstName:'John',lastName:'Doe'}">
<p>Numele este {{ [Link] }}</p>
</div>
Acelaș i exemplu folosindng-bind:
Exemplu
<divng-app=""ng-
init="person={firstName:'John',lastName:'Doe'}">
<p>Numele este<spanng-bind="[Link]"></span></p>
</div>
Array-uri AngularJS
Arrays-urile AngularJS sunt ca arrays-urile JavaScript:
Exemplu
<divng-app=""ng-init="points=[1,15,19,2,40]">
<p>Al treilea rezultat este {{ points[2] }}</p>
</div>
Acelaș i exemplu folosindng-bind:
Exemplu
<divng-app=""ng-init="points=[1,15,19,2,40]">
<p>Al treilea rezultat este<span ng-bind="points[2]"></span></p>
</div>
Module AngularJS
Un modul AngularJS defineș te o aplicaț ie.
Modulul este un recipient pentru diferitele părț i ale unei aplicaț ii.
Modulul este un container pentru controlerele aplicaț iei.
Controlerele aparț in întotdeauna unui modul.
Crearea unui Modul
Un modul este creat folosind AngularJS
funcț iemodul angular
<divng-app="myApp">...</div>
<script>
varapp = [Link]("myApp", []);
</script>
Adăugarea unui Controler
Adăugaț i un controler în aplicaț ia dvs. ș i faceț i referire la controler.
cung-controllerdirective:
Exemplu
<divng-app="myApp"ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
varapp = [Link]("myApp", []);
[Link]("myCtrl", function($scope) {
$[Link] ="John";
$[Link] ="Doe";
});
</script>
Directivelor AngularJS
Directivelor AngularJS sunt atribute HTML extinse cu
prefixng-.
Theng-appdirectiva iniț iază o aplicaț ie AngularJS.
Theng-initdirective initializează datele aplicaț iei.
Theng-modeldirectiva leagă valoarea controalelor HTML (input,
selectaț i, textarea) pentru datele aplicaț iei.
Repetarea elementelor HTML
Theng-repeatdirective repetă un element HTML:
Exemplu
<divng-app=""ng-init="names=['Jani','Hege','Kai']">
<ul>
<ling-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
Creează directive noi
In addition to all the built-in AngularJS directives, you can create
propriile tale directive.
Noi directive sunt create [Link]ăfuncț ie.
Pentru a invoca noua directivă, creaț i un element HTML cu
acelaș i nume de etichetă ca noua directivă.
Când denumeș ti o directivă, trebuie să foloseș ti camel case
name, w3TestDirective, dar când îl invoci, trebuie să
foloseș te- nume separatw3-test-directive:
Exemplu
<bodyng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
varapp = [Link]("myApp", []);
[Link]("w3TestDirective",function() {
return{
<h1>Creat de o directivă!</h1>
};
});
</script>
</body>
Directiva ng-model
Cung-modeldirectivă la care poț i lega valoarea unui input
câmp către o variabilă creată în AngularJS.
Legătura funcț ionează în ambele direcț ii. Dacă utilizatorul schimbă valoarea din interior
câmpul de introducere, proprietatea AngularJS îș i va schimba ș i valoarea:
Theng-model directiva poate oferi validarea tipului pentru aplicaț ie
data (number, e-mail, required):
Dacă proprietatea înng-modelatributul nu există, AngularJS
voi crea unul pentru tine.
Theng-model directive can provide status for application data
(valid, dirty, touched, error):
Exemplu
<formng-app=""name="myForm"ng-init="myText =
'post@[Link]'
Email:
<inputtype="email"name="myAddress"ng-
model="myText"required>
<h1>Stare</h1>
{{[Link].$valid}}
{{[Link].$dirty}}
{{[Link].$touched}}
</form>
Theng-model directive oferă clase CSS pentru elementele HTML,
în funcț ie de statutul lor
Legătura de date în AngularJS este sincronizarea între
modelul ș i vederea.
Legare bidirecț ională
Legătura de date în AngularJS este sincronizarea între
modelul ș i vederea.
Când datele din model se schimbă, vizualizarea reflectă schimbarea.
ș i când datele din vizualizare se schimbă, modelul este actualizat de asemenea.
Acest lucru se întâmplă imediat ș i automat, ceea ce asigură
că modelul ș i vederea sunt actualizate în permanenț ă.
Controlere AngularJS
Aplicaț iile AngularJS sunt controlate de controllere.
Directiva theng-controller defineș te controlerul aplicaț iei.
Un controller este un obiect JavaScript, creat de o standard
Constructor de obiecte JavaScript.
AngularJS va invoca controlerul cu un obiect $scope.
În AngularJS, $scope este obiectul aplicaț iei (proprietarul
variabilele ș i funcț iile aplicaț iei).
Controlere în fiș iere externe
În aplicaț ii mai mari, este obiș nuit să se stocheze controlerele în
fiș iere externe.
Doar copiaț i codul dintre etichetele <script> într-un fiș ier extern
[Link]
Example : <script src="[Link]"></script>
Scope-ul AngularJS
Domeniul este partea de legătură între HTML (vizualizare) ș i
JavaScript (controler).
Domeniul este un obiect cu proprietăț ile ș i metodele disponibile.
Domeniul este disponibil atât pentru vedere, cât ș i pentru controler.
Cum să foloseș ti domeniul?
Când creezi un controller în AngularJS, pasezi
the$scopeobiect ca argument:
Exemplu
Proprietăț ile create în controler pot fi accesate în vizualizare:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
varapp = [Link]('myApp', []);
[Link]('myCtrl',function($scope) {
$[Link] ="Volvo";
});
</script>
Când adăugaț i proprietăț i la$scopeobiectul din controller,
vizualizare (HTML) are acces la aceste proprietăț i.
În vedere, nu foloseș ti prefixul$scope, te referi doar la un
nume proprietate, ca{{carname}}.
Domeniu rădăcină
Toate aplicaț iile au un$rootScopecare este domeniul creat pe
elementul HTML care conț ineng-appdirectivă.
rootScope-ul este disponibil în întreaga aplicaț ie.
Dacă o variabilă are acelaș i nume atât în s copul curent cât ș i în
rootScope-ul, aplicaț ia foloseș te cel din domeniul actual.
Filtre AngularJS
AngularJS oferă filtre pentru a transforma datele:
monedăFormataț i un număr într-un format de monedă.
datăFormat a date to a specified format.
filtruSelectaț i un subset de elemente dintr-un array.
jsonFormataț i un obiect ca un ș ir JSON.
limitTo Limitează un array/string, într-un număr specificat de
elemente/personalităț i.
literemiciformatează un ș ir în litere mici.
numărFormatează un număr într-un ș ir.
orderBy Comandă un array după o expresie.
uppercase Formatează un ș ir în majuscule.
Adăugarea filtrilor la expresii
Filtre pot fi adăugate la expresii folosind pipe-ul
personaj|, urmat de un filtru.
TheLITEREMARIfiltrează ș irurile de format în majuscule:
Exemplu
<divng-app="myApp"ng-controller="personCtrl">
<p>Numele este {{ lastName | uppercase }}</p>
</div>
Adăugarea filtrilor la directive
Filtrele sunt adăugate la directive, cang-repeat, folosind ț eava
caracter|, urmat de un filtru:
Exemplu
TheordonareDupăfiltrul sortează un tablou:
<divng-app="myApp"ng-controller="namesCtrl">
<ul>
<ling-repeat="x in names | orderBy:'country'">
{{ [Link] + ', ' + [Link] }}
</li>
</ul>
</div>
Ce este un serviciu?
În AngularJS, un serviciu este o funcț ie sau un obiect care este disponibil
pentru, ș i limitat la, aplicaț ia ta AngularJS.
AngularJS has about 30 built-in services. One of them is
the$location serviciu.
The$location serviciul are metode care returnează informaț ii
despre locaț ia paginii web curente:
Exemplu
Foloseș te$location serviciu într-un controler:
varapp = [Link]('myApp', []);
[Link]('customersCtrl',function($scope, $location)
{
$[Link] = $[Link]();
});
Serviciul $timeout
The$timeout serviciul este versiunea AngularJS de
[Link]ț ie.
Serviciul $interval
The$intervalserviciul este versiunea AngularJS de
[Link]ț ie
AngularJS $http
$http este un serviciu AngularJS pentru citirea datelor de la distanț ă
AngularJS$http serviciul face o solicitare către server ș i
returns a response.
Metode
Exemplul de mai sus foloseș [Link]ț ine metoda de$http serviciu.
Metoda .get este o metodă de scurtătură a serviciului $http. Există
există mai multe metode de scurtătură:
.delete()
.obț ine()
.head()
.jsonp()
.patch()
.post()
.punctează()
Proprietăț i
Răspunsul de la server este un obiect cu aceste proprietăț i:
.configobiectul folosit pentru a genera cererea.
.data o ș ir, sau un obiect, care transportă răspunsul de la
server.
.anteteo funcț ie pentru a obț ine informaț ii despre antet.
.stareun număr care defineș te starea HTTP.
.statusText un ș ir care defineș te starea HTTP.
Exemplu
varapp = [Link]('myApp', []);
[Link]('myCtrl',function($scope, $http) {
$[Link]("[Link]")
atunci (funcț ie (răspuns) {
$[Link] = [Link];
$[Link] = [Link];
$[Link] = [Link];
});
});
httpis anXMLHttpRequest objectfor requesting external data.
Tabele AngularJS
Directiva ng-repeat este perfectă pentru afişarea tabelelor.
Afiș aț i IndexulTabelei ($index)
Pentru a afiș a indexul tabelului, adăugaț i un <td> cu $index:
Exemplu AngularJS
<tabel>
<trng-repeat="x in names">
<td>{{ $index + 1 }}</td>
<td>{{ [Link] }}</td>
<td>{{ x.Ț ară }}</td>
</tr>
</table>
Crearea unui câmp de selecț ie folosind ng-options
Dacă vrei să creezi o listă derulantă, bazată pe un obiect sau un
array în AngularJS, ar trebui să foloseș ting-opț iunidirecț ie
AngularJS vă permite să creaț i liste derulante bazate pe elemente dintr-un
array sau un obiect.
Directiva ng-disabled
Theng-disableddirective leagă datele aplicaț iei AngularJS la
atributul disabled al elementelor HTML
Directiva ng-show
Theng-showdirective arată sau ascunde un element HTML.
Directiva ng-hide
Directiva theng-hide ascunde sau arată un element HTML
Evenimente AngularJS
Puteț i adăuga ascultători de evenimente AngularJS la elementele dumneavoastră HTML prin
folosind una sau mai multe dintre aceste directive:
ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste
Directiva de eveniment ne permite să rulăm funcț ii AngularJS la
anumite evenimente ale utilizatorului.
Un eveniment AngularJS nu va suprascrie un eveniment HTML, ambele evenimente
va fi executat.
Evenimentele mouse-ului
Evenimentele de mouse au loc atunci când cursorul se miș că peste un element, în
această comandă:
1. ng-mouseover
2. ng-mouseenter
3. ng-mousemove
4. ng-mouseleave
Sau când un buton de mouse este apăsat pe un element, în această ordine:
ng-mousedown
2. ng-mouseup
3. ng-click
Toggle, True/False
Dacă vrei să arăț i o secț iune de cod HTML când un buton este apasat
a făcut clic ș i ascunde când butonul este apăsat din nou, ca un
meniul derulant, fă ca butonul să se comporte ca un comutator
$event Object
Poț i trece de$evenimentobject as an argument when calling the
funcț ie.
The$evenimentobiectul conț ine obiectul de eveniment al browser-ului:
Exemplu
<divng-app="myApp"ng-controller="myCtrl">
<h1ng-mousemove="myFunc($event)">Treceț i cu mouse-ul peste mine!</h1>
<p>Coordonate:{{x + ', ' + y}}</p>
</div>
<script>
varapp = [Link]('myApp', []);
[Link]('myCtrl',function($scope) {
$[Link] =function(myE) {
$scope.x = [Link];
$scope.y = [Link];
}
});
</script>
Casetă de selectare
O casetă de selectare are valoareaadevăratsaufals. Aplicăng-
modeldirecț ie către o casetă de selectare ș i foloseș te valoarea acesteia în
aplicaț ie.
Exemplu
Arată antetul dacă caseta de selectare este bifată:
<form>
Verificaț i pentru a arăta un antet:
<input type="checkbox" ng-model="myVar">
</formular>
<h1 ng-show="myVar">Antetul Meu</h1>
Butoane radio
Leagă butoanele radio de aplicaț ia ta cung-model directivă.
Butonuri radio cu acelaș ing-modelpoate avea valori diferite,
dar doar cel selectat va fi folosit.
Validarea Formularului AngularJS
AngularJS poate valida datele de intrare.
AngularJS oferă validare a formularelor pe partea clientului.
AngularJS monitorizează starea formularului ș i a câmpurilor de input
(input, textarea, select), ș i îț i permite să notifici utilizatorul despre
starea actuală.
AngularJS deț ine de asemenea informaț ii despre dacă au
a fost atins, sau modificat, sau nu.
Puteț i utiliza atributele standard HTML5 pentru a valida inputul, sau
poț i crea propriile tale funcț ii de validare.
Validarea pe partea clientului nu poate singură să securizeze inputul utilizatorului. Pe partea serverului
validarea este de asemenea necesară.
Necesar
Utilizaț i atributul HTML5necesarpentru a specifica că câmpul de introducere
trebuie completat:
Exemplu
Câmpul de introducere este obligatoriu:
<formname="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>Starea validă a intrării este:</p>
<h1>{{[Link].$valid}}</h1>
Foloseș te tipul HTML5emailpentru a specifica că valoarea trebuie să fie un e-
mail:
Exemplu
Câmpul de input trebuie să fie un e-mail:
<formname="myForm">
<inputname="myInput"ng-model="myInput"type="email">
</form>
<p>Starea validă a intrării este:</p>
<h1>{{[Link].$valid}}</h1>
Form State and Input State
AngularJS actualizează constant starea atât a formularului cât ș i a
câmpurile de intrare.
Câmpurile de introducere au următoarele stări:
$neafectatCâmpul nu a fost atins încă
$atinsCâmpul a fost atins
$pristineCâmpul nu a fost modificat încă
$murdarCâmpul a fost modificat
$invalidConț inutul câmpului nu este valid
$validThe field content is valid
Sunt toate proprietăț i ale câmpului de input ș i sunt
oriadevăratsaufals.
Formele au următoarele stări:
$pristineNu au fost modificate niciun câmp încă
$dirty Unul sau mai multe au fost modificate
$invalidConț inutul formularului nu este valid
$validConț inutul formularului este valid
$submitted Formularul este trimis
Ele sunt toate proprietăț i de formă ș i sunt fieadevăratsaufals.
API Global AngularJS
API-ul Global AngularJS este un set de funcț ii globale JavaScript
pentru a efectua sarcini comune, cum ar fi:
Compararea obiectelor
Iterarea obiectelor
Conversia datelor
Funcț iile API globale sunt accesate folosind obiectul angular.
Mai jos este o listă cu câteva funcț ii API comune:
API Description
[Link]() Transformă un ș ir în litere mici
[Link]() Converte ș te un ș ir de caractere în litere mari
[Link]() Returnează adevărat dacă referinț a este un ș ir
[Link]() Returnează adevărat dacă referinț a este un număr
Cu AngularJS, poț i include HTML dintr-un fiș ier extern.
AngularJS Includează
Cu AngularJS, poț i include conț inut HTML folosind theng-
inclusdirectivă:
Example
<bodyng-app="">
<divng-include="'[Link]'"></div>
</body>
Include domenii încruciș ate
Din păcate, directiva theng-includ nu permite să
includerea fiș ierelor din alte domenii.
Pentru a include fiș iere dintr-un alt domeniu, poț i adăuga o listă albă de
fiș iere legale ș i/sau domenii în funcț ia de configurare a ta
application:
Exemplu :
<bodyng-app="myApp">
<divng-
include="'[Link]
</div>
<script>
varapp = [Link]('myApp', [])
[Link](function($sceDelegateProvider) {
$[Link]([
[Link]
]);
});
</script>
</body>
Animatii AngularJS
AngularJS provides animated transitions, with help from CSS.
Ce este o animaț ie?
O animaț ie este atunci când transformarea unui element HTML
îț i oferă o iluzie de miș care.
Exemplu:
Bifează caseta pentru a ascunde DIV-ul:
<bodyng-app="ngAnimate">
Ascunde DIV-ul:<input type="checkbox" ng-model="myCheck">
<divng-hide="myCheck"></div>
</body>
Aplicaț iile nu ar trebui să fie pline de animaț ii, dar unele
animaț iile pot face aplicaț ia mai uș or de înț eles.
Ce am nevoie?
Pentru a pregăti aplicaț iile tale pentru animaț ii, trebuie să
include biblioteca AngularJS Animate:
<scriptsrc[Link]
/1.6.9/[Link]"></script>
Atunci trebuie să te referi langAnimatemodul în tine
application:
<bodyng-app="ngAnimate">
Sau dacă aplicaț ia ta are un nume, adaugăngAnimateca un
dependenț ă în modulul aplicaț iei tale:
Exemplu
<bodyng-app="myApp">
<h1>Ascunde DIV-ul:<input type="checkbox" ng-
model="myCheck"></h1>
<divng-hide="myCheck"></div>
<script>
varapp = [Link]('myApp', ['ngAnimate']);
</script>
What Does ngAnimate Do?
Modulul ngAnimate adaugă ș i elimină clase.
Modulul ngAnimate nu animează elementele tale HTML,
dar când ngAnimate observă anumite evenimente, cum ar fi ascunderea sau afiș area
un element HTML, elementul primeș te câteva clase predefinite
care poate fi folosit pentru a crea animaț ii.
Directivele din AngularJS care adaugă/elimină clase sunt:
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
Theng-arataș ing-hide directivele adaugă sau elimină unng-
ascundevaloare de clasă.
Ceilalț i directive adaugă ong-entervaloarea clasei când intră
DOM-ul, ș i unng-lăsaatribut când sunt eliminate din
DOM-ul.
Theng-repeatdirectivele adaugă de asemenea unng-movevaloarea clasei când
Elementul HTML îș i schimbă poziț ia.
În plus, în timpul animaț iei, elementul HTML va avea o
set de valori de clasă, care vor fi eliminate atunci când animaț ia
s-a terminat. Exemplu: theng-hide directiva va adăuga această clasă
values:
ng-animate
ng-hide-animate
ng-hide-add(dacă elementul va fi ascuns)
ng-hide-remove(dacă elementul va fi afiș at)
(dacă elementul va fi ascuns)
ng-hide-add-active
(dacă elementul va fi arătat)
ng-hide-remove-active
Animaț ii folosind CSS
Putem folosi tranziț ii CSS sau animaț ii CSS pentru a anima HTML
elemente. Acest tutorial vă va arăta ambele.
Tranziț ii CSS
Tranziț iile CSS permit schimbarea valorilor proprietăț ilor CSS
uș or, de la o valoare la alta, pe o durată dată:
Exemplu:
Când elementul DIV primeș [Link]-hideclasă, tranziț ia va
ia 0,5 secunde ș i înălț imea se va schimba lin de la
100px la 0:
<stil>
div{
tranziț ie: toate liniare 0.5s;
culoare de fundal: albastru deschis;
înălț ime:100px;
}
.ng-hide{
height:0;
}
</stil>
Animatii CSS
Animatiile CSS vă permit să schimbaț i valorile proprietăț ilor CSS
lin, de la o valoare la alta, pe o durată dată:
Exemplu:
Când elementul DIV primeș [Link]-hideclasã
theschimbareameaanimaț ia va rula, care va schimba lin.
înălț ime de la 100px la 0:
<style>
@keyframes myChange{
de la
height:100px;
}
înălț ime:0;
}
}
div{
înălț ime:100px;
culoare-fundal:albastru deschis;
}
[Link]-hide{
animatie:0.5s myChange;
}
</style>
Routing AngularJS
ThengRoutemodulul ajută aplicaț ia ta să devină un
Aplicaț ie pe o singură pagină.
Ce este Routing în AngularJS?
Dacă vrei să navighezi către pagini diferite în aplicaț ia ta, dar
vrei de asemenea ca aplicaț ia să fie o SPA (Pagină Unică)
Aplicaț ie), fără reîncărcarea paginii, poț i folosi
thengRoutemodul.
ThengRoutemodulerează aplicaț ia ta către diferite pagini
fără a reîncărca întreaga aplicaț ie
Ce am nevoie?
Pentru a pregăti aplicaț iile tale pentru rutare, trebuie să
include modulul AngularJS Route:
<script src="[Link]
/1.6.9/[Link]"></script>
Atunci trebuie să adăugaț ingRouteca o dependenț ă în
modul de aplicaț ie:
varapp = [Link]("myApp", ["ngRoute"]);
Acum aplicaț ia ta are acces la modulul de rutare, care
oferă$routeProvider.
Foloseș te-l$routeProviderpentru a configura diferite rute în
application:
[Link](function($routeProvider) {
$routeProvider
.când("/", {
templateUrl :"[Link]"
})
.când("/roș u", {
templateUrl :"[Link]"
})
.when("/green", {
templateUrl :"[Link]"
})
.când("/albastru", {
templateUrl :"[Link]"
});
});
$routeProvider
Cu$routeProviderpoț i defini ce pagină să afiș eze
când un utilizator face clic pe un link.
Ș ablon
De asemenea, poț i folosiș ablon proprietate, care vă permite să scrieț i
HTML direct în valoarea proprietăț ii, ș i nu să facă referire la o pagină.
Metoda altfel
De asemenea, poț i folosialtfelmethod, which is the default route
când niciunul dintre ceilalț i nu găseș te un partener.