Co to jest AngularJS? Archikonstrukcja, cechy i zalety

Co to jest AngularJS?

angularjs jest otwartym kodem źródłowym dla modelu-widoku-kontrolera napisanym w JAVASCRIPT. AngularJS był jednym z najpopularniejszych frameworków internetowych w latach 2010. i jest wykorzystywany do tworzeniaping głównie aplikacje jednostronicowe. Ten framework został opracowany przez grupę programistów z Google sama.

Ze względu na czyste wsparcie Google Dzięki ideom i opiniom szerokiej społeczności, framework był stale aktualizowany przez cały okres swojego istnienia. Uwzględnił również wiodące trendy rozwojowe tamtego okresu, dlatego tak wiele kodu produkcyjnego nadal działa na nim do dziś.

Warto ustalić na początku jedną kwestię terminologiczną. AngularJS jest powszechnie opisywany jako framework MVC, co stanowi użyteczny punkt wyjścia. Sam zespół AngularJS preferował jednak tę etykietę. MVW (Model-Widok-Cokolwiek), ponieważ środowisko wykonawcze zachowuje się bliżej modelu Model-View-ViewModel niż klasycznego modelu MVC. Oficjalna Dokumentacja AngularJS Nazywa to strukturą ramową dla dynamicznych aplikacji internetowych. Skoro to już zostało ustalone, oto jak poszczególne elementy składają się w całość.

angularjs Architektura

AngularJS opiera się na architekturze MVC. Diagram struktury MVC przedstawiono poniżej:

angularjs ArchiSchemat tecture

Każda z trzech warstw ma jasno określone zadanie:

• Kontroler reprezentuje warstwę zawierającą logikę biznesową. Zdarzenia użytkownika uruchamiają funkcje zapisane w kontrolerze. Zdarzenia użytkownika są częścią kontrolera.
• Widoki służą do reprezentowania warstwy prezentacji udostępnianej użytkownikom końcowym.
• Modele służą do reprezentowania danych. Dane w modelu mogą być tak proste, jak tylko deklaracje prymitywne. Na przykład, jeśli utrzymujesz aplikację studencką, Twój model danych może mieć tylko identyfikator studenta i nazwisko. Może być również złożony, jeśli ma ustrukturyzowany model danych. Jeśli utrzymujesz aplikację dotyczącą własności samochodu, możesz mieć struktury definiujące sam pojazd pod względem pojemności silnika, liczby miejsc siedzących itp.

W praktyce kontroler rzadko wgrywa dane do widoku ręcznie. AngularJS monitoruje model i odświeża widok za Ciebie, a ta automatyczna synchronizacja jest obsługiwana przez zestaw funkcji opisanych poniżej.

Funkcje AngularJS

AngularJS ma następujące kluczowe cechy, dzięki którym jest jednym z najpotężniejszych frameworków na rynku:

1. MVC – Framework opiera się na słynnej koncepcji MVC (kontroler widoku modelu). Jest to wzorzec projektowy używany we wszystkich współczesnych aplikacjach internetowych. Wzorzec ten opiera się na podziale warstwy logiki biznesowej, warstwy danych i warstwy prezentacji na osobne sekcje. Podział na poszczególne sekcje został dokonany tak, aby łatwiej było zarządzać każdą z nich.
2. Powiązanie modelu danych – Nie musisz pisać specjalnego kodu, aby powiązać dane z kontrolkami HTML. Można to zrobić w AngularJS, dodając tylko kilka fragmentów kodu.
3. Pisanie mniejszej ilości kodu – Podczas wykonywania wielu manipulacji DOM JAVASCRIPT było wymagane do zaprojektowania dowolnej aplikacji. Ale dzięki AngularJS zdziwisz się, jak mało kodu trzeba napisać do manipulacji DOM.
4. Jednostka Testy gotowy – Projektanci w Google nie tylko rozwinął AngularJS, ale także stworzył strukturę testową o nazwie „Karma”, która pomaga w projektowaniu testów jednostkowych dla aplikacji AngularJS.
5. Dyrektywy – Znaczniki takie jak ng-app, ng-model i ng-repeat dodaj zachowanie do zwykłych elementów HTML.

Funkcje te są najłatwiejsze do zrozumienia po ich uruchomieniu, dlatego w następnej sekcji utworzysz działającą stronę od podstaw.

Jak skonfigurować AngularJS i zbudować swoją pierwszą aplikację

Czytanie o wiązaniu danych to jedno, a obserwowanie, jak to działa, to drugie. AngularJS nie potrzebuje menedżera pakietów, bundlera ani kompilatora, więc Twoja pierwsza aplikacja to pojedynczy plik HTML, który uruchamia się bezpośrednio z dysku twardego.

Krok 1) Dodaj bibliotekę AngularJS

Załaduj bibliotekę z CDN za pomocą jednego znacznika skryptu. Wersja 1.8.3 to ostateczna wersja AngularJS, więc przypnij swoją stronę do tej konkretnej wersji, a nie do wersji pływającej.

Krok 2) Zaznacz katalog główny aplikacji za pomocą ng-app

Dyrektywa ng-app informuje kompilator AngularJS, do której części strony jest on właścicielem. Umieszczenie jej w znaczniku HTML przekazuje cały dokument do frameworka, a wartość, którą jej przekażesz, nadaje nazwę modułowi, który zamierzasz utworzyć.

Krok 3) Powiąż dane z ng-model i wyrażeniem

