Pregled AngularJS

U tvrtki Brat Tech LLC 2009. godine, programeri Misko Hevery i Adam Abrons razvili su okvir AngularJS nakon kojeg se dogodila revolucija u razvoju i izgradnji aplikacija za jednu stranicu. AngularJS je okvir javascripta, koji povezuje Html elemente sa JavaScript objektima. Vezivanje podataka i ubrizgavanje ovisnosti neke su od vodećih značajki AngularJs-a koje štede vrijeme u pisanju dugih kodova što olakšava rad programerima i preglednicima. Kako je to postignuto detaljno ćemo objasniti dalje, ali zasad se samo sjećate tih terminologija. U ovoj ćemo temi saznati više o AngularJS verziji.

Verzije AngularJS

AngularJS je inačica Angular 1.x i nakon toga se razvija Angular 2 koji se razlikuje od Angular 1.x. djela.

Zašto inačica AngularJS i kako to funkcionira?

AngularJS nam pomaže u razvoju interaktivnih aplikacija za jednu stranicu. Pod jednostrukim stranicama podrazumijevam da će jedna stranica koju ste posjetili učitati sav ostali sadržaj pomoću JavaScripta. Ova značajka pomaže aplikaciji da bude brz i učinkovit.

Kad za izradu aplikacija koristimo javascript i html, morat ćete vezati prikaz pomoću modela JS funkcija i objekata. Ali ako mislite da se dvosmjerno povezivanje podataka u praktičnoj industrijskoj primjeni isti pristup postaje zamorno s dugim kodovima. To je jedan od glavnih razloga zašto je bilo potrebno učiti i razvijati AngularJS.

Vrijeme je da naučite neke osnovne koncepte prije nego što započnete s razvijanjem aplikacija na kojima je AngularJS izgrađen:

  • Model: Model sadrži podatke, objekte i logiku.
  • Prikaz: to je vizualna prezentacija aplikacije koja se također naziva korisničko sučelje.
  • Pogledajte na model dvosmjerno vezanje: Javascript objekt tj. Objekt koji želite povezati s Html DOM-om za npr. Tekstualni okvir, unos ili bilo koju Html oznaku i obrnuto, može se lako izvesti pomoću nekih unaprijed definiranih knjižnica AngularJS.
  • Kontroleri: Kontroleri su funkcije javascripta koje povezuju model i prikaz.
  • Usluge: AngularJS usluge su funkcije javascripta koje izvode određene zadatke ili funkcionalnosti koje održava i testira JavaScript. Neki od primjera usluga su $ doseg, $ http, $ rootScope.
  • Izrazi: Izrazi se koriste za povezivanje podataka s Html. Ova značajka je poznata i kao interpolacija. Izrazi se pišu ((izraz)) kovrčavim zagradama. Izrazi se ocjenjuju i mogu se pisati bez html tagova.
  • Moduli: Moduli djeluju kao spremnik koji sadrži različite dijelove kutne aplikacije kao što su kontroler, usluge, direktive itd.

Direktive i opseg

Usredotočimo se na neke unaprijed definirane smjernice i na to kako one zapravo djeluju. Većina ove direktive započinje s 'ng' preuzetim iz Angular-a

1. Obim

  • Okvir definira javascript objekt s kojim podaci mogu biti dostupni od Model do HTML-a. Scope djeluje kao spojnica između ta dva.
  • Neke usluge obuhvaćaju $ doseg, $ rootScope. '$' definira da su ove usluge unaprijed definirane i ne mogu ih se mijenjati. Zapamtite, HTML ne razlikuje velika i mala slova, ali AngularJS razlikuje velika i mala slova, pa će $ Scope dovesti grešku kao nedefiniranu.
  • Potrebno ih je izjaviti u našoj funkciji kontrolera, a kutni će ih automatski ubrizgati.

2. ng-kontroler

  • Ova se direktiva koristi za stvaranje instancije / objekta kontrolera preko kojih će HTML DOM komunicirati sa stvarnom logikom.
  • HTML kaže da će se tijekom stvaranja Html DOM-a zanemariti bilo koja oznaka s '-'.
  • Jednom kada se stvori DOM Kutni interpreter pronalazi ng-regulator direktive i kreira instancu određenog kontrolera koji također pruža uslugu $ range.
  • Na jednoj HTML stranici može biti puno ng-kontrolera.

3. ng-app

  • Ova direktiva djeluje kao spremnik koji sadrži kontrolere, direktive, filtre, izraze itd. Registrira ili pokreće aplikaciju ili modul.
  • U vašem HTML-u postoji samo jedna ng-aplikacija. Pod jednom ng-aplikacijom može biti mnogo ng-kontrolera.

