Meniu

Directiva AngularJS cu primul nostru exemplu AngularJS

  • Principal
  • Alte
  • Directiva AngularJS cu primul nostru exemplu AngularJS

angularjs directive with our first angularjs example

Încercați Instrumentul Nostru Pentru Eliminarea Problemelor

Directiva AngularJS cu primul exemplu AngularJS:

Noi am avut un scurtă introducere în AngularJS în tutorialul nostru anterior. Acest tutorial vă va explica faptele importante pe care trebuie să le cunoașteți despre AngularJS.

AngularJS este un cadru de aplicații web open-source bazat pe JavaScript.

Este întreținut de Google Corporation și de o comunitate mare. AngularJS este un răspuns la diferitele dezavantaje care se întâlnesc pentru a formula aplicații cu o singură pagină.

Citiți prin intermediul nostru Întreaga serie AngularJS pentru cunoștințe aprofundate asupra conceptului AngularJS.

autentificarea necesită numele de utilizator și parola routerului

Directiva și exemplul AngularJS

Cadrul de aplicații AngularJS acționează ca un șablon și poate reduce provocările cu care se confruntă în timpul dezvoltării aplicațiilor web.

Ce veți învăța:

Prezentare generală a AngularJS

AngularJS a fost lansat de Google pe 20aOctombrie 2010 și astăzi a devenit un cadru semnificativ pentru diverse aplicații de interfață cu o singură pagină.

Acesta este motivul pentru care AngularJS și-a menținut poziția, în ciuda dezvoltării tehnologice într-un ritm vertiginos. Sistemul bazat pe interfața multiplataformă îl face și mai eficient.

AngularJS completează și beneficiază de Apache Cordova, care este un cadru care este utilizat pentru aplicații mobile pe mai multe platforme. Are viziunea de a îmbunătăți experiența și de a simplifica testarea și dezvoltarea aplicațiilor web și oferă un cadru robust pentru dezvoltarea aplicațiilor AngularJS.

De ce să utilizați AngularJS?

Mai jos sunt prezentate diferitele caracteristici și motive pentru care AngularJS ar trebui utilizat în dezvoltarea aplicației web.

  1. Legarea datelor: Platforma oferă sincronizarea automată a datelor între model și conținutul vizualizării și, prin urmare, vă economisește timpul și efortul într-o mare măsură.
  2. Controlor: Acestea sunt JavaScript care sunt legate de un anumit domeniu de aplicare.
  3. Servicii: AngularJS are multe servicii încorporate. De exemplu $ https
  4. Filtre: Acest lucru ajută la selectarea unui subset de articole dintr-un tablou și îl returnează într-un tablou nou.
  5. Directivele: Acestea sunt markeri pe elemente DOM, cum ar fi atribute, elemente CSS, etc. Acestea pot fi utilizate ca etichete personalizate de HTML.
  6. Rutare: Ajută la crearea aplicațiilor cu o singură pagină. Acesta este specificat în adresa URL după semnul # și vă permite să creați adrese URL diferite pentru conținut diferit din aplicația dvs.
  7. MVC: Stabilește pentru model, vizualizare și controler. Este un model de proiectare și este utilizat pentru divizarea unei aplicații în diferite părți, adică Model, Vizualizare și Controler.
  8. Conectare profundă: Această caracteristică a cadrului aplicației vă ajută să codificați starea aplicației în adresa URL pentru marcare. Mai târziu, aplicația poate fi restaurată și de la adresa URL în aceeași stare.
  9. Injecție de dependență: AngularJS are, de asemenea, un subsistem de injecție de dependență încorporat, care poate fi de ajutor dezvoltatorului pentru a face procesul de dezvoltare și testare mai ușor, coeziv și direct.
  10. Domeniu de aplicare: Acestea sunt obiectele care acționează ca un lipici între controler și vedere.

Cum se folosește AngularJS?

Personal, cred că nu există niciun cadru de dezvoltare de aplicații web front-end mai bun care este disponibil pe piață astăzi decât AngularJS.

Tutorialele despre modul de utilizare a AngularJS nu sunt frustrant de complexe și le-am găsit într-adevăr destul de ușor de urmat. Puteți profita de un sistem de legare bidirecțional, facilități de modelare, modularizare, sistem de injectare a dependenței, funcția AJAX Handling și celelalte caracteristici ale acestui cadru.

Înainte de inițierea codării, trebuie să știți despre conceptul MVC (Model, View și Controller), scriptul „Hello World” și diferitele caracteristici ale AngularJS.

Directivele AngularJS

AngularJS vă oferă un număr mare de directivelor care vă permit să asociați diferitele elemente HTML cu datele aplicației. Acestea sunt atributele de bază care încep cu cuvântul cheie ng- .

