AngularJS

Den här artikeln handlar om den första versionen av Angular-ramverket. För version 2 och senare, se Angular (webframework) .
AngularJS
Utvecklare Google
Initial release 20 oktober 2010 ; 12 år sedan ( 2010-10-20 )
Stabil frisättning
Edit this on Wikidata 1.8.3 / 7 april 2022 ; 10 månader sedan ( 7 april 2022 )
Förvar AngularJS Repository
Skrivet i JavaScript
Plattform JavaScript-motor
Storlek
167 kB produktion 1,2 MB utveckling
Typ Web ramverk
Licens MIT-licens
Hemsida angularjs .org  Edit this on Wikidata

AngularJS är ett utgått gratis JavaScript -baserat webbramverk med öppen källkod för att utveckla ensidiga applikationer . Det sköttes huvudsakligen av Google och en grupp av individer och företag. Det syftade till att förenkla både utvecklingen och testningen av sådana applikationer genom att tillhandahålla ett ramverk för klientsidans modell–vy–kontroller (MVC) och modell–vy–vymodell (MVVM) arkitekturer, tillsammans med komponenter som vanligtvis används i webbapplikationer och progressiva webbapplikationer .

AngularJS användes som frontend för MEAN -stacken, som bestod av MongoDB -databasen, Express.js webbapplikationsserverramverk, AngularJS självt (eller Angular ), och Node.js serverruntimemiljö.

problem med säkerhet, webbläsarkompatibilitet eller jQuery . Angular-teamet rekommenderar att uppgradera till Angular (v2+) som den bästa vägen framåt, men de gav också några andra alternativ.

Översikt

AngularJS-ramverket fungerade genom att först läsa HyperText Markup Language -sidan (HTML), som hade ytterligare anpassade HTML-attribut inbäddade i den. Angular tolkade dessa attribut som direktiv för att binda in- eller utmatade delar av sidan till en modell som representeras av standard JavaScript- variabler . Värdena för dessa JavaScript-variabler kan ställas in manuellt i koden eller hämtas från statiska eller dynamiska JSON -resurser.

AngularJS byggdes på tron ​​att deklarativ programmering skulle användas för att skapa användargränssnitt och ansluta mjukvarukomponenter , medan imperativ programmering var bättre lämpad för att definiera en applikations affärslogik . Ramverket anpassade och utökade traditionell HTML för att presentera dynamiskt innehåll genom tvåvägsdatabindning som möjliggjorde automatisk synkronisering av modeller och vyer. Som ett resultat avbetonade AngularJS explicit Document Object Model (DOM) manipulation med målet att förbättra testbarhet och prestanda.

AngularJS designmål inkluderade:

  • för att frikoppla DOM-manipulation från applikationslogik. Svårigheten med detta påverkas dramatiskt av hur koden är uppbyggd.
  • för att frikoppla klientsidan av en applikation från serversidan. Detta gör att utvecklingsarbetet fortskrider parallellt och möjliggör återanvändning av båda sidor.
  • att ge struktur för resan med att bygga en applikation: från design av användargränssnittet, genom att skriva affärslogiken, till testning.

AngularJS implementerade MVC-mönstret för att separera presentations-, data- och logikkomponenter. Med hjälp av beroendeinjektion tog Angular traditionellt tjänster på serversidan , såsom vyberoende kontroller, till webbapplikationer på klientsidan. Följaktligen kan mycket av bördan på servern minskas.

Omfattning

AngularJS använde termen "omfattning" på ett sätt som liknar grunderna för datavetenskap.

Omfattning i datavetenskap beskriver när i programmet en viss bindning är giltig. ECMA -262- specifikationen definierar scope som: en lexikal miljö där ett funktionsobjekt exekveras i webbskript på klientsidan; liknande hur omfattning definieras i lambdakalkyl .

Som en del av "MVC"-arkitekturen utgör scopet "Modell", och alla variabler som definieras i scopet kan nås av "View" såväl som "Controller". Kicken beter sig som ett lim och binder ihop "View" och "Controller".

Bootstrap

Uppgiften som utfördes av AngularJS bootstrapper inträffade i tre faser efter att DOM har laddats:

  1. Skapande av en ny injektor
  2. Sammanställning av direktiven som pryder DOM
  3. Koppling av alla direktiv till räckvidd

AngularJS-direktiven gjorde det möjligt för utvecklaren att specificera anpassade och återanvändbara HTML-liknande element och attribut som definierar databindningar och beteendet hos presentationskomponenter. Några av de mest använda direktiven var:

