Hvad er AngularJS? ArchiTekstur, funktioner og fordele

Hvad er AngularJS?

AngularJS er et open source Model-View-Controller framework skrevet i JavaScriptAngularJS var et af de mest populære webframeworks i 2010'erne, og det bruges til udviklingping primært Single Page-applikationer. Dette framework er udviklet af en gruppe udviklere fra Google Selv.

På grund af den rene støtte fra Google og ideer fra et bredt fællesskabsforum, blev frameworket holdt opdateret gennem hele sin aktive levetid. Det inkorporerede også de førende udviklingstendenser fra den periode, hvilket er grunden til, at så meget produktionskode stadig kører på det i dag.

Én terminologisk pointe er værd at afklare tidligt. AngularJS beskrives bredt som et MVC-framework, hvilket er et nyttigt udgangspunkt. AngularJS-teamet selv foretrak dog betegnelsen MVW (Model-View-Whatever), fordi runtime-funktionen opfører sig tættere på Model-View-ViewModel end på klassisk MVC. Den officielle AngularJS-dokumentation kalder det et strukturelt framework for dynamiske webapplikationer. Når det er på plads, er det sådan, brikkerne passer sammen.

AngularJS Architecture

AngularJS følger MVC-arkitekturen. Diagrammet over MVC-frameworket er vist nedenfor:

AngularJS Architecture diagram

Hvert af de tre lag har en klar opgave:

• Controlleren repræsenterer det lag, der har forretningslogikken. Brugerhændelser udløser de funktioner, der er gemt inde i din controller. Brugerhændelserne er en del af controlleren.
• Visninger bruges til at repræsentere præsentationslaget, som leveres til slutbrugerne.
• Modeller bruges til at repræsentere dine data. Dataene i din model kan være så enkle som blot at have primitive erklæringer. For eksempel, hvis du vedligeholder en elevapplikation, kan din datamodel blot have et elev-id og et navn. Eller det kan også være komplekst ved at have en struktureret datamodel. Hvis du vedligeholder en ansøgning om bilejerskab, kan du have strukturer til at definere selve køretøjet med hensyn til dets motorkapacitet, sædekapacitet osv.

I praksis skubber controlleren sjældent data ind i visningen manuelt. AngularJS overvåger modellen og opdaterer visningen for dig, og den automatiske synkronisering drives af de funktioner, der beskrives nedenfor.

Funktioner af AngularJS

AngularJS har følgende nøglefunktioner, der gør det til et af de kraftfulde frameworks på markedet:

1. MVC – Rammen er bygget på det berømte koncept af MVC (Model-View-Controller). Dette er et designmønster, der bruges i alle moderne webapplikationer. Dette mønster er baseret på opdeling af forretningslogiklaget, datalaget og præsentationslaget i separate sektioner. Opdelingen i forskellige sektioner er gjort, så hver enkelt kan administreres lettere.
2. Datamodelbinding – Du behøver ikke at skrive speciel kode for at binde data til HTML-kontrollerne. Dette kan gøres med AngularJS ved blot at tilføje et par kodestykker.
3. Skriver mindre kode – Når du udfører DOM-manipulation en masse JavaScript skulle skrives for at designe enhver applikation. Men med AngularJS vil du blive overrasket over den mindre mængde kode, du skal skrive til DOM-manipulation.
4. Enhed Test klar – Designerne hos Google udviklede ikke kun AngularJS, men udviklede også et testframework kaldet "Karma", som hjælper med at designe enhedstests til AngularJS-applikationer.
5. Direktiver – Markører som f.eks. ng-app, ng-model og ng-repeat Tilføj adfærd til almindelige HTML-elementer.

Disse funktioner er nemmest at forstå, når du først har kørt dem, så næste afsnit opbygger en fungerende side fra bunden.

Sådan konfigurerer du AngularJS og bygger din første applikation

At læse om databinding er én ting, og at se det virke er noget andet. AngularJS behøver ingen pakkehåndtering, ingen bundler og ingen compiler, så din første applikation er en enkelt HTML-fil, der kører direkte fra din harddisk.

Trin 1) Tilføj AngularJS-biblioteket

Indlæs biblioteket fra et CDN med ét script-tag. Version 1.8.3 er den endelige AngularJS-udgivelse, så fastgør din side til præcis den version i stedet for en flydende version.

Trin 2) Marker applikationens rod med ng-app

Direktivet ng-app fortæller AngularJS-compileren, hvilken del af siden den ejer. Når du placerer det på html-tagget, overføres hele dokumentet til frameworket, og den værdi, du giver det, navngiver det modul, du er ved at oprette.

Trin 3) Bind data med ng-model og et udtryk

