Kontrolery AngularJS z przykładem kontrolera ng
Jamesa Hartmana
⚡ Inteligentne podsumowanie
Kontroler w AngularJS przechowuje logikę biznesową ekranu. Odbiera dane przez obiekt zakresu, przetwarza je i udostępnia wynik z powrotem do widoku.ping znaczniki prezentacyjne wolne od logiki aplikacji.
Co to jest kontroler w AngularJS?
A kontroler W AngularJS pobiera dane z widoku, przetwarza je, a następnie przesyła do widoku, który jest wyświetlany użytkownikowi końcowemu. Kontroler przechowuje podstawową logikę biznesową. Wykorzystuje model danych, przeprowadza wymagane przetwarzanie, a następnie przekazuje dane wyjściowe do widoku.
⚠️ Uwaga dotycząca wersji: AngularJS (gałąź 1.x) zakończył wsparcie techniczne 31 grudnia 2021 roku i nie otrzymuje już żadnych poprawek bezpieczeństwa. Poniższe koncepcje nadal mają zastosowanie do starszych aplikacji; w nowoczesnym Angularze tę samą rolę pełni klasa komponentu, a nie kontroler.
Wiedza o tym, czym jest kontroler, pozostawia otwarte jedno pytanie: jak właściwie komunikuje się on z widokiem. Następna sekcja odpowiada na to pytanie.
Co robi kontroler z perspektywy Angulara
Poniżej przedstawiono prostą definicję działania kontrolera AngularJS:
- Podstawowym obowiązkiem administratora jest kontrola danych przekazywanych do widoku. Zakres i widok komunikują się dwukierunkowo.
- Właściwości widoku i zdarzenia mogą wywoływać funkcje w zakresie. Poniższy fragment kodu pokazuje funkcja($zakres) zadeklarowane z kontrolerem i funkcją wewnętrzną zwracającą
$scope.firstNameoraz$scope.lastNamedołączył. W angularjs, funkcja zdefiniowana jako zmienna jest metodą.
- Dane przesyłane są z kontrolera do zakresu, a następnie w obie strony między zakresem a widokiem.
- Zakres udostępnia model widokowi. Model można modyfikować za pomocą metod zdefiniowanych w zakresie, które są wyzwalane przez zdarzenia z widoku.
- Kontrolery nie powinny być używane do manipulowania DOM-em. To jest zadanie Dyrektywy.
- Najlepszą praktyką jest opieranie kontrolerów na funkcjonalności. Jeśli masz formularz wprowadzania danych, który wymaga kontrolera, utwórz go, nazywając go „kontrolerem formularza”.
Po zrozumieniu mechanizmu następna sekcja tworzy kontroler na podstawie pustej strony.
Jak zbudować podstawowy kontroler w AngularJS
Poniżej przedstawiono kroki tworzenia kontrolera w AngularJS.
Krok 1) Utwórz podstawową stronę HTML
Przed utworzeniem kontrolera należy utworzyć podstawową stronę HTML. Poniższy fragment kodu to prosta strona zatytułowana „Rejestracja zdarzeń”, która odwołuje się do Bootstrap i AngularJS.
- Odniesienia do Bootstrap Arkusz stylów CSS używany razem z Bootstrap biblioteka.
- Odwołanie do biblioteki AngularJS. Wszystko, co od tego momentu jest wykonywane w AngularJS, jest rozwiązywane w tym pliku.
- Odniesienie do Bootstrap biblioteka, która sprawia, że niektóre kontrolki są responsywne.
⚠️ korekta: Oryginalny załadowany jQuery i stwierdził, że AngularJS jest od niego zależny. Tak nie jest. AngularJS jest dostarczany z jqLite, wbudowanym podzbiorem API jQuery, i aktualizuje się do pełnej wersji jQuery tylko wtedy, gdy jQuery się załaduje. zanim to. Odniesienie zostało usunięte.
Krok 2) Sprawdź pliki i strukturę plików
- Pliki są podzielone na dwa foldery, tak jak w każdej konwencjonalnej aplikacji internetowej: „css” dla arkuszy stylów i „lib” dla JAVASCRIPT akta.
- Plik bootstrap.css znajduje się w folderze css i nadaje witrynie jej wygląd i charakter.
- angular.js to główna biblioteka, pobrana ze strony AngularJS i przechowywana w lib.
- Plik app.js będzie zawierał kod dla kontrolerów.
Krok 3) Użyj kodu AngularJS, aby wyświetlić wynik
Celem jest wyświetlanie słów „AngularJS” zarówno jako zwykłego tekstu, jak i w polu tekstowym po otwarciu strony w przeglądarce.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName}} </div> <script src="lib/angular.js"></script> <script> var app = angular.module('DemoApp', []); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "AngularJS"; }]); </script> </body> </html>
Code Wyjaśnienie:
- aplikacja ng Oznacza ten element jako element główny aplikacji AngularJS. Atrybuty z prefiksem ng- Są to wbudowane dyrektywy. „DemoApp” to nazwa nadana aplikacji.
- Div niesie kontroler ng o nazwie „DemoController”, która nadaje temu elementowi i wszystkim jego elementom dostęp do zakresu kontrolera.
- model ng tworzy powiązanie modelu, łącząc pole tekstowe Nazwa samouczka z właściwością zakresu
tutorialName. - Moduł
DemoAppjest tworzony, a kontroler przypisuje domyślną wartość „AngularJS”tutorialName.
⚠️ Poprawki zostały zastosowane. Oryginalna oferta została zadeklarowana chrset="UTF 8", który nie jest ani prawidłowym atrybutem, ani prawidłową nazwą kodowania i załadował AngularJS dwa razy — raz z CDN i raz z lib/angular.jsDwukrotne załadowanie biblioteki powoduje ponowną rejestrację systemu modułów i nieprzewidywalne zachowanie. Adnotacja tablicy zależności ['$scope', function($scope){…}] dodano również, bez którego kontroler przestaje działać w momencie zminimalizowania pliku.
Wyjście:
Bo tutorialName Przypisano wartość „AngularJS”, która pojawia się w polu tekstowym i w wierszu zwykłego tekstu. Pojedyncza właściwość wystarczy do demonstracji; prawdziwe kontrolery zazwyczaj również ujawniają zachowanie, co zostanie omówione w następnej sekcji.
Jak definiować metody w kontrolerach AngularJS
Zwykle w kontrolerze definiuje się wiele metod, aby oddzielić logikę biznesową. Gdyby kontroler musiał dodać dwie liczby i podrzędnietracJeśli masz dwie liczby, utworzysz jedną metodę dla każdej operacji.
Poniższy przykład definiuje niestandardową metodę w kontrolerze AngularJS, która zwraca ciąg znaków.
<!-- The head and library references are unchanged from Step 3 --> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tName()}} </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "AngularJS"; // A method on the scope, callable from the view as tName() $scope.tName = function() { return $scope.tutorialName; }; }]); </script>
Code Wyjaśnienie:
- Funkcja jest dołączona do obiektu zakresu jako element członkowski
tName. Zwraca aktualną wartośćtutorialName. - Widok wywołuje metodę za pomocą
{{tName()}}. Nawiasy mają znaczenie: bez nich wyrażenie wyświetla samą funkcję, a nie jej wynik.
⚠️ korekta: oryginalna metoda odczytu $scope.tName = function() { return $scope.tName; };. Ta funkcja zwraca samą siebie, a nie nazwę samouczka, więc strona wyświetliła treść funkcji zamiast tekstu. Teraz zwraca $scope.tutorialName.
Wyjście:
Do tej pory wszystko znajdowało się w jednym pliku. Aplikacje produkcyjne trzymają kontrolery oddzielnie, co pokazuje następna sekcja.
Kontroler AngularJS z przykładem kontrolera ng
Powyższy przykład „HelloWorld” umieścił całą funkcjonalność w jednym pliku. Teraz czas przenieść kod kontrolera do osobnego pliku.
Krok 1) W pliku app.js dodaj następujący kod dla swojego kontrolera.
angular.module('app', []) .controller('HelloWorldCtrl', ['$scope', function($scope) { $scope.message = "Hello World"; }]);
Powyższy kod wykonuje następujące czynności:
- Definiuje moduł o nazwie „app”, który zawiera kontroler.
- Tworzy kontroler o nazwie „HelloWorldCtrl”, który wyświetla komunikat „Hello World”.
- Używa obiektu zakresu do przekazywania informacji z kontrolera do widoku, w tym przypadku zmiennej o nazwie
message.
Krok 2) W pliku Sample.html dodaj element div zawierający dyrektywę ng-controller i odwołanie do zmiennej członkowskiej messagePamiętaj o odwołaniu się do pliku app.js, który zawiera kod źródłowy kontrolera.
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8"> <title>Event Registration</title> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <h1> Guru99 Global Event</h1> <div class="container"> <div ng-controller="HelloWorldCtrl">{{message}}</div> </div> <script src="lib/angular.js"></script> <script src="app.js"></script> </body> </html>
⚠️ korekta: app.js musi zostać załadowany po angular.js, ponieważ wywołuje angular.moduleOryginał również ładował bibliotekę dwa razy i zawierał tę samą chrset literówka.
Wyjście:
W każdym dotychczasowym przykładzie właściwości były odczytywane i zapisywane bezpośrednio na $scopePoniższa sekcja przedstawia alternatywę zalecaną przez zespół AngularJS.
Jak używać składni kontrolera w AngularJS
Łączenie bezpośrednio z $scope Działa, ale staje się niejednoznaczne, gdy kontrolery są zagnieżdżone. Wyrażenie widoku, takie jak {{name}} nie daje pojęcia, który kontroler jest właścicielem name, a ponieważ zakresy podrzędne dziedziczą prototypowo po zakresach nadrzędnych, zagnieżdżony kontroler, który zapisuje do odziedziczonego prymitywu, tworzy po cichu własną kopię w tle. controllerAs składnia rozwiązuje oba problemy poprzez nadanie każdemu kontrolerowi aliasu.
Krok 1) Użyj aliasu kontrolera w widoku as słowo kluczowe, a następnie dodaj prefiks zawierający ten alias do każdego powiązania.
Krok 2) Wewnątrz kontrolera dołącz właściwości do this raczej niż $scope.
<div ng-controller="DemoController as demo"> Tutorial Name : <input type="text" ng-model="demo.tutorialName"> This tutorial is {{demo.tutorialName}} </div> <script> app.controller('DemoController', function() { // 'vm' is captured so nested functions keep the right reference var vm = this; vm.tutorialName = "AngularJS"; vm.tName = function() { return vm.tutorialName; }; }); </script>
Następują trzy korzyści. Powiązania stają się samodokumentujące, ponieważ demo.tutorialName nadaje imię swojemu właścicielowi. Zagnieżdżone kontrolery przestają kolidować, ponieważ nadrzędny alias outer i dziecko pod pseudonimem inner mogą oba ujawnić name. Wartości wiążą się również poprzez obiekt, a nie poprzez gołą prymitywną obejścieping pułapka, w której zmiany wprowadzane w pliku potomnym nigdy nie docierają do pliku nadrzędnego.
💡 Wskazówka: Zdobyć this do zmiennej takiej jak vm na górze kontrolera. Wewnątrz wywołania zwrotnego, this odnosi się do czegoś zupełnie innego, a przechwycone odniesienie zachowuje poprawność powiązania.
Wybór stylu powiązania to jedna decyzja. Decyzja o tym, co w ogóle powinno znaleźć się w kontrolerze, to zupełnie inna, a poniższe porównanie pokazuje tę granicę.
Kontroler kontra usługa w AngularJS
Początkujący często przeciążają kontroler zadaniami, które należą do usługi. Różnica polega na czasie życia i ponownym użyciu: kontroler istnieje tylko wtedy, gdy jego widok jest widoczny na ekranie, podczas gdy usługa jest singletonem, który istnieje przez cały czas życia aplikacji.
| WYGLĄD | kontroler | Usługi |
|---|---|---|
| Życie | Stworzone i zniszczone z widokiem | Pojedyncza instancja dla całej aplikacji |
| Cel | Przygotuj dane do jednego widoku | Wspólna logika, stan i wywołania serwera |
| Wielokrotnego użytku | Nie, związany z jego widokiem | Tak, można wstrzykiwać w dowolnym miejscu |
| Utrzymuje stan pomiędzy widokami | Nie, stan jest zagubiony w nawigacji | Tak, stan trwa |
| Typowa treść | Właściwości zakresu i metody widoku | Wywołania HTTP, buforowanie, reguły biznesowe |
Zadbaj o to, aby kontrolery były cienkie. Jeśli dwa kontrolery potrzebują tej samej logiki lub jeśli wartość musi przetrwać nawigację między widokami, przenieś ją do usługi i wstrzyknij ją tam, gdzie jest potrzebna. Praktycznym testem jest sprawdzenie, czy kod nadal będzie miał sens po zamknięciu bieżącego ekranu. Jeśli odpowiedź brzmi „tak”, kod powinien znaleźć się w usłudze.