Cea mai importantă directivă pe care trebuie să o includeți pe orice pagină în timp ce utilizați AngularJS este prezentată mai jos.

ng-app -

Este punctul de plecare al aplicației AngularJS și trebuie adăugat la orice element care învelește partea de rest a paginii, cum ar fi elementul părții corpului. AngularJS caută acest aspect ori de câte ori pagina se încarcă și tinde să evalueze automat toate diferitele directive din cod.

Directivele AngularJS includ:

# 1) ng-app :Aceasta este utilizată pentru a porni aplicația AngularJS. Când pagina web care conține aplicația AngularJS este încărcată, aceasta pornește automat aplicația definind elementul rădăcină. O singură directivă ng-app ar trebui utilizată în codul dvs. HTML.

Cu toate acestea, dacă în codul HTML se găsesc mai multe directive ng-app, atunci va fi utilizată prima apariție.

Sintaxă:

{body of the HTML code}

# 2) de căldură :Aceasta este utilizată pentru a inițializa aplicația.

Oferă un set de valori care trebuie asociate cu variabile în scopul inițializării. Această directivă nu este adesea utilizată, deoarece inițializarea variabilelor are loc de obicei prin funcții specifice din cadrul proiectului.

Sintaxă:

# 3) ng-controller: Se utilizează atunci când inițializarea variabilelor trebuie făcută pe baza unei funcții; adică, fiecare dintre variabile trebuie inițializată pe baza logicii funcționale. AngularJS invocă funcția specificată în directiva ng-controller cu un obiect.

Sintaxă:

app.controller(‘name of your function’,function($object){ Body of the controller/function});

# 4) ng-model :Aceasta este utilizată pentru a lega valorile AngularJS de comenzile furnizate de aplicație. Pentru a fi specific, datele preluate de intrare prin controler și model vor fi legate de vizualizarea (w.r.t. model MVC) care va fi prezentată utilizatorului.

Sintaxă:

Your Variable to be binded : var app = angular.module('myApp', ('ngAnimate'));

ng-show și ng-hide: Aceste comenzi ascund și arată elementele, care se realizează prin setarea stilului de afișare CSS.

AngularJS vă permite, de asemenea, să definiți directive personalizate. Acestea sunt utilizate pentru a extinde funcționalitatea HTML și sunt definite folosind funcția „directivă”. Pur și simplu înlocuiesc elementul pentru care sunt activate.

Foaia de cheat AngularJS a fost un salvator de viață pentru mine. Există o serie de alte linii directoare pe care le puteți verifica pe Cheat Sheet. Puteți învăța chiar cum să construiți directive personalizate prin utilizarea AngularJS. Am găsit toate instrucțiunile și directivele platformei AngularJS pe Cheat Sheet pentru a simplifica multe probleme.

Exemplu AngularJS

Un exemplu simplu AngularJS poate fi scris după cum urmează:

Trebuie să creați un fișier HTML, De exemplu , angularjsexample.html așa cum se arată mai jos.

Welcome {{helloTo.title}} to the world of Tutorialspoint!

angular.module('myapp', ()) .controller('HelloController', function($scope) { $scope.helloTo = {}; $scope.helloTo.title = 'AngularJS'; });

În exemplul de mai sus, scriptul reprezintă AngularJS JavaScript.

Ați fi surprins să știți câte aplicații pe care le utilizați zilnic au fost dezvoltate pe platforma AngularJS.

Iată câteva nume:

  • Gardianul
  • PayPal
  • jetBlue
  • Lego
  • Lucrări superioare
  • Netflix
  • Liber profesionist
  • iStock

Este evident din numele de mai sus ca înălțime pe care o puteți atinge învățând să utilizați acest cadru. Aceste site-uri se află în partea de sus a jocului, iar o mare parte din succesul lor este cu siguranță eficiența site-urilor doar pentru că au fost dezvoltate pe AngularJS.

Concluzie

Dacă doriți să creați și să dezvoltați aplicații cu o singură pagină pentru dispozitive mobile sau chiar site-uri web, cum am fost odată - atunci nu căutați mai departe.

AngularJS este un ghișeu unic pentru dvs., deoarece acest site ajută și face dezvoltarea aplicațiilor mult mai confortabilă și coezivă. Nu este doar minunat pentru începători, dar pe măsură ce vă aprofundați, veți avea tendința de a învăța cu experiență și de a dezvolta aplicații excelente.

Între timp, în cazul în care treceți la versiuni mai recente, atunci nu trebuie să depuneți multe eforturi. Doar învățând câteva comenzi noi și înțelegând noi modificări, puteți începe să dezvoltați aplicații și în noile versiuni.

Urmăriți următorul nostru tutorial pentru a afla mai multe despre dezvoltarea aplicațiilor web cu o singură pagină folosind AngularJS.

PREV Tutorial | NEXT Tutorial

Lectură recomandată

^