Što je AngularJS? Architekstura, značajke i prednosti

Što je AngularJS?

AngularJS je Model-View-Controller framework otvorenog koda napisan u JavaScriptAngularJS je bio jedan od najpopularnijih web frameworka 2010-ih i koristi se za razvojping uglavnom aplikacije s jednom stranicom. Ovaj okvir razvila je grupa programera iz Google sebe.

Zbog čiste podrške od Google i idejama iz širokog foruma zajednice, okvir je ažuriran tijekom cijelog svog aktivnog vijeka. Također je uključivao vodeće razvojne trendove tog razdoblja, zbog čega se toliko produkcijskog koda i danas izvodi na njemu.

Vrijedi odmah razjasniti jednu terminološku točku. AngularJS se široko opisuje kao MVC framework, što je korisna početna točka. Međutim, sam AngularJS tim je preferirao oznaku MVW (Model-Prikaz-Šta god), jer se runtime ponaša bliže Model-View-ViewModel nego klasičnom MVC-u. Službeni AngularJS dokumentacija naziva ga strukturnim okvirom za dinamičke web aplikacije. Nakon što smo to riješili, evo kako se dijelovi uklapaju.

AngularJS Architektura

AngularJS prati MVC arhitekturu. Dijagram MVC okvira prikazan je u nastavku:

AngularJS Archidijagram strukture

Svaki od tri sloja ima jasan zadatak:

• Kontroler predstavlja sloj koji ima poslovnu logiku. Korisnički događaji pokreću funkcije koje su pohranjene unutar vašeg kontrolera. Korisnički događaji dio su kontrolera.
• Prikazi se koriste za predstavljanje prezentacijskog sloja koji se pruža krajnjim korisnicima.
• Modeli se koriste za predstavljanje vaših podataka. Podaci u vašem modelu mogu biti jednostavni poput primitivnih deklaracija. Na primjer, ako održavate studentsku aplikaciju, vaš podatkovni model može imati samo studentski ID i ime. Ili također može biti složeno jer ima strukturirani podatkovni model. Ako održavate aplikaciju za vlasništvo automobila, možete imati strukture za definiranje samog vozila u smislu njegovog kapaciteta motora, kapaciteta sjedala itd.

U praksi, kontroler rijetko ručno unosi podatke u prikaz. AngularJS prati model i osvježava prikaz umjesto vas, a tu automatsku sinkronizaciju pokreće skup značajki opisan u nastavku.

Značajke AngularJS

AngularJS ima sljedeće ključne značajke koje ga čine jednim od najmoćnijih frameworkova na tržištu:

1. VMC – Okvir je izgrađen na poznatom konceptu MVC (Model-View-Controller). Ovo je obrazac dizajna koji se koristi u svim modernim web aplikacijama. Ovaj obrazac temelji se na dijeljenju sloja poslovne logike, podatkovnog sloja i prezentacijskog sloja u zasebne odjeljke. Podjela na različite dijelove je napravljena kako bi se svakim lakše upravljalo.
2. Vezanje podatkovnog modela – Ne morate pisati poseban kod za povezivanje podataka s HTML kontrolama. To se može učiniti pomoću AngularJS-a jednostavnim dodavanjem nekoliko isječaka koda.
3. Pisanje manje koda – Prilikom izvođenja DOM manipulacije puno JavaScript bilo je potrebno napisati za dizajn bilo koje aplikacije. Ali s AngularJS-om, bit ćete iznenađeni manjom količinom koda koju trebate napisati za manipulaciju DOM-om.
4. Jedinica Ispitivanje spremni – Dizajneri u Google ne samo da je razvio AngularJS, već je razvio i okvir za testiranje pod nazivom „Karma“ koji pomaže u dizajniranju jediničnih testova za AngularJS aplikacije.
5. Direktive – Markeri kao što su ng-aplikacija, ng-model i ng-ponavljanje dodati ponašanje običnim HTML elementima.

Ove značajke je najlakše razumjeti nakon što ih pokrenete, stoga sljedeći odjeljak izrađuje funkcionalnu stranicu od nule.

Kako postaviti AngularJS i izraditi svoju prvu aplikaciju

Čitati o povezivanju podataka je jedno, a gledati kako radi je drugo. AngularJS ne treba upravitelj paketa, bundler niti kompajler, pa je vaša prva aplikacija jedna HTML datoteka koja se pokreće izravno s vašeg tvrdog diska.

Korak 1) Dodajte AngularJS biblioteku

Učitajte biblioteku s CDN-a s jednom oznakom skripte. Verzija 1.8.3 je konačno izdanje AngularJS-a, stoga prikvačite svoju stranicu na tu točnu verziju, a ne na plutajuću.

Korak 2) Označite korijen aplikacije s ng-app

Direktiva ng-app govori AngularJS kompajleru koji dio stranice posjeduje. Stavljanjem na html oznaku cijeli dokument se predaje frameworku, a vrijednost koju joj date imenuje modul koji ćete stvoriti.

Korak 3) Povežite podatke s ng-modelom i izrazom

Direktiva ng-model veže ulazni element za svojstvo na području važenja, a izraz s dvostrukom zagradom ispisuje isto svojstvo negdje drugdje na stranici. Budući da je vezanje dvosmjerno, typing u okviru odmah ažurira zaglavlje, bez vlastitog rukovatelja događajima.

