AngularJS

Ten artykuł dotyczy pierwszej wersji frameworka Angular. W przypadku wersji 2 i nowszych zobacz Angular (platforma internetowa) .
AngularJS
Deweloperzy Google
Pierwsze wydanie 20 października 2010 ; 12 lat temu ( 2010-10-20 )
Wersja stabilna
Edit this on Wikidata 1.8.3 / 7 kwietnia 2022 ; 10 miesięcy temu ( 7 kwietnia 2022 )
Magazyn Repozytorium AngularJS
Napisane w JavaScript
Platforma silnik JavaScriptu
Rozmiar
167 kB produkcja 1,2 MB rozwój
Typ Ramy sieciowe
Licencja Licencja MIT
Strona internetowa angularjs.org _  Edit this on Wikidata

AngularJS to wycofana bezpłatna platforma internetowa oparta na języku JavaScript o otwartym kodzie źródłowym do tworzenia aplikacji jednostronicowych . Był utrzymywany głównie przez Google oraz społeczność osób fizycznych i korporacji. Jego celem było uproszczenie zarówno opracowywania, jak i testowania takich aplikacji poprzez zapewnienie platformy dla architektur model-view-controller (MVC) i model-view-viewmodel (MVVM) po stronie klienta, wraz z komponentami powszechnie używanymi w aplikacjach internetowych i progresywnych aplikacje internetowe .

AngularJS został użyty jako frontend stosu MEAN , który składał się z bazy danych MongoDB , frameworka serwera aplikacji sieciowych Express.js , samego AngularJS (lub Angular ) oraz środowiska uruchomieniowego serwera Node.js.

Od 1 stycznia 2022 r. Google nie aktualizuje już AngularJS w celu naprawienia problemów związanych z bezpieczeństwem, zgodnością przeglądarek lub jQuery . Zespół Angular zaleca aktualizację do Angular (v2+) jako najlepszą ścieżkę rozwoju, ale udostępnił też kilka innych opcji.

Przegląd

Struktura AngularJS działała na zasadzie czytania strony HTML ( HyperText Markup Language ), która zawierała dodatkowe niestandardowe atrybuty HTML . Angular zinterpretował te atrybuty jako dyrektywy do powiązania wejściowych lub wyjściowych części strony z modelem reprezentowanym przez standardowe zmienne JavaScript . Wartości tych zmiennych JavaScript można ustawić ręcznie w kodzie lub pobrać ze statycznych lub dynamicznych zasobów JSON .

AngularJS został zbudowany na przekonaniu, że programowanie deklaratywne powinno być używane do tworzenia interfejsów użytkownika i łączenia komponentów oprogramowania , podczas gdy programowanie imperatywne lepiej nadaje się do definiowania logiki biznesowej aplikacji . Framework dostosował i rozszerzył tradycyjny HTML, aby prezentować dynamiczną zawartość poprzez dwukierunkowe wiązanie danych, które pozwoliło na automatyczną synchronizację modeli i widoków. W rezultacie AngularJS położył nacisk na jawną Document Object Model (DOM) w celu poprawy testowalności i wydajności.

Cele projektowe AngularJS obejmowały:

  • aby oddzielić manipulację DOM od logiki aplikacji. Trudność tego jest dramatycznie uzależniona od struktury kodu.
  • aby oddzielić stronę klienta aplikacji od strony serwera. Pozwala to na równoległy postęp prac rozwojowych i ponowne wykorzystanie obu stron.
  • zapewnienie struktury dla procesu budowania aplikacji: od zaprojektowania interfejsu użytkownika, poprzez napisanie logiki biznesowej, aż po testowanie.

AngularJS zaimplementował wzorzec MVC, aby oddzielić prezentację, dane i komponenty logiczne. Wykorzystując wstrzykiwanie zależności , Angular wprowadził tradycyjne usługi po stronie serwera , takie jak kontrolery zależne od widoku, do aplikacji internetowych po stronie klienta. W rezultacie można by zmniejszyć znaczną część obciążenia serwera.

Zakres