ng-animate
En modul ger stöd för JavaScript, CSS3 transition och CSS3 keyframe animation hooks inom befintliga kärndirektiv och anpassade direktiv.

Eftersom ng-*- attribut inte är giltiga i HTML-specifikationer kan data-ng-* också användas som ett prefix. Till exempel är både ng-app och data-ng-app giltiga i AngularJS.

ng-app
Deklarerar rotelementet i en AngularJS-applikation, enligt vilken direktiv kan användas för att deklarera bindningar och definiera beteende.
ng-aria
En modul för tillgänglighetsstöd för vanliga ARIA-attribut .
ng-bind
Ställer in texten i ett DOM-element till värdet av ett uttryck. Till exempel, <span ng-bind="name"></span> visar värdet för 'name' inuti span-elementet. Alla ändringar av variabeln "namn" i programmets omfattning återspeglas omedelbart i DOM.
ng-klass
Tillämpa villkorligt en klass, beroende på värdet av ett booleskt uttryck.
ng-controller
Anger en JavaScript-kontrollerklass som utvärderar HTML-uttryck.
ng-if
Basic if-satsdirektiv som instansierar följande element om villkoren är sanna. När villkoret är falskt tas elementet bort från DOM. När det är sant, infogas en klon av det kompilerade elementet igen.
ng-init
Anropas en gång när elementet initieras.
ng-modell
Liknar ng-bind , men etablerar en tvåvägs databindning mellan vyn och omfattningen.
ng-model-options
Ger inställning för hur modelluppdateringar görs.
ng-repeat
Instantiera ett element en gång per objekt från en samling.
ng-show & ng-hide
Visa eller dölj villkorligt ett element, beroende på värdet på ett booleskt uttryck. Visa och dölj uppnås genom att ställa in CSS-visningsstilen.
ng-switch
Villkorligt instansiera en mall från en uppsättning val, beroende på värdet av ett urvalsuttryck.
ng-view
Basdirektivet som ansvarar för att hantera rutter som löser JSON innan mallar renderas som drivs av specificerade kontroller.

Tvåvägs databindning

AngularJS tvåvägsdatabindning hade sin mest anmärkningsvärda funktion, vilket till stor del befriade serverns backend från mallansvar. Istället renderades mallar i vanlig HTML enligt data som fanns i ett omfång som definierats i modellen. Tjänsten $scope i Angular upptäckte ändringar i modellsektionen och modifierade HTML-uttryck i vyn via en kontroller. Likaså återspeglades eventuella förändringar av vyn i modellen. Detta kringgick behovet av att aktivt manipulera DOM och uppmuntrade bootstrapping och snabb prototypframställning av webbapplikationer. AngularJS upptäckte förändringar i modeller genom att jämföra de aktuella värdena med värden som lagrats tidigare i en process av smutsig kontroll, till skillnad från Ember.js och Backbone.js som triggade lyssnare när modellvärdena ändrades.

$watch
är en kantig metod som används för smutsig kontroll. Varje variabel eller uttryck som tilldelas i $scope ställer automatiskt upp ett $watchExpression i vinkel. Så att tilldela en variabel till $scope eller använda direktiv som ng-if, ng-show, ng-repeat etc. skapar alla klockor i vinkelomfattning automatiskt. Angular upprätthåller en enkel array av $$watchers i $scope -objekten
Olika sätt att definiera en watcher i AngularJS.
  • uttryckligen $watch ett attribut på $scope .
    $scope.$watch('person.användarnamn', validateUnique);
  • placera en interpolation i din mall (en bevakare kommer att skapas åt dig på det aktuella $scope).
  • be ett direktiv som ng-model att definiera watcher för dig.
    <input ng-model="person.username" />
$digest
är en vinkelmetod som anropas internt av angularjs med frekventa intervall. I $digest , angular itererar över alla $watches i dess scope/child scopes.
$apply
är en vinkelmetod som internt anropar $digest . Denna metod används när du vill tala om för angular manuellt starta dirty checking (kör alla $watches )
$destroy
är både en metod och händelse i angularjs. $destroy() -metoden, tar bort ett scope och alla dess underordnade från dirty checking. $destroy -händelsen anropas av angular närhelst en $scope eller $controller förstörs.

Utvecklingshistoria

AngularJS utvecklades ursprungligen 2009 av Miško Hevery på Brat Tech LLC som mjukvaran bakom en online- JSON -lagringstjänst, som skulle ha prissatts av megabyte, för applikationer som är lätta att göra för företaget. Denna satsning låg på webbdomänen "GetAngular.com", och hade några prenumeranter, innan de två bestämde sig för att överge affärsidén och släppa Angular som ett bibliotek med öppen källkod.