Korak 4) Dodajte kontroler za logiku

Kontroler je običan JavaSkriptna funkcija koja prima objekt $scope i postavlja početne vrijednosti na njega. Registriranjem na modulu postaje dostupan direktivi ng-controller.

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>

  <div ng-controller="GreetController">
    <input type="text" ng-model="name" placeholder="Enter your name">
    <h3>Hello {{ name }}!</h3>
  </div>

  <script>
    // Step 1: create the module named in ng-app
    angular.module("helloApp", [])
      // Step 2: register a controller on that module
      .controller("GreetController", function ($scope) {
        $scope.name = "World";
      });
  </script>
</body>
</html>

Korak 5) Pokrenite stranicu i provjerite rezultat

Spremite datoteku kao index.html i otvorite je u bilo kojem pregledniku. Naslov u početku glasi "Pozdrav svijete!", a datoteka se prepisuje svakim pritiskom tipke. Nije uključen web poslužitelj niti korak izgradnje.

Ako se ništa ne pojavi, otvorite konzolu preglednika i potvrdite da je CDN skripta učitana i da naziv modula unutar ng-app-a točno odgovara nazivu proslijeđenom angular.module-u, jer neusklađenost tiho prekida. Ta mala stranica već pokazuje prednosti opisane u nastavku.

Prednosti AngularJS

Evo prednosti AngularJS:

• Budući da se radi o frameworku otvorenog koda, možete očekivati ​​da će broj pogrešaka ili problema biti minimalan.
• Dvosmjerno povezivanje – AngularJS održava podatkovni i prezentacijski sloj sinkroniziranim. Ne morate pisati dodatne JavaSkriptni kod za sinkronizaciju podataka u vašem HTML kodu i podatkovnom sloju. AngularJS će to automatski učiniti za vas. Samo trebate odrediti koja je kontrola vezana za koji dio vašeg modela.
• Usmjeravanje – AngularJS se može pobrinuti za usmjeravanje, što znači prelazak s jednog prikaza na drugi. Ovo je ključna osnova aplikacija s jednom stranicom; gdje se možete kretati između različitih funkcionalnosti u svojoj web aplikaciji na temelju interakcije korisnika, a da i dalje ostanete na istoj stranici.
• AngularJS podržava testiranje, oboje Ispitivanje jedinicei Ispitivanje integracije.
• Proširuje HTML pružajući vlastite elemente koji se nazivaju direktive. Na višoj razini, direktive su oznake na DOM elementu (kao što su atribut, naziv elementa i komentar ili CSS klasa) koje govore AngularJS HTML kompajleru da tom DOM elementu pridruže određeno ponašanje. Ove direktive pomažu u proširenju funkcionalnosti postojećih HTML elemenata kako bi se vašoj web aplikaciji dala veća snaga.

Prednosti AngularJS

Uravnotežen pogled je jednako važan, pa su kompromisi navedeni u nastavku.

Nedostaci i ograničenja AngularJS-a

Svaki framework nešto žrtvuje, a AngularJS nije iznimka. Ovo su ograničenja koja najčešće prijavljuju timovi koji održavaju AngularJS aplikacije:

• Nema vlastitog sigurnosnog sloja – AngularJS ne pruža ni autentifikaciju ni autorizaciju, pa se oboje mora provoditi na poslužitelju.
• Potpuna ovisnost o JavaScript – Ako posjetitelj onemogući JavaSkripta, stranica se vraća na goli markup i ne prikazuje se.
• Performanse ciklusa sažetka – Promjene se otkrivaju ponovljenim uspoređivanjem promatranih vrijednosti, pa stranice s nekoliko tisuća povezivanja mogu djelovati tromo.
• Strma krivulja učenja – Opsezi, direktive, tvornice, usluge i pružatelji usluga preklapaju se i često postoji nekoliko načina za postizanje istog rezultata.
• Vidljivost tražilice – Prikazi se sastavljaju u pregledniku, pa je potreban dodatni rad poput prethodnog renderiranja prije nego što roboti za indeksiranje pouzdano indeksiraju stranice.
• Nema daljnjih ažuriranja – Od 31. prosinca 2021. ne postoje službene zakrpe, pa novootkrivena ranjivost ostaje neispravljena osim ako komercijalni dobavljač ne isporuči ispravku.

Ta posljednja točka gura većinu timova prema nasljednom okviru, koji je drugačiji proizvod unatoč zajedničkom imenu.

AngularJS vs Angular: Koja je razlika?

AngularJS i Angular se često brkaju jer su im nazivi vrlo bliski, ali to su odvojeni okviri s različitim jezicima, arhitekturama i linijama izdanja. AngularJS se odnosi samo na seriju 1.x opisanu na ovoj stranici. Angular znači verziju 2 i svaku verziju nakon nje, potpuno prepisanu verziju objavljenu 2016. godine koja se još uvijek aktivno razvija. Code ne kreće se između njih bez namjernog migracijskog rada.

Praktična posljedica je da se AngularJS kontroler ne može jednostavno ubaciti u Angular projekt. Migracija znači prepisivanje svakog kontrolera kao komponente, stoga je planirajte kao pravi inženjerski rad, a ne kao nadogradnju. Ukratko, tretirajte AngularJS kao vještinu održavanja, a Angular kao platformu za novi razvoj.

Pitanja i odgovori