AngularJS Hello World: Twój pierwszy przykładowy program

Przez: Jamesa Hartmana Jamesa Hartmana
Hours Zaktualizowano

⚡ Inteligentne podsumowanie

Programy AngularJS Hello World potrzebują tylko jednego pliku HTML, jednego odwołania do skryptu i dwóch dyrektyw, ng-app i ng-controller, aby powiązać zmienną zakresu kontrolera ze stroną za pomocą wyrażenia w podwójnym nawiasie klamrowym.

  • 🔘 aplikacja ng: Atrybut ng-app oznacza element główny i automatycznie uruchamia nazwany moduł AngularJS.
  • ️ kontroler ng: ng-controller dołącza HelloWorldCtrl do elementu h1, dzięki czemu zakres kontrolera jest tam dostępny.
  • ✅ Powiązanie zakresu: Przypisanie $scope.message wewnątrz kontrolera powoduje wygenerowanie wyrażenia {{message}} renderowanego w widoku.
  • 🧪 Pojedynczy szereg: Przykład uruchamia się za pomocą jednego pliku HTML i jednego odwołania do skryptu, bez konieczności kompilacji.
  • 🛠️. Rozwiązywanie problemów: Dosłowne nawiasy klamrowe na ekranie prawie zawsze oznaczają, że biblioteka nigdy nie została załadowana lub że brakuje aplikacji ng-app.
  • 📊 Uwaga dotycząca wersji: Wsparcie dla AngularJS zakończyło się w styczniu 2022 r., a finalną wersją jest 1.8.3; nowe prace powinny zostać przeprowadzone w AngularJS.
Czytaj więcej

AngularJS Hello World Pierwszy przykładowy program wykorzystujący ng-app i ng-controller

Najlepszym sposobem na docenienie potencjału aplikacji AngularJS jest stworzenie swojego pierwszego prostego programu „Hello World” w AngularJS.

Istnieje wiele zintegrowanych środowisk programistycznych, z których możesz korzystać angularjs Rozwój, niektóre z popularnych są wymienione poniżej. W naszym przykładzie używamy Webstorm jako nasze IDE.

  1. Webstorm
  2. Sublime Text
  3. angularjs Eclipse
  4. visual Studio

Witaj, świecie, AngularJS

Uwaga dotycząca wersji: AngularJS 1.x zakończył długoterminowe wsparcie 31 grudnia 2021 r., a zespół ds. frameworka potwierdza, że Wsparcie AngularJS oficjalnie zakończone W styczniu 2022 roku ukazała się finalna wersja 1.8.3, po której nie było żadnych poprawek bezpieczeństwa. Każdy krok i poniższy blok kodu jest zachowany dokładnie tak, jak został napisany. Nowe projekty powinny być w nowoczesnym Angularze, gdzie to samo ćwiczenie zaczyna się od… serwer ng i samodzielny komponent i nadal używa tego samego {{ }} składnia interpolacji.

Poniższy przykład pokazuje najprostszy sposób stworzenia pierwszej aplikacji typu „Hello world” w AngularJS.

Poniższy zrzut ekranu z adnotacjami opisuje każdą część pliku, a siedem numerów odpowiada Code Lista wyjaśnień poniżej. Została ona przechwycona w starszej wersji 1.4.0, więc jej wiersz skryptu różni się od wersji przypiętej w kodzie.

Adnotowany plik HTML AngularJS Hello World z siedmioma ponumerowanymi wywołaniami dla ng-app, ng-controller, odniesieniem do skryptu i zmienną zakresu

<!DOCTYPE html>  
<html ng-app="app">  
<head>  
    <meta charset="utf 8">
    <title>Guru99</title>     
</head>  
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>  
    angular.module("app", []).controller("HelloWorldCtrl", function($scope) {  
    $scope.message="Hello World" 
    } )
</script> 

</body>  
</html>

Code Wyjaśnienie:

  1. "aplikacja ngSłowo kluczowe „” oznacza, że ​​ta aplikacja powinna być traktowana jako aplikacja AngularJS. Można nadać tej aplikacji dowolną nazwę.
  2. Kontroler to element służący do przechowywania logiki biznesowej. W znaczniku h1 chcemy uzyskać dostęp do kontroler, który będzie miał logikę wyświetlania „Hello World”, więc możemy powiedzieć, że w tym tagu chcemy uzyskać dostęp do kontrolera o nazwie „HelloWorldCtrl”.
  3. Używamy zmiennej członkowskiej o nazwie „message”, która jest niczym innym jak symbolem zastępczym wyświetlającym komunikat „Hello World”.
  4. Znacznik „script” służy do odwołania się do skryptu angular.js, który zawiera wszystkie niezbędne funkcje AngularJS. Bez tego odwołania, jeśli spróbujemy użyć jakichkolwiek funkcji AngularJS, nie będą one działać.
  5. „Kontroler” to miejsce, w którym faktycznie tworzymy logikę biznesową, czyli nasz kontroler. Szczegóły każdego słowa kluczowego zostaną wyjaśnione w kolejnych rozdziałach. Należy zauważyć, że definiujemy metodę kontrolera o nazwie „HelloWorldCtrl”, do której odwołujemy się w kroku 2.
  6. Tworzymy „funkcję”, która zostanie wywołana, gdy nasz kod wywoła ten kontroler. Obiekt $scope to specjalny obiekt w AngularJS, który jest obiektem globalnym używanym w AngularJS. Obiekt $scope służy do zarządzania danymi między kontrolerem a widokiem.
  7. Tworzymy zmienną członkowską o nazwie „message”, przypisujemy jej wartość „Hello World” i dołączamy zmienną członkowską do obiektu zakresu.