Ovo inicira objekt aplikacije pomoću usluge $ rootScope.

  • Stoga su $ rootScope varijable / funkcije dostupne u kompletnoj aplikaciji.

4. ng-model

  • ng-model se koristi za vezanje podataka iz html-a za objekt modela. Omogućuje dvosmjerno vezivanje.

5. ng-if

  • Za izvršavanje uvjetnih izjava na Html oznakama ng-if se koristi. Ako uvjet postane neistinit, DOM ne uključuje taj div na DOM.

6. ng-vezati

  • Umjesto (()) za interpolaciju, može se koristiti i ng-bind.

7. ng-invalid

  • Na temelju uvjeta, element u pogledu može se onemogućiti.

8. ng-show

  • Ako je navedeni uvjet za ng-show istinit, tada je određeni element prikazan na DOM-u.

9. ng-sakriti

  • Ako je navedeni uvjet za ng-hidjera istinit, tada će određeni element ostati skriven u DOM-u.

10. ng-ponoviti

  • Ponovit će određeni div ili raspon na Html-u uz duljinu raspona ili popisa.

11. ng-klik

  • Kada klikne na html element, izvršit će ponuđenu funkcionalnost ili zadatak.

Savjet: Najbolji način da naučite bilo koji jezik je da ga šifrirate. Pa da vidimo naš prvi kod.

Primjeri verzije AngularJS

Evo nekoliko primjera danih u nastavku




First Name:
Last Name:
Your name is: (( fname +" "+ lname))




First Name:
Last Name:
Your name is: (( fname +" "+ lname))




First Name:
Last Name:
Your name is: (( fname +" "+ lname))




First Name:
Last Name:
Your name is: (( fname +" "+ lname))




First Name:
Last Name:
Your name is: (( fname +" "+ lname))




First Name:
Last Name:
Your name is: (( fname +" "+ lname))




First Name:
Last Name:
Your name is: (( fname +" "+ lname))

Izlaz:

Ime: Josip
Prezime: Alex
Vaše ime je: Joseph Alex

Neke su točke koje se trebaju usredotočiti odozgo na isječak kodiranja:

  • U retku 3 na stranicu se dodaje datoteka angular.min.js koja će učitati sve potrebne knjižnice za pokretanje AngularJS aplikacije.
  • AngularJS uglavnom ima 2 knjižnice angular.js i komprimiranu verziju ove datoteke kao angular.min.js.
  • U retku 5 možete vidjeti direktivu kao ng-aplikaciju koju Html zanemaruje dok stvara Html DOM, a AngularJS preuzima jednu od njenih smjernica za pokretanje aplikacije.
  • U retku 6, 7 koristi se ng-model koji će tekst koji ćete unijeti u tekstni okvir vezati za naziv i ime. Zapamtite da ove varijable razlikuju velika i mala slova.
  • U retku 8 vidjet ćete izraz ((fname + ”“ + lname)) koji kutni će ocijeniti i prikazati podatke koje unesete u tekstne okvire. To je poznato kao interpolacija.

Istražimo još jednim primjerom:



var app = angular.module('CustomerApp', ());
controller('firstController', function($scope)(
$scope.customerName = 'Joe';
$scope.customerAge = '26';
));

Ime:

Prezime:

Naziv kupca je ((customerName)), a dob je ((customerAge))

U ovom primjeru, u retku 5 stvara se aplikacija s nazivom CustomerApp koja će sadržavati sve dijelove aplikacije. U sljedećem retku stvara se kontroler i daje mu ime firstController. $ doseg deklariran je kao funkcijski parametar. AngularJS će ga automatski ubrizgati u aplikaciju za izravnu upotrebu, programer ga ne mora izričito stvarati.

Ova značajka poznata je i kao ubrizgavanje ovisnosti. Na sličan način se ng-kontroler koristi za isti kontroler pod oznakom ng-app. Zapamtite opseg aplikacije ili kontrolera bit će mjesto gdje se završava div ili sve što definirate aplikaciju ili kontroler. U tom slučaju ne možete pristupiti kontroleru ili aplikaciji nakon retka 16.

Preporučeni članci

Ovo je vodič što je inačica AngularJS. Ovdje razgovaramo o Verzijama AngularJS s direktivama, opsegom i kako funkcionira AngularJS. Možete također pogledati sljedeće članke da biste saznali više -

  1. AngularJS Arhitektura
  2. Kutna aplikacija JS
  3. Ispitivanje kutne jedinice JS
  4. Karijera u kutnomJS
  5. Što je ugaoni 2?

Kategorija:

Razvoj softvera