AngularJS

Den aktuelle version af siden er endnu ikke blevet gennemgået af erfarne bidragydere og kan afvige væsentligt fra den version , der blev gennemgået den 4. maj 2022; checks kræver 5 redigeringer .
AngularJS
Type framework , JavaScript- bibliotek og funktionsbibliotek
Udvikler Google
Skrevet i JavaScript [1]
Første udgave 20. oktober 2010
Hardware platform web platform
nyeste version
Licens MIT-licens [4] [5]
Internet side angularjs.org
 Mediefiler på Wikimedia Commons

AngularJS  er en open source JavaScript - ramme . Designet til udvikling af enkeltsidede applikationer [6] . Dens mål er at udvide browserapplikationer baseret på MVC -mønsteret samt at forenkle test og udvikling.

Rammen fungerer med HTML , der indeholder yderligere brugerdefinerede attributter, som er beskrevet af direktiver, og binder input eller output fra sideområdet til en model, der er almindelige JavaScript-variabler. Værdierne af disse variabler indstilles manuelt eller hentes fra statiske eller dynamiske JSON-data.

Udviklingshistorie

AngularJS blev udviklet i 2009 af Misko Heveri og Adam Abrons hos Brat Tech LLC som softwaren bag en megabyte JSON -lagringstjeneste for at lette udvikling af virksomhedsapplikationer. Tjenesten var hostet på "GetAngular.com"-domænet og havde flere registrerede brugere, før de besluttede at opgive forretningsideen og frigive Angular som et open source-bibliotek.

Abrons forlod projektet, men Heveri, der arbejder hos Google , fortsatte med at udvikle og vedligeholde biblioteket sammen med andre Googlers Igor Minar og Voita Jin.

I marts 2014 blev udviklingen af ​​AngularJS 2.0 [7] annonceret . Den nye version blev skrevet fra bunden i TypeScript og var meget anderledes end den forrige, så det blev senere besluttet at udvikle den som en separat ramme kaldet Angular . Angular 2 blev udgivet den 15. september 2016 [8] , mens den første version fortsatte med at blive udviklet separat som AngularJS.

I april 2022, med udgivelsen af ​​den seneste version 1.8.3, blev understøttelse af AngularJS officielt afbrudt. [9]

Philosophy of Angular

AngularJS er designet med den overbevisning, at deklarativ programmering er bedst til at bygge brugergrænseflader og beskrive softwarekomponenter [10] , mens imperativ programmering er fantastisk til at beskrive forretningslogik [11] . Rammen tilpasser og udvider traditionel HTML for at give to-vejs databinding til dynamisk indhold, hvilket gør det muligt at synkronisere model og visning automatisk. Som et resultat reducerer AngularJS rollen som DOM-manipulation og forbedrer testbarheden.

Udviklingsmål

Angular følger MVC-designmønsteret og tilskynder til løs kobling mellem præsentation, data og komponentlogik. Ved hjælp af afhængighedsinjektion bringer Angular klassiske server-side-tjenester såsom visningsafhængige controllere til klientsiden. Som følge heraf reduceres belastningen på serveren, og webapplikationen bliver lettere.

Populære indbyggede Angular-direktiver

Med AngularJS-direktiver kan du oprette brugerdefinerede HTML-tags og attributter for at tilføje adfærd til bestemte elementer. [fjorten]

ng-app Erklærer elementet som rodelementet for applikationen. [femten] ng-bind Erstatter automatisk teksten i et HTML-element med værdien af ​​det beståede udtryk. ng-model Samme som ng-bind, giver kun to-vejs databinding. [16] Indholdet af elementet vil ændre sig - vinkel vil også ændre værdien af ​​modellen. Værdien af ​​modellen vil ændre sig - vinkel vil ændre teksten inde i elementet. ng-klasse Definerer klasser for dynamisk indlæsning. ng-controller Definerer en JavaScript-controller til evaluering af HTML-udtryk i henhold til MVC. [17] ng-gentag Opretter en DOM-instans for hvert element i samlingen. [atten] ng-show og ng-hide Viser eller skjuler elementet, afhængigt af værdien af ​​det boolske udtryk. ng-switch Opretter en forekomst af en skabelon ud fra et sæt indstillinger, afhængigt af udtrykkets værdi. ng-udsigt Basisdirektivet er ansvarlig for at håndtere ruter [19] , der accepterer JSON, før de gengiver skabeloner drevet af de specificerede controllere. ng-hvis Fjerner eller opretter en del af DOM-træet afhængigt af værdien af ​​et udtryk. Hvis værdien af ​​udtrykket tildelt til ngIf er falsk, fjernes elementet fra DOM, ellers indsættes det nyklonede element i DOM. [tyve]

Det er også muligt at oprette brugerdefinerede direktiver, herunder at bruge skabeloner i script-tagget. [21] [22]

Tovejs databinding

To-vejs databinding i AngularJS er den mest bemærkelsesværdige funktion: den reducerer mængden af ​​kode ved at frigøre serveren fra at håndtere skabeloner. I stedet gengives skabeloner som almindelig HTML, fyldt med data indeholdt inden for et område, der er defineret i modellen. Tjenesten $scopei Angular holder øje med ændringer i modellen og ændrer HTML-udtryksdelen af ​​visningen gennem controlleren. Desuden afspejles eventuelle ændringer i visningen i modellen. Dette omgår behovet for DOM-manipulation og letter webapplikationsinitiering og prototyping [23] .