UWAGA: Dyrektywa ng-controller jest słowem kluczowym zdefiniowanym w angularjs (Krok 2) i służy do definiowania kontrolerów w aplikacji. W naszej aplikacji użyliśmy słowa kluczowego ng-controller do zdefiniowania kontrolera o nazwie „HelloWorldCtrl”. Faktyczna logika kontrolera zostanie utworzona w (Kroku 5).

Jeśli kod zostanie wykonany pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Wyświetli się komunikat „Witaj, świecie”.

Okno przeglądarki zatytułowane Guru99 renderuje nagłówek „Hello World” ze zmiennej zakresu AngularJS

Jak załadować AngularJS: CDN czy plik lokalny

Powyższy przykład działa, ponieważ jeden wiersz wciąga framework na stronę, zanim przeglądarka dotrze do końca treści. AngularJS jest dostarczany jako pojedynczy JavaPlik skryptu, więc pierwszy program nie wymaga kompilacji ani menedżera pakietów. Wystarczy zwykły plik HTML otwarty w przeglądarce.

Istnieją dwa sposoby pobrania tego pliku.

  1. Skorzystaj z kopii CDN. Przykład wskazuje na code.angularjs.org i wersja pinów 1.6.9. Ten host nadal obsługuje kompilacje 1.x, przy czym najnowsza wersja to 1.8.2, podczas gdy Google Biblioteki hostowane nie zawierają już listy AngularJS.
  2. Pobierz lokalną kopię. Zapisz plik obok strony HTML i wskaż na niego znacznik skryptu. Lokalna kopia utrzymuje przykład w trybie offline, co ma znaczenie, gdy serwer proxy blokuje sieć CDN.
<!-- Option 1: reference a CDN copy -->
<script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>

<!-- Option 2: reference a downloaded copy in the same folder -->
<script src="angular.min.js"></script>

Zastosowanie angular.js podczas nauki i angular.min.js w produkcji: niezminimalizowana kompilacja drukuje czytelny stos traces, podczas gdy skompilowana wersja raportuje zmienne o zmienionych nazwach.

Po załadowaniu pliku ng-app Uruchamia framework. AngularJS szuka tego atrybutu po załadowaniu dokumentu, traktuje element, który go zawiera, jako źródło kompilacji i uruchamia moduł wskazany w jego wartości. Następują trzy konsekwencje:

  • Tylko pierwszy ng-app na stronie jest automatycznie bootstrapowany. Drugi jest ignorowany, chyba że angular.bootstrap jest wywoływany ręcznie.
  • Wartość musi wskazywać nazwę modułu zarejestrowanego w kątowy.modułw przeciwnym razie konsola zgłosi [$injector:modulerr].
  • wprowadzanie ng-app na html element, jak w przykładzie, umieszcza cały dokument w AngularJS; węższy kontener również zadziała.
Nie przegap:

Jak działają wyrażenia {{ }} i powiązanie ng-model

Podwójne wsporniki wokół message W tagu h1 nie ma symbolu zastępczego wypełnianego jednorazowo w momencie ładowania. AngularJS kompiluje ten węzeł tekstowy do obserwatora w otaczającym go obiekcie. zakres, więc wyrenderowany wynik tracks $scope.message Tak długo, jak długo istnieje strona.

Cykl składa się z trzech etapów.

  1. Kontroler zapisuje wartość na $scope.
  2. Przebieg podsumowania porównuje każde obserwowane wyrażenie z jego poprzednim wynikiem.
  3. Każde wyrażenie, którego wartość uległa zmianie, jest renderowane ponownie w tym samym miejscu.

Wyrażenie interpolowane jest zatem jednokierunkowe, od zakresu do widoku. Wymagane jest wiązanie dwukierunkowe. model ngThe Dyrektywy Zaprojektowany do kontroli formularzy. Dodaj <input ng-model="message"> obok nagłówka wpisz coś w polu, a nagłówek będzie się zmieniał po każdym naciśnięciu klawisza, ponieważ ng-model zapisuje wartość pola z powrotem do tej samej właściwości zakresu, którą obserwuje wyrażenie.

Wyrażenia są celowo ograniczone. Odczytują właściwości zakresu, wywołują metody zakresu i tolerują niezdefiniowane wartości w sposób cichy, ale nie mogą deklarować zmiennych, używać instrukcji sterowania przepływem ani docierać do obiektów globalnych, takich jak window.