AngularJS użył terminu „zakres” w sposób podobny do podstaw informatyki.

Zakres w informatyce opisuje, kiedy w programie obowiązuje określone powiązanie . Specyfikacja ECMA-262 definiuje zakres jako: środowisko leksykalne, w którym obiekt Function jest wykonywany w skryptach internetowych po stronie klienta; podobnie jak zakres jest zdefiniowany w rachunku lambda .

Jako część architektury „MVC”, zakres tworzy „Model”, a wszystkie zmienne zdefiniowane w zakresie są dostępne zarówno z „Widoku”, jak i „Kontrolera”. Zakres zachowuje się jak klej i wiąże „Widok” i „Kontroler”.

Bootstrap

Zadanie wykonywane przez program ładujący AngularJS przebiegało w trzech fazach po załadowaniu DOM:

  1. Tworzenie nowego wtryskiwacza
  2. Kompilacja dyrektyw dekorujących DOM
  3. Powiązanie wszystkich dyrektyw z zakresem

Dyrektywy AngularJS umożliwiły programistom określenie niestandardowych i wielokrotnego użytku elementów i atrybutów podobnych do HTML, które definiują powiązania danych i zachowanie komponentów prezentacji. Niektóre z najczęściej używanych dyrektyw to:

ng-animate
Moduł zapewnia obsługę JavaScript, przejść CSS3 i haków animacji klatek kluczowych CSS3 w ramach istniejących podstawowych i niestandardowych dyrektyw.

Ponieważ atrybuty ng-* nie są poprawne w specyfikacjach HTML, data-ng-* może być również używany jako przedrostek. Na przykład zarówno ng-app , jak i data-ng-app są poprawne w AngularJS.

ng-app
Deklaruje element główny aplikacji AngularJS, w ramach którego można używać dyrektyw do deklarowania powiązań i definiowania zachowania.
ng-aria
Moduł do obsługi dostępności wspólnych atrybutów ARIA .
ng-bind
Ustawia tekst elementu DOM na wartość wyrażenia. Na przykład <span ng-bind="name"></span> wyświetla wartość "name" wewnątrz elementu span. Każda zmiana zmiennej „nazwa” w zakresie aplikacji jest natychmiast odzwierciedlana w DOM.
ng-class
Warunkowo zastosuj klasę, w zależności od wartości wyrażenia boolowskiego.
ng-controller
Określa klasę kontrolera JavaScript, która ocenia wyrażenia HTML.
ng-if
Podstawowa dyrektywa instrukcji if, która tworzy instancję następującego elementu, jeśli warunki są spełnione. Gdy warunek jest fałszywy, element jest usuwany z modelu DOM. W przypadku wartości true klon skompilowanego elementu jest ponownie wstawiany.
ng-init
Wywoływana raz, gdy element jest inicjowany.
ng-model
Podobne do ng-bind , ale ustanawia dwukierunkowe powiązanie danych między widokiem a zakresem.
ng-model-options
Zapewnia dostrojenie sposobu wykonywania aktualizacji modelu.
ng-repeat
Utwórz instancję elementu raz na element z kolekcji.
ng-show & ng-hide
Warunkowo pokaż lub ukryj element, w zależności od wartości wyrażenia boolowskiego. Pokaż i ukryj osiąga się poprzez ustawienie stylu wyświetlania CSS.
ng-switch
Warunkowo utwórz instancję jednego szablonu z zestawu wyborów, w zależności od wartości wyrażenia wyboru.
ng-view
Podstawowa dyrektywa odpowiedzialna za obsługę tras, które rozwiązują JSON przed renderowaniem szablonów sterowanych przez określone kontrolery.

Dwukierunkowe wiązanie danych

