Ce este AngularJS?

AngularJS este unul dintre cele mai populare cadre web bazate pe JavaScript utilizate în dezvoltarea front-end. Este utilizat în dezvoltarea de aplicații cu o singură pagină (SPA). AngularJS este un cadru open-source, care este menținut în principal de Google și de o comunitate de persoane implicate în rezolvarea problemelor cu care se confruntă dezvoltarea unui singur program de aplicație. În acest subiect, vom afla despre directivele AngularJS.

AngularJS nu este altceva decât dacă extinde HTML-ul existent; Acesta este adăugat în pagina HTML cu tag. AngularJS face ca site-ul HTML să răspundă mai mult la acțiunile utilizatorului prin adăugarea cu ușurință de atribute suplimentare. Cea mai recentă versiune stabilă a AngularJS este 1.6.x de acum.

Directivele AngularJS

AngularJS este un cadru eficient care acceptă arhitectura bazată pe Model-View-Controller (MVC). Acesta oferă caracteristici de bază, cum ar fi legarea de date în două sensuri, controler, servicii, directive, șabloane, router, filtre, injecție de dependență, etc. Acestea sunt principalele caracteristici care lucrează în colaborare pentru a face eficient AngularJS.

Directiva este una dintre caracteristicile foarte utile în AngularJS. Extinde HTML-ul existent și permite dezvoltarea ușor a paginilor web cu un comportament nou folosind JavaScript de bază. Acesta permite să scriem propriile noastre etichete personalizate și să le mapăm în HTML existent. Această funcționalitate oferă mai multă libertate și permite dezvoltatorilor o mare flexibilitate în crearea și utilizarea elementelor personalizate în aplicațiile web în consecință. De asemenea, își pot proiecta și directivele proprii. În acest articol, ne vom concentra în principal pe directivele AngularJS și vom încerca să obținem cunoștințe despre această caracteristică de bază.

Directivele nu sunt altceva decât markeri pentru elemente DOM în HTML, cum ar fi numele atributului, numele elementului, clasa CSS sau comentariul. Compilatorul de AngularJS atașează apoi comportamentul specificat acelui element. Fiecare directivă are un nume și începe cu „ng-”. Fiecare directivă poate decide unde poate fi utilizată în elementele DOM. Există câteva directive existente care sunt deja disponibile în AngularJS și, în mod similar, le putem defini pe cont propriu.

Vom arunca o privire asupra a trei directive principale încorporate, care împart cadrul AngularJS în trei părți majore.

1. ng-app: Această directivă spune compilatorului că aceasta este aplicația AngularJS. Directiva în care este definită în DOM devine elementul rădăcină al aplicației. De exemplu



AngularJS este disponibil ca fișier JavaScript și este adăugat în HTML folosind tag. Aplicația ng la element spune AngularJS că div este elementul rădăcină și proprietarul aplicației AngularJS. Aplicația AngularJS pornește de la acel element și orice este codul AngularJS, este scris în interiorul acestuia.

2. ng-model: Această directivă leagă valoarea de pe pagina web, mai ales de la câmpul de intrare la variabila de aplicație. Practic, această directivă permite trimiterea de date de la intrare în aplicația AngularJS, care poate fi folosită în altă parte. De exemplu

Introduce:

Directiva model ng leagă valoarea de intrare la variabila de aplicație numită „input”. Vom vedea apoi cum putem afișa aceeași valoare pe pagina web în următorul exemplu.

3. ng-bind: Această directivă leagă valoarea din aplicația AngularJS la pagina web. adică permite redirecționarea datelor din aplicație către etichetele HTML. De exemplu

Introduce:

Datele pe care le-am capturat folosind directiva „model ng” din variabila aplicației „input” sunt legate de elementul tag

folosind „ng-bind”. Putem rula acum această aplicație și vom vedea cum actualizează dinamic AngularJS valoarea introdusă pe pagină.

Alături de acestea, există câteva alte directive disponibile în AngularJS care sunt importante.

4. ng-repere: Această directivă repetă un element HTML și este utilizată pe o serie de obiecte. Această directivă este foarte utilă în scenarii precum afișarea elementelor tabelului pe o pagină web.

5. ng-init: Această directivă este utilizată pentru inițializarea valorilor aplicației AngularJS înainte de a încărca o pagină web.

Crearea de noi directive

putem crea propriile noastre directive personalizate împreună cu directivele AngularJS existente. Este foarte ușor să creezi directive noi folosind doar JavaScript. Noile directive sunt create prin utilizarea „. funcție directivă ”. De exemplu



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));



var app = angular.module("appName", ());
app.directive("customDirective", function() (
return (
template : " Welcome to AngularJS Directives..! "
);
));

Angular.module este o funcție AngularJS care creează un modul. Am creat o directivă personalizată numită directivă personalizată pentru care este scrisă funcția. Ori de câte ori folosim această directivă pe pagina noastră web, această funcție va fi executată. În acest caz, este un șablon care returnează care conține cod HTML.

În timp ce directiva de denumire, trebuie să utilizăm convenția de denumire a cazurilor de cămilă și, în timp ce o invocăm, trebuie să folosim convenția de denumire separată „-”

Există patru modalități prin care putem invoca directive,

Numele elementului

Așa cum se folosește în ultimul exemplu:

Atribut

Clasă

Pentru a invoca directiva folosind numele clasei, trebuie să adăugăm proprietatea restrictivă cu valoarea „C” în timp ce o definim.

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “C”,
template : " Welcome to AngularJS Directives..! "
);
));

cometariu

Pentru a invoca directiva folosind comentarii, trebuie să adăugăm proprietatea restricționării cu valoarea „M” în timp ce o definim.

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

app.directive("customDirective", function() (
return (
restrict : “M”,
replace: true,
template : " Welcome to AngularJS Directives..! "
);
));

Proprietatea înlocuiește: adevărat este obligatoriu și va înlocui comentariul inițial cu directiva, altfel comentariul ar fi invizibil.

Concluzie - Directivele AngularJS

Deci, Directiva este o caracteristică foarte puternică disponibilă în AngularJS. Directiva permite introducerea sintaxei noi, sunt ca markeri și ne permite să le atașăm un comportament special. Există directive disponibile în AngularJS, care sunt foarte utile, de asemenea, putem defini propriile noastre directive personalizate și le putem folosi. Directivele personalizate permit dezvoltatorilor o mare flexibilitate și libertate. Directivele adaugă funcționalități noi în HTML-ul existent, cu stil și caracteristici inovatoare.

Articole recomandate

Acesta este un ghid al directivelor AngularJS. Aici vom discuta despre cele trei directive încorporate principale care împart cadrul AngularJS în trei părți majore. De asemenea, puteți arunca o privire la următoarele articole pentru a afla mai multe -

  1. Versiuni de HTML
  2. Cadre în Java
  3. AngularJS Architecture
  4. Stiluri de listă HTML

Categorie:

Dezvoltare de software