Dyrektywa ng-model wiąże element wejściowy z właściwością w zakresie, a wyrażenie w podwójnym nawiasie klamrowym wyświetla tę samą właściwość w innym miejscu strony. Ponieważ wiązanie jest dwukierunkowe,ping w polu nagłówek jest aktualizowany natychmiast, bez konieczności obsługi zdarzeń.

Krok 4) Dodaj kontroler dla logiki

Kontroler to zwykły JavaFunkcja skryptu, która odbiera obiekt $scope i ustawia mu wartości początkowe. Zarejestrowanie go w module udostępnia go dyrektywie 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>

Krok 5) Uruchom stronę i sprawdź wynik

Zapisz plik jako index.html i otwórz go w dowolnej przeglądarce. Nagłówek początkowo brzmi „Hello World!” i jest automatycznie aktualizowany po każdym naciśnięciu klawisza. Nie jest wymagany żaden serwer WWW ani żaden etap kompilacji.

Jeśli nic się nie pojawi, otwórz konsolę przeglądarki i sprawdź, czy skrypt CDN został załadowany i czy nazwa modułu w ng-app dokładnie odpowiada nazwie przekazanej do angular.module, ponieważ niezgodność kończy się niepowodzeniem. Ta mała strona pokazuje już zalety opisane poniżej.

Zalety AngularJS

Oto zalety AngularJS:

• Ponieważ jest to oprogramowanie typu open source, możesz spodziewać się minimalnej liczby błędów lub problemów.
• Wiązanie dwukierunkowe – AngularJS utrzymuje synchronizację warstwy danych i prezentacji. Nie trzeba pisać dodatkowych JavaSkryptuj kod, aby zachować synchronizację danych w kodzie HTML i warstwie danych. AngularJS zrobi to automatycznie za Ciebie. Wystarczy określić, który element sterujący jest powiązany z którą częścią modelu.
• Routing – AngularJS może zarządzać routingiem, czyli przechodzeniem między widokami. Jest to kluczowy element aplikacji jednostronicowych, w których można przechodzić do różnych funkcjonalności w aplikacji webowej w zależności od interakcji użytkownika, pozostając jednocześnie na tej samej stronie.
• AngularJS obsługuje testowanie, zarówno Testów jednostkowych, Testy integracyjne.
• Rozszerza HTML poprzez dostarczanie własnych elementów zwanych dyrektywami. Ogólnie rzecz biorąc, dyrektywy to znaczniki na elemencie DOM (takie jak atrybut, nazwa elementu i komentarz lub klasa CSS), które nakazują kompilatorowi HTML AngularJS dołączenie określonego zachowania do danego elementu DOM. Dyrektywy te pomagają w rozszerzaniu funkcjonalności istniejących elementów HTML, zwiększając możliwości aplikacji internetowej.

Zalety AngularJS

Równie ważne jest zrównoważone podejście, dlatego dalej omówimy kompromisy.

Wady i ograniczenia AngularJS

Każdy framework coś zmienia i AngularJS nie jest wyjątkiem. Oto ograniczenia najczęściej zgłaszane przez zespoły utrzymujące aplikacje AngularJS:

• Brak własnej warstwy bezpieczeństwa – AngularJS nie zapewnia uwierzytelniania ani autoryzacji, więc oba te elementy muszą być egzekwowane na serwerze.
• Całkowite uzależnienie od JavaScenariusz – Jeśli odwiedzający wyłączy JavaSkrypt, strona wraca do suchych znaczników i nie jest renderowana.
• Wydajność cyklu Digest – Zmiany wykrywane są poprzez wielokrotne porównywanie obserwowanych wartości, dlatego strony zawierające kilka tysięcy powiązań mogą sprawiać wrażenie powolnych.
• Wymagająca nauka – Zakresy, dyrektywy, fabryki, usługi i dostawcy nakładają się na siebie, a często istnieje wiele sposobów na osiągnięcie tego samego rezultatu.
• Widoczność w wyszukiwarkach – Widoki są tworzone w przeglądarce, więc zanim roboty indeksujące będą mogły niezawodnie indeksować strony, konieczne jest wykonanie dodatkowych czynności, takich jak wstępne renderowanie.
• Brak dalszych aktualizacji – Od 31 grudnia 2021 r. nie opublikowano żadnych oficjalnych poprawek, więc nowo odkryta luka w zabezpieczeniach pozostaje nienaprawiona, chyba że komercyjny dostawca dostarczy poprawkę.

Ten ostatni punkt skłania większość zespołów do opowiedzenia się za następcą, który mimo wspólnej nazwy jest odrębnym produktem.

AngularJS vs Angular: jaka jest różnica?

AngularJS i Angular są często mylone ze względu na podobieństwo nazw, ale są to odrębne frameworki z różnymi językami, architekturami i liniami wydań. AngularJS odnosi się tylko do serii 1.x opisanej na tej stronie. Angular oznacza wersję 2 i każdą kolejną, pełną przeróbkę wydaną w 2016 roku, która jest nadal aktywnie rozwijana. Code nie przemieszcza się między nimi bez celowej pracy migracyjnej.

Praktyczną konsekwencją jest to, że kontrolera AngularJS nie można po prostu wgrać do projektu Angular. Migracja oznacza przepisanie każdego kontrolera jako komponentu, dlatego zaplanuj to jako rzeczywistą pracę inżynierską, a nie aktualizację. Krótko mówiąc, traktuj AngularJS jako umiejętność konserwacyjną, a Angular jako platformę do tworzenia nowych rozwiązań.

FAQ