ng-model-direktivet binder et inputelement til en egenskab på omfanget, og et dobbeltparentesudtryk udskriver den samme egenskab et andet sted på siden. Fordi binding er tovejs, typing i boksen opdaterer overskriften med det samme, uden din egen hændelseshandler.

Trin 4) Tilføj en controller til logikken

En controller er en almindelig JavaScriptfunktion, der modtager $scope-objektet og sætter startværdier på det. Registrering af det på modulet gør det tilgængeligt for ng-controller-direktivet.

<!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>

Trin 5) Kør siden og tjek resultatet

Gem filen som index.html, og åbn den i enhver browser. Overskriften lyder først "Hej Verden!", og den omskriver sig selv ved hvert tastetryk. Der er ingen webserver eller noget byggetrin involveret.

Hvis der ikke vises noget, skal du åbne browserkonsollen og bekræfte, at CDN-scriptet er indlæst, og at modulnavnet i ng-app matcher det navn, der er sendt til angular.module, præcist, da en uoverensstemmelse fejler lydløst. Den lille side demonstrerer allerede de styrker, der beskrives nedenfor.

AngularJS fordele

Her er fordelene ved AngularJS:

• Da det er et open source-framework, kan du forvente, at antallet af fejl eller problemer er minimalt.
• Tovejsbinding – AngularJS holder data- og præsentationslaget synkroniseret. Du behøver ikke at skrive yderligere JavaScriptkode for at holde dataene i din HTML-kode og dit datalag synkroniseret. AngularJS gør dette automatisk for dig. Du skal blot angive, hvilken kontrol der er bundet til hvilken del af din model.
• Routing – AngularJS kan håndtere routing, hvilket betyder at man bevæger sig fra én visning til en anden. Dette er det grundlæggende i enkeltsidede applikationer; hvor man kan skifte til forskellige funktioner i sin webapplikation baseret på brugerinteraktion, men stadig forblive på den samme side.
• AngularJS understøtter testning, både Enhedstestog Integrationstest.
• Den udvider HTML ved at levere sine egne elementer kaldet direktiver. På et overordnet niveau er direktiver markører på et DOM-element (såsom en attribut, et elementnavn og en kommentar eller en CSS-klasse), der fortæller AngularJS HTML-compileren, at den skal knytte en bestemt adfærd til det pågældende DOM-element. Disse direktiver hjælper med at udvide funktionaliteten af ​​eksisterende HTML-elementer for at give din webapplikation mere kraft.

Fordele ved AngularJS

Et afbalanceret synspunkt er lige så vigtigt, så afvejningerne er beskrevet nedenfor.

Ulemper og begrænsninger ved AngularJS

Alle frameworks bytter noget væk, og AngularJS er ingen undtagelse. Disse er de begrænsninger, der oftest rapporteres af teams, der vedligeholder AngularJS-applikationer:

• Intet eget sikkerhedslag – AngularJS tilbyder hverken autentificering eller autorisation, så begge skal håndhæves på serveren.
• Total afhængighed af JavaScript – Hvis en besøgende deaktiverer JavaScript, siden vender tilbage til ren markup og gengives ikke.
• Fordøjelsescyklussens ydeevne – Ændringer registreres ved gentagne gange at sammenligne overvågede værdier, så sider med flere tusinde bindinger kan føles træge.
• En stejl indlæringskurve – Omfang, direktiver, fabrikker, tjenester og udbydere overlapper hinanden, og der findes ofte flere måder at opnå det samme resultat på.
• Søgemaskine synlighed – Visninger samles i browseren, så ekstra arbejde såsom præ-rendering er nødvendigt, før crawlere indekserer sider pålideligt.
• Ingen yderligere opdateringer – Siden 31. december 2021 har der ikke eksisteret officielle programrettelser, så en nyopdaget sårbarhed forbliver urettet, medmindre en kommerciel leverandør leverer en rettelse.

Det sidste punkt skubber de fleste teams mod efterfølgerframeworket, som er et andet produkt på trods af det fælles navn.

AngularJS vs. Angular: Hvad er forskellen?

AngularJS og Angular forveksles ofte, fordi navnene er så tæt på hinanden, men de er separate frameworks med forskellige sprog, arkitekturer og udgivelseslinjer. AngularJS refererer kun til 1.x-serien, der er beskrevet på denne side. Angular betyder version 2 og alle versioner efter den, en fuld omskrivning udgivet i 2016, der stadig er aktivt under udvikling. Code bevæger sig ikke mellem dem uden bevidst migrationsarbejde.

Den praktiske konsekvens er, at en AngularJS-controller ikke blot kan overføres til et Angular-projekt. Migrering betyder at omskrive hver controller som en komponent, så planlæg det som rigtigt ingeniørarbejde snarere end en opgradering. Kort sagt, behandl AngularJS som en vedligeholdelsesfærdighed og Angular som platformen for ny udvikling.

Ofte Stillede Spørgsmål