Dwukierunkowe wiązanie danych AngularJS miało swoją najbardziej godną uwagi cechę, w dużej mierze odciążając zaplecze serwera od odpowiedzialności za tworzenie szablonów. Zamiast tego szablony były renderowane w zwykłym formacie HTML zgodnie z danymi zawartymi w zakresie zdefiniowanym w modelu. Usługa $scope w Angular wykryła zmiany w sekcji modelu i zmodyfikowane wyrażenia HTML w widoku za pośrednictwem kontrolera. Podobnie wszelkie zmiany w widoku zostały odzwierciedlone w modelu. Pozwoliło to ominąć potrzebę aktywnego manipulowania DOM i zachęciło do ładowania wstępnego i szybkiego prototypowania aplikacji internetowych. AngularJS wykrył zmiany w modelach, porównując bieżące wartości z wartościami przechowywanymi wcześniej w procesie brudnego sprawdzania, w przeciwieństwie do Ember.js i Backbone.js , które uruchamiały detektory, gdy wartości modelu uległy zmianie.

$watch
to metoda kątowa używana do brudnego sprawdzania. Każda zmienna lub wyrażenie przypisane w $scope automatycznie ustawia $watchExpression w angular. Tak więc przypisanie zmiennej do $scope lub użycie dyrektyw takich jak ng-if, ng-show, ng-repeat itp. automatycznie tworzy zegarki w zakresie kątowym. Angular utrzymuje prostą tablicę obserwatorów $$ w obiektach $scope
Różne sposoby definiowania obserwatora w AngularJS.
  • jawnie $obserwuj atrybut na $scope .
    $scope.$watch('person.username', validateUnique);
  • umieść interpolację w swoim szablonie (zostanie utworzony obserwator na bieżącym $scope).
  • poproś dyrektywę, taką jak ng-model, o zdefiniowanie dla ciebie obserwatora.
    <input ng-model="person.username" />
$digest
to metoda kątowa, która jest wywoływana wewnętrznie przez angularjs w częstych odstępach czasu. W $digest angular iteruje po wszystkich $zegarkach w swoim zakresie/zakresach potomnych.
$apply
to metoda kątowa, która wewnętrznie wywołuje $digest . Ta metoda jest używana, gdy chcesz, aby angular ręcznie zaczął sprawdzać brudne (wykonaj wszystkie $watches )
$destroy
jest zarówno metodą, jak i zdarzeniem w angularjs. $destroy() usuwa zakres i wszystkie jego elementy podrzędne z brudnego sprawdzania. Zdarzenie $destroy jest wywoływane przez angular za każdym razem, gdy zostanie zniszczony $scope lub $controller.

Historia rozwoju

AngularJS został pierwotnie opracowany w 2009 roku przez Miško Hevery z Brat Tech LLC jako oprogramowanie stojące za internetową usługą przechowywania JSON , która byłaby wyceniana na megabajty, dla łatwych do wykonania aplikacji dla przedsiębiorstw. Przedsięwzięcie to znajdowało się w domenie internetowej „GetAngular.com” i miało kilku subskrybentów, zanim obaj zdecydowali się porzucić pomysł biznesowy i wypuścić Angular jako bibliotekę typu open source.

Wersja 1.6 dodała wiele koncepcji Angular do AngularJS, w tym koncepcję architektury aplikacji opartej na komponentach. To wydanie między innymi usunęło piaskownicę, która według wielu programistów zapewniała dodatkowe bezpieczeństwo, pomimo wielu odkrytych luk w zabezpieczeniach, które omijały piaskownicę. Obecna (stan na marzec 2020) stabilna wersja AngularJS to 1.7.9

W styczniu 2018 roku ogłoszono harmonogram wycofywania AngularJS: po wydaniu wersji 1.7.0 aktywny rozwój AngularJS będzie trwał do 30 czerwca 2018 roku. Następnie wersja 1.7 była obsługiwana do 31 grudnia 2021 roku jako wsparcie długoterminowe .

Obsługa starszych przeglądarek

Wersje 1.3 i nowsze AngularJS nie obsługiwały przeglądarki Internet Explorer 8 lub starszej. Podczas gdy AngularJS 1.2 obsługiwał IE8, jego zespół tego nie robi.

Angular i AngularDart