Angulars koncept till AngularJS, inklusive konceptet med en komponentbaserad applikationsarkitektur. Den här versionen tog bland annat bort Sandboxen, som många utvecklare trodde gav ytterligare säkerhet, trots många sårbarheter som hade upptäckts som kringgick sandlådan. Den nuvarande (från mars 2020) stabila version av AngularJS är 1.7.9

I januari 2018 tillkännagavs ett schema för utfasning av AngularJS: efter att ha släppt 1.7.0 skulle den aktiva utvecklingen på AngularJS fortsätta till 30 juni 2018. Därefter stöddes 1.7 till 31 december 2021 som långsiktigt stöd .

Stöd för äldre webbläsare

Versioner 1.3 och senare av AngularJS stödde inte Internet Explorer 8 eller tidigare. Medan AngularJS 1.2 stödde IE8, gör inte dess team det.

Angular och AngularDart

Efterföljande versioner av AngularJS kallas helt enkelt Angular . Angular är en inkompatibel TypeScript -baserad omskrivning av AngularJS. Angular 4 tillkännagavs den 13 december 2016 och hoppade över 3 för att undvika förvirring på grund av feljusteringen av routerpaketets version som redan distribuerades som v3.3.0.

AngularDart fungerar på Dart , som är ett objektorienterat , klassdefinierat , enkelarvsprogrammeringsspråk som använder C- stilsyntax , som skiljer sig från Angular JS (som använder JavaScript ) och Angular 2/ Angular 4 (som använder TypeScript ). Angular 4 släpptes i mars 2017, med ramverkets version anpassad till versionsnumret på routern den använde. Angular 5 släpptes den 1 november 2017. Viktiga förbättringar i Angular 5 inkluderar stöd för progressiva webbappar, en byggoptimerare och förbättringar relaterade till materialdesign. Angular 6 släpptes den 3 maj 2018, Angular 7 släpptes den 18 oktober 2018 och Angular 8 släpptes den 28 maj 2019. Angular följer Semantic Versioning-standarder, där varje större versionsnummer indikerar potentiella förändringar. Angular har lovat att ge 6 månaders aktivt stöd för varje större version följt av 12 månaders långsiktigt stöd. Större släpp är två gånger om året med 1 till 3 mindre släpp för varje större släpp.

Angular Universal

En normal Angular-applikation körs i webbläsaren, medan Angular Universal genererar statiska applikationssidor på servern genom server-side rendering (SSR).

Bibliotek

AngularJS Material

AngularJS Material var ett UI- komponentbibliotek som implementerade Material Design i AngularJS. Biblioteket tillhandahöll en uppsättning återanvändbara, väl testade och tillgängliga UI- komponenter. I januari 2022 stängdes biblioteket, vilket meddelades på deras officiella hemsida. AngularJS Materialbiblioteket är en mogen och stabil produkt som är redo för produktionsanvändning och fungerar endast med AngularJS 1.x. Angular Material-biblioteket är tillgängligt i angular/material2 GitHub-förrådet .

Chrome-tillägg

I juli 2012 byggde Angular-teamet ett tillägg för webbläsaren Google Chrome som heter Batarang, som förbättrade felsökningsupplevelsen för webbapplikationer byggda med Angular. Tillägget syftade till att möjliggöra enkel upptäckt av prestandaflaskhalsar och erbjöd ett GUI för felsökning av applikationer. Under en tid under slutet av 2014 och början av 2015 var tillägget inte kompatibelt med de senaste utgåvorna (efter v1.2.x) av Angular. Den senaste uppdateringen som gjordes av detta tillägg var den 4 april 2017.

Prestanda

AngularJS satte upp paradigmet för en sammanfattningscykel . Denna cykel kan betraktas som en loop, under vilken AngularJS kontrollerade om det fanns några ändringar av alla variabler som bevakades av alla $scopes . Om $scope.myVar är definierad i en styrenhet och denna variabel markerades för att titta på, skulle Angular övervaka ändringarna på myVar i varje loop-iteration.

Detta tillvägagångssätt ledde potentiellt till långsam rendering när AngularJS kontrollerade för många variabler i $scope varje cykel. Miško Hevery föreslog att man skulle behålla färre än 2000 tittare på någon sida.

Se även

Vidare läsning

externa länkar

Hämtad från " https://en.wikipedia.org/w/index.php?title=AngularJS&oldid=1137018374 "