Jak naprawić pustą stronę lub nierenderowany {{ }}

Pierwszy program AngularJS kończy się niepowodzeniem na jeden z dwóch widocznych sposobów: strona pozostaje pusta lub tekst dosłowny {{message}} Pojawia się tam, gdzie powinien być napis Hello World. Oba oznaczają, że framework nigdy nie przejął znaczników. Wykonaj poniższe sprawdzenia po kolei, mając otwartą konsolę przeglądarki.

  1. Potwierdź załadowanie biblioteki. Otwórz panel Sieć i poszukaj angular.js żądanie. Błąd 404 lub niedostępna sieć CDN pozostawia na ekranie nawiasy klamrowe bez zmian.
  2. Sprawdź ścieżkę skryptu. Ścieżka względna odnosi się do folderu zawierającego plik HTML, więc kopia w js potrzeby podfolderów js/angular.min.js.
  3. Zweryfikuj ng-app. Brak atrybutu lub błędnie napisany atrybut oznacza brak bootstrapu. Atrybut jest łączony łącznikiem jako ng-app w znacznikach, mimo że dyrektywa jest napisana w stylu camelcase JavaScenariusz.
  4. Przeczytaj błąd konsoli. [$injector:modulerr] oznacza, że ​​moduł wskazany przez ng-app nigdy nie został zarejestrowany. [ng:areq] zwykle oznacza, że ​​nazwa kontrolera w znaczniku nie pasuje do nazwy przekazanej do .controller().
  5. Poszukaj drugiej aplikacji ng. Tylko pierwszy element jest bootstrappingowy, więc przypadkowa kopia pozostawiona w elemencie wewnętrznym automatycznie wyłącza tę część strony.

Istnieją jeszcze dwie przyczyny, które tłumaczą większość pozostałych doniesień.

  • Protokół pliku. Ten przykład pojedynczego pliku działa poprawnie po otwarciu bezpośrednio z dysku, ale każdy szablon pobrany przez XHR jest blokowany przez reguły pochodzenia przeglądarki. Udostępniaj folder przez HTTP po pojawieniu się szablonów.
  • Krótki błysk aparatu ortodontycznego. Gdy znaczniki są renderowane przed skompilowaniem przez framework, surowe wyrażenie jest widoczne przez chwilę. Dodaj ng-cloak do elementu lub zamień wyrażenie na ng-bind="message", który nigdy nie wyświetla własnych znaczników.

Jeśli żaden z powyższych punktów nie ma zastosowania, zredukuj stronę do podanego wyżej przykładu i dodawaj własny kod linijka po linijce.

FAQ

Każda z czterech wymienionych powyżej prac, a w tym przykładzie wykorzystano WebstormPonieważ program jest pojedynczym, statycznym plikiem HTML, wystarczy zwykły edytor tekstu. IDE dodaje jedynie uzupełnianie dyrektyw, przeładowywanie na żywo i zintegrowane debugowanie.

$scope to obiekt wiążący współdzielony pomiędzy kontroler i jego widok. Zapisanie $scope.message wewnątrz kontrolera HelloWorldCtrl sprawia, że ​​ta właściwość staje się widoczna dla wyrażenia umieszczonego na elemencie h1.

Oba pliki zawierają tę samą strukturę. Plik angular.js nie jest minimalizowany, więc błędy wskazują na czytelny kod źródłowy. Plik angular.min.js jest kompresowany na potrzeby produkcji i wymaga jawnej adnotacji zależności, ponieważ minimalizacja zmienia nazwy parametrów, które w przeciwnym razie AngularJS będzie sprawdzał.

AngularJS to framework 1.x pokazany tutaj, oparty na dyrektywach, $scope i plain JavaSkrypt. Angular, czyli wersja 2 i nowsze, to osobna TypeScript rama zbudowana na komponentach i jest linią aktywnie utrzymywaną.

Głównie do utrzymania istniejących aplikacji 1.x, które nadal są szeroko rozpowszechnione. Słownictwo dotyczące wiązań, dyrektyw i wstrzykiwanie zależności transfery, ale wsparcie zakończyło się w styczniu 2022 r., więc nowe projekty powinny być w nowoczesnym Angularze.

Tak. Zarejestruj każdy z nich za pomocą .controller() w tym samym module i dołącz je do różnych elementów za pomocą ng-controller. Każdy z nich otrzymuje własny zakres potomny, dzięki czemu właściwości o identycznych nazwach pozostają niezależne.

Współcześni asystenci odczytują bazę kodu 1.x i tworzą inwentarz dyrektyw, filtrów i usług z sugerowanymi odpowiednikami komponentów i usług. Ten inwentarz jest przydatny dla…ping praca, choć każda mapaping nadal wymaga ręcznej weryfikacji.

Drugi pilot GitHub uzupełnia schemat kontrolera, przypisania $scope i ng-prześlij obsługi z krótkiego komentarza, ale jego szkolenie jest skierowane w stronę nowoczesnego Angulara, więc sprawdź, czy sugestie rzeczywiście korzystają ze składni 1.x.

Podsumuj ten post następująco: