Co to jest kontroler w AngularJs?
Kontrolery w AngularJs pobiera dane z widoku, przetwarza je, a następnie wysyła te dane do widoku, który jest wyświetlany użytkownikowi końcowemu. Kontroler będzie miał Twoją podstawową logikę biznesową.
Administrator wykorzysta model danych, przeprowadzi wymagane przetwarzanie, a następnie przekaże dane wyjściowe do widoku, który z kolei zostanie wyświetlony użytkownikowi końcowemu.
W tym samouczku nauczysz się:
- Co robi Controller z perspektywy Angulara
- Jak zbudować podstawowy kontroler
- Jak zdefiniować metody w kontrolerze
- Używanie ng-kontrolera w plikach zewnętrznych
- Podstawowym obowiązkiem administratora jest kontrolowanie danych, które są przekazywane do widoku. Zakres i widok mają dwustronną komunikację.
- Właściwości widoku mogą wywoływać „funkcje” w zakresie. Ponadto zdarzenia w widoku mogą wywoływać „metody” w zakresie. Poniższy fragment kodu przedstawia prosty przykład funkcji.
- Funkcja ($ scope), która jest zdefiniowana podczas definiowania kontrolera i funkcja wewnętrzna, która jest używana do zwracania konkatenacji $ scope.firstName i $ scope.lastName.
- W AngularJS, kiedy definiujesz funkcję jako zmienną, jest ona nazywana metodą.
- Dane w ten sposób przechodzą od administratora do zakresu, a następnie dane przechodzą tam iz powrotem z zakresu do widoku.
- Zakres służy do uwidocznienia modelu w widoku. Model można modyfikować metodami zdefiniowanymi w zakresie, które mogą być wyzwalane poprzez zdarzenia z widoku. Możemy zdefiniować dwukierunkowe powiązanie modelu z zakresu do modelu.
- Idealnie kontrolery nie powinny być używane do manipulowania DOM. Powinno to zostać uczynione przez dyrektywy, które zobaczymy później.
- Najlepszą praktyką jest posiadanie kontrolera opartego na funkcjonalności. Na przykład, jeśli masz formularz do wprowadzania danych i potrzebujesz do tego kontrolera, utwórz kontroler o nazwie „kontroler formularza”.
- Dodajemy odniesienia do arkuszy stylów CSS bootstrap, które będą używane w połączeniu z bibliotekami bootstrap.
- Dodajemy odniesienia do bibliotek angularjs. Więc teraz, cokolwiek zrobimy z angular.js w przyszłości, będzie miało odniesienie z tej biblioteki.
- Dodajemy odwołania do biblioteki bootstrap, aby nasza strona internetowa była bardziej responsywna dla niektórych kontrolek.
- Dodaliśmy odniesienia do bibliotek jquery, które będą używane do manipulacji DOM. Jest to wymagane przez Angular, ponieważ niektóre funkcje Angulara zależą od tej biblioteki.
- Najpierw segregujemy nasze pliki w 2 foldery, tak jak ma to miejsce w przypadku każdej konwencjonalnej aplikacji internetowej. Mamy folder „CSS”. Będzie zawierał wszystkie nasze kaskadowe pliki arkuszy stylów, a następnie nasz folder „lib”, w którym będą znajdować się wszystkie nasze pliki JavaScript.
- Plik bootstrap.css jest umieszczony w folderze CSS i służy do dodania dobrego wyglądu naszej stronie internetowej.
- Angular.js to nasz główny plik, który został pobrany ze strony angularJS i przechowywany w naszym folderze lib.
- Plik app.js będzie zawierał nasz kod dla kontrolerów.
- Plik bootstrap.js jest używany do uzupełnienia pliku bootstrap.cs w celu dodania funkcji ładowania początkowego do naszej aplikacji internetowej.
- Plik jquery zostanie użyty do dodania funkcji manipulacji DOM do naszej witryny.
Co robi Controller z perspektywy Angulara
Poniżej znajduje się prosta definicja działania kontrolera Angular JS.
Jak zbudować podstawowy kontroler
Zanim zaczniemy tworzyć kontroler, musimy najpierw przygotować podstawową konfigurację strony HTML.
Poniższy fragment kodu to prosta strona HTML, która ma tytuł „Rejestracja zdarzeń” i zawiera odniesienia do ważnych bibliotek, takich jak Bootstrap, jquery i Angular.
Domyślnie powyższy fragment kodu będzie obecny we wszystkich naszych przykładach, więc w kolejnych sekcjach będziemy mogli pokazać tylko konkretny kod angularJS.
Po drugie, spójrzmy na nasze pliki i strukturę plików, od których zaczniemy podczas trwania naszego kursu.
Zobaczmy przykład, jak używać angular.js,
Chcemy tutaj po prostu wyświetlić słowa „AngularJS” zarówno w formacie tekstowym, jak iw polu tekstowym, gdy strona jest wyświetlana w przeglądarce.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Objaśnienie kodu:
- Ng aplikacja parametr jest wykorzystywany do określenia, że zgłoszeniu powinno być rozumiane jako kątowe zastosowania. Wszystko, co zaczyna się od przedrostka „ng”, nazywane jest dyrektywą. „DemoApp” to nazwa nadana naszej aplikacji Angular.JS.
- Stworzyliśmy znacznik DIV iw tym tagu dodaliśmy dyrektywę ng-controller wraz z nazwą naszego kontrolera „DemoController”. To zasadniczo sprawia, że nasz znacznik DIV ma dostęp do zawartości kontrolera demonstracyjnego. Musisz podać nazwę administratora zgodnie z dyrektywą, aby mieć pewność, że masz dostęp do funkcji zdefiniowanych w kontrolerze.
- Tworzymy powiązanie modelu przy użyciu dyrektywy ng-model. Powoduje to powiązanie pola tekstowego nazwy samouczka ze zmienną składową „tutorialName”.
- Tworzymy zmienną składową o nazwie „tutorialName”, która będzie używana do wyświetlania informacji, które użytkownik wpisuje w polu tekstowym Nazwa samouczka.
- Tworzymy moduł, który zostanie dołączony do naszej aplikacji DemoApp. Więc ten moduł staje się teraz częścią naszej aplikacji.
- W module definiujemy funkcję, która przypisuje domyślną wartość „AngularJS” do naszej zmiennej tutorialName.
Jeśli polecenie zostanie wykonane pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Ponieważ przypisaliśmy zmiennej tutorialName wartość „Angular JS”, zostanie ona wyświetlona w polu tekstowym oraz w wierszu zwykłego tekstu.
Jak zdefiniować metody w kontrolerze
Zwykle chciałoby się zdefiniować wiele metod w kontrolerze, aby oddzielić logikę biznesową.
Załóżmy na przykład, że jeśli chcesz, aby Twój kontroler wykonał 2 podstawowe rzeczy,
- Dodaj 2 liczby
- Wykonaj odejmowanie 2 liczb
W takim przypadku idealnie byłoby utworzyć dwie metody wewnątrz kontrolera, jedną do wykonywania dodawania, a drugą do wykonywania odejmowania.
Zobaczmy prosty przykład, jak można zdefiniować niestandardowe metody w kontrolerze Angular.JS. Kontroler po prostu zwróci ciąg.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Objaśnienie kodu:
- Tutaj właśnie definiujemy funkcję, która zwraca ciąg znaków „AngularJS”. Funkcja jest dołączona do obiektu zasięgu poprzez zmienną składową o nazwie tutorialName.
- Jeśli polecenie zostanie wykonane pomyślnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Używanie ng-kontrolera w plikach zewnętrznych
Spójrzmy na przykład „HelloWorld”, w którym cała funkcjonalność została umieszczona w jednym pliku. Teraz czas na umieszczenie kodu kontrolera w osobnych plikach.
Aby to zrobić, wykonaj poniższe czynności.
Krok 1) W pliku app.js dodaj następujący kod kontrolera
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Powyższy kod robi następujące rzeczy,
- Zdefiniuj moduł o nazwie „aplikacja”, który będzie zawierał kontroler wraz z funkcjami kontrolera.
- Utwórz kontroler o nazwie „HelloWorldCtrl”. Ten kontroler będzie używany do wyświetlania komunikatu „Hello World”.
- Obiekt zakresu służy do przekazywania informacji z kontrolera do widoku. W naszym przypadku obiekt zasięgu będzie używany do przechowywania zmiennej o nazwie „wiadomość”.
- Definiujemy zmienną message i przypisujemy jej wartość „Hello World”.
Krok 2) Teraz w pliku Sample.html dodaj klasę div, która będzie zawierać dyrektywę ng-controller, a następnie dodaj odniesienie do zmiennej składowej „message”
Nie zapomnij również dodać odwołania do pliku skryptu app.js, który zawiera kod źródłowy kontrolera.
Event Registration Guru99 Global Event
{{message}}
Jeśli powyższy kod zostanie wprowadzony poprawnie, następujące dane wyjściowe zostaną wyświetlone po uruchomieniu kodu w przeglądarce.
Wynik:
Podsumowanie
- Podstawowym obowiązkiem kontrolera jest utworzenie obiektu zakresu, który z kolei jest przekazywany do widoku
- Jak zbudować prosty kontroler przy użyciu dyrektyw ng-app, ng-controller i ng-model
- Jak dodać niestandardowe metody do kontrolera, które mogą być używane do oddzielania różnych funkcji w module angularjs.
- Kontrolery można zdefiniować w plikach zewnętrznych, aby oddzielić tę warstwę od warstwy widoku. Zwykle jest to najlepsza praktyka podczas tworzenia aplikacji internetowych.