Plugin til Chrome

I juli 2012 udgav Angular-teamet et plugin til Google Chrome-browseren kaldet Batarang [24] , der gør det nemmere at fejlsøge webapplikationer bygget på Angular. Udvidelsen gør det nemt at opdage flaskehalse og tilbyder en grafisk grænseflade til debugging af applikationer [25] .

Sammenligning med Backbone.js

Backbone.js  , et JavaScript - bibliotek baseret på Model-View-Presenter (MVP) designmønsteret, har lignende muligheder for at udvikle webapplikationer med understøttelse af en RESTful JSON -grænseflade. Backbone er et meget let bibliotek (komprimeret og gzip-komprimeret i størrelse ~6,3 KB), men det kræver, at Underscore.js -biblioteket fungerer , og for at understøtte REST API og arbejde med DOM-elementer, anbefales det at inkludere en jQuery- ligesom bibliotek: jQuery eller Zepto. Backbone.js blev skabt af Jeremy Ashkenas , der også er kendt som skaberen af ​​CoffeeScript .

Der er dog også væsentlige forskelle:

Databinding Det mest markante træk, der adskiller bibliotekerne, er den måde, modellen og visningen er synkroniseret på. Mens AngularJS understøtter to-vejs databinding, er Backbone.js stærkt afhængig af boilerplate-kode til at binde model og visning [26] . HVILE Backbone.js understøtter RESTful backend godt. Det er også meget nemt at arbejde med RESTful API'er i AngularJS ved at bruge $resource-tjenesten. Samtidig har AngularJS en mere fleksibel $http-tjeneste, der forbinder til fjernservere ved hjælp af browserens XMLHttpRequest -objekt eller via JSONP [27] . Skabeloner AngularJS bruger en kombination af brugerdefinerede HTML-tags og udtryk som skabelon [28] . Backbone.js bruger forskellige skabelonmotorer såsom Underscore.js [26] .

Se også

Noter

  1. angularjs Open Source-projekt på Open Hub: Languages-side - 2006.
  2. Udgivelse 1.8.3 - 2022.
  3. 1.8.3 ultimativt farvel (2022-04-07)
  4. angular.js/LICENSE på master angular/angular.js GitHub
  5. angularjs Open Source Project på Open Hub: Licensside - 2006.
  6. Enkeltsideapplikation ved hjælp af AngularJs. Tutorial . Dato for adgang: 6. november 2016. Arkiveret fra originalen 7. november 2016.
  7. AngularJS 2.0 . Hentet 14. august 2015. Arkiveret fra originalen 25. august 2015.
  8. Angular, version 2: proprioception-forstærkning . angularjs.blogspot.ru. Hentet 13. oktober 2016. Arkiveret fra originalen 12. oktober 2016.
  9. kantet  . _ npm . Hentet: 22. oktober 2022.
  10. Forståelse af komponenter . Dato for adgang: 20. oktober 2016. Arkiveret fra originalen 20. oktober 2016.
  11. Hvad er kantet? . Hentet 12. februar 2013. Arkiveret fra originalen 20. maj 2013.
  12. Enhedstestning . Hentet 20. oktober 2016. Arkiveret fra originalen 17. oktober 2016.
  13. E2E-testning . Hentet 20. oktober 2016. Arkiveret fra originalen 12. april 2017.
  14. Vi skriver et simpelt direktiv
  15. ngApp . Dato for adgang: 6. november 2016. Arkiveret fra originalen 22. oktober 2016.
  16. Databinding . Hentet 6. november 2016. Arkiveret fra originalen 3. januar 2015.
  17. Arkiveret kopi . Hentet 6. november 2016. Arkiveret fra originalen 20. oktober 2016.
  18. ngRepeat-direktiv i modul ng . Hentet 6. november 2016. Arkiveret fra originalen 20. oktober 2016.
  19. Komponent-router . Hentet 20. oktober 2016. Arkiveret fra originalen 21. oktober 2016.
  20. ngIf Angular docs . Hentet 6. november 2016. Arkiveret fra originalen 20. oktober 2016.
  21. AngularJS Tutorial: Omfattende vejledning. Del 2. (Tilpassede direktiver). . Hentet 27. november 2016. Arkiveret fra originalen 28. november 2016.
  22. Skabeloner i direktiver
  23. 5 fantastiske AngularJS-funktioner . Hentet 13. februar 2013. Arkiveret fra originalen 20. maj 2013.
  24. Batarang hjemmeside . Hentet 12. maj 2013. Arkiveret fra originalen 10. februar 2015.
  25. AngularJS: Introduktion til AngularJS Batarang . Hentet 12. maj 2013. Arkiveret fra originalen 2. februar 2018.
  26. 1 2 Backbonejs vs Angularjs: Demystifying the myths (downlink) . Hentet 13. februar 2013. Arkiveret fra originalen 20. maj 2013. 
  27. Javascript-rammer og databinding (downlink) . Hentet 13. februar 2013. Arkiveret fra originalen 20. maj 2013. 
  28. script-direktiv i modul ng . Dato for adgang: 27. november 2016. Arkiveret fra originalen 27. november 2016.

Litteratur

Links