Kolejne wersje AngularJS nazywane są po prostu Angular . Angular to niekompatybilna TypeScript . Angular 4 został ogłoszony 13 grudnia 2016 r., Pomijając 3, aby uniknąć nieporozumień z powodu niedopasowania wersji pakietu routera, która była już dystrybuowana jako v3.3.0.

AngularDart działa na Dart , który jest zorientowanym obiektowo , zdefiniowanym klasowo językiem programowania z pojedynczym dziedziczeniem , używającym składni w stylu C , różniącym się od Angular JS (który używa JavaScript ) i Angular 2/ Angular 4 (który używa TypeScript ). Angular 4 wydany w marcu 2017 r., Z wersją frameworka dostosowaną do numeru wersji używanego routera. Angular 5 został wydany 1 listopada 2017 r. Kluczowe ulepszenia w Angular 5 obejmują obsługę progresywnych aplikacji internetowych, optymalizator kompilacji i ulepszenia związane z projektowaniem materiałów. Angular 6 został wydany 3 maja 2018 r., Angular 7 został wydany 18 października 2018 r., A Angular 8 został wydany 28 maja 2019 r. Angular jest zgodny ze standardami wersjonowania semantycznego, a każdy główny numer wersji wskazuje na potencjalnie powodujące uszkodzenie zmiany. Angular zobowiązał się do zapewnienia 6-miesięcznego aktywnego wsparcia dla każdej głównej wersji, a następnie 12-miesięcznego wsparcia długoterminowego. Główne wydania są wydawane co dwa lata, z 1 do 3 mniejszych wydań na każde główne wydanie.

Kątowy uniwersalny

Normalna aplikacja Angular działa w przeglądarce, podczas gdy Angular Universal generuje statyczne strony aplikacji na serwerze poprzez renderowanie po stronie serwera (SSR).

Biblioteki

Materiał AngularJS

AngularJS Material to biblioteka komponentów interfejsu użytkownika , która zaimplementowała projektowanie materiałów w AngularJS. Biblioteka zapewniała zestaw dobrze przetestowanych i dostępnych komponentów interfejsu użytkownika wielokrotnego użytku. W styczniu 2022 roku biblioteka została zamknięta, o czym poinformowano na jej oficjalnej stronie internetowej. Biblioteka materiałów AngularJS to dojrzały i stabilny produkt, który jest gotowy do użytku produkcyjnego i działa tylko z AngularJS 1.x. Biblioteka Angular Material jest dostępna w repozytorium GitHub angular/material2 .

rozszerzenie Chrome

W lipcu 2012 roku zespół Angular stworzył rozszerzenie dla przeglądarki Google Chrome o nazwie Batarang, które poprawiło debugowanie aplikacji internetowych zbudowanych za pomocą Angular. Rozszerzenie miało na celu umożliwienie łatwego wykrywania wąskich gardeł wydajności i oferowało GUI do debugowania aplikacji. Przez pewien czas pod koniec 2014 i na początku 2015 roku rozszerzenie nie było kompatybilne z najnowszymi wersjami (po wersji 1.2.x) Angular. Ostatnia aktualizacja tego rozszerzenia miała miejsce 4 kwietnia 2017 r.

Wydajność

AngularJS określa paradygmat cyklu podsumowania . Cykl ten można by uznać za pętlę, podczas której AngularJS sprawdzał, czy nastąpiły jakieś zmiany we wszystkich zmiennych obserwowanych przez wszystkie $scopes . Jeśli $scope.myVar jest zdefiniowany w kontrolerze i ta zmienna została zaznaczona do oglądania, Angular monitorowałby zmiany w myVar w każdej iteracji pętli.

Takie podejście potencjalnie prowadziło do powolnego renderowania, gdy AngularJS sprawdzał zbyt wiele zmiennych w $scope w każdym cyklu. Miško Hevery zasugerował utrzymanie mniej niż 2000 obserwatorów na dowolnej stronie.

Zobacz też

Dalsza lektura

Linki zewnętrzne

Pobrano z „ https://en.wikipedia.org/w/index.php?title=AngularJS&oldid=1137018374 ”