Kontrolery AngularJS z przykładem kontrolera ng

Co to jest kontroler w AngularJS?

A kontroler w AngularJS pobiera dane z widoku, przetwarza je, a następnie przesyła je do widoku, który jest wyświetlany użytkownikowi końcowemu. Kontroler będzie miał podstawową logikę biznesową. Kontroler będzie używał modelu danych, wykonywał wymagane przetwarzanie, a następnie przekazywał dane wyjściowe do widoku, który z kolei był wyświetlany użytkownikowi końcowemu.

Co kontroler robi z perspektywy Angulara?

Poniżej znajduje się prosta definicja 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 mogą wywoływać „funkcje” w zakresie. Co więcej, zdarzenia w widoku mogą wywoływać „metody” w zakresie. Poniższy fragment kodu przedstawia prosty przykład funkcji.

Kolekcja funkcja($zakres) która jest definiowana podczas definiowania kontrolera oraz funkcja wewnętrzna, która służy do zwracania konkatenacji $scope.firstName i $scope.lastName.
In angularjs, gdy definiujesz funkcję jako zmienną, nazywa się to metodą.

Dane w ten sposób przechodzą od kontrolera do zakresu, a następnie dane przechodzą tam i z powrotem z zakresu do widoku.
Zakres służy do eksponowania modelu w widoku. Model można modyfikować za pomocą metod zdefiniowanych w zakresie, które można wywołać zdarzeniami z widoku. Możemy zdefiniować dwukierunkowe powiązanie modelu z zakresu do modelu.
Kontrolery nie powinny być idealnie używane do manipulowania DOM. Powinno się to odbywać za pomocą dyrektyw, które zobaczymy później.
Najlepszą praktyką jest posiadanie kontrolerów opartych 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”.

Jak zbudować podstawowy kontroler w AngularJS

Poniżej znajdują się kroki tworzenia kontrolera w AngularJS:

Krok 1) Utwórz podstawową stronę HTML

Zanim zaczniemy tworzyć kontroler, musimy najpierw przygotować podstawową konfigurację strony HTML.

Poniższy fragment kodu to prosta strona HTML o tytule „Rejestracja na wydarzenie” i zawierająca odniesienia do ważnych bibliotek, takich jak Bootstrap, jquery i Angular.

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. Zatem wszystko, co w przyszłości zrobimy z angular.js, będzie odwoływać się do tej biblioteki.
Dodajemy odniesienia do biblioteki bootstrap, aby nasza strona internetowa była bardziej responsywna w przypadku niektórych elementów sterujących.
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.

Domyślnie powyższy fragment kodu będzie obecny we wszystkich naszych przykładach, dzięki czemu w kolejnych sekcjach będziemy mogli pokazać tylko konkretny kod angularJS.

Krok 2) Sprawdź pliki i strukturę plików

Po drugie, przyjrzyjmy się naszym plikom i strukturze plików, od których zaczniemy podczas trwania naszego kursu.

Najpierw segregujemy nasze pliki w 2 folderach, tak jak ma to miejsce w przypadku każdej konwencjonalnej aplikacji internetowej. Mamy folder „CSS”. Będzie zawierał wszystkie nasze pliki kaskadowych arkuszy stylów, a następnie będziemy mieli nasz folder „lib”, w którym będą znajdować się wszystkie nasze JAVASCRIPT akta.
Plik bootstrap.css jest umieszczany w folderze CSS i służy do dodawania dobrego wyglądu i działania naszej witrynie.
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 służy jako uzupełnienie pliku bootstrap.cs w celu dodania funkcjonalności bootstrap do naszej aplikacji internetowej.
Plik jquery zostanie użyty w celu dodania do naszej witryny funkcji manipulacji DOM.

Krok 3) Użyj kodu AngularJS, aby wyświetlić wynik

Chcemy tutaj po prostu wyświetlić słowa „AngularJS” zarówno w formacie tekstowym, jak i w polu tekstowym, gdy strona jest wyświetlana w przeglądarce. Zobaczmy przykład, jak użyć angular.js, aby to zrobić:

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">

	Tutorial Name : <input type="text" ng-model="tutorialName"><br>

	This tutorial is {{tutorialName}}
</div>
<script>
	var app = angular.module('DemoApp',[]);

	app.controller('DemoController', function($scope){
	$scope.tutorialName = "Angular JS";
	});
</script>

</body>
</html>

Wyjaśnienie kodu:

Kolekcja aplikacja ng Słowo kluczowe jest używane do wskazania, że tę aplikację należy traktować jako aplikację kątową. Wszystko, co zaczyna się od prefiksu „ng” jest znany jako Dyrektywy. „DemoApp” to nazwa nadana naszej aplikacji Angular.JS.
Stworzyliśmy znacznik div i w tym znaczniku dodaliśmy dyrektywę ng-controller wraz z nazwą naszego kontrolera „DemoController”. Zasadniczo sprawia to, że nasz znacznik div ma możliwość dostępu do zawartości kontrolera demonstracyjnego. Musisz podać nazwę administratora zgodnie z dyrektywą, aby mieć pewność, że będziesz mieć dostęp do funkcjonalności zdefiniowanych w kontrolerze.
Tworzymy powiązanie modelu za pomocą dyrektywy ng-model. Powoduje to powiązanie pola tekstowego Tutorial Name ze zmienną członkowską „tutorialName”.
Tworzymy zmienną członkowską o nazwie „tutorialName”, która będzie używana do wyświetlania informacji wpisywanych przez użytkownika w polu tekstowym Tutorial Name.
Tworzymy moduł, który będzie dołączany do naszej aplikacji DemoApp. Zatem ten moduł staje się teraz częścią naszej aplikacji.
W module definiujemy funkcję, która przypisuje domyślną wartość „AngularJS” naszej zmiennej tutorialName.

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

Wyjście:

Ponieważ przypisaliśmy zmiennej tutorialName wartość „Angular JS”, zostanie ona wyświetlona w polu tekstowym i w wierszu zwykłego tekstu.

Jak definiować metody w kontrolerach AngularJS

Zwykle należałoby zdefiniować w kontrolerze wiele metod, aby oddzielić logikę biznesową.

Załóżmy na przykład, że chcesz, aby kontroler wykonywał 2 podstawowe czynności:

Wykonaj dodawanie 2 liczb
Wykonaj odejmowanie 2 liczb

Idealnie byłoby wtedy utworzyć w kontrolerze 2 metody, jedną do dodawania, a drugą do odejmowania.

Zobaczmy prosty przykład definiowania niestandardowych metod w kontrolerze Angular.JS. Kontroler po prostu zwróci ciąg znaków.

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
	Tutorial Name :<input type="text" ng-model="tutorialName"><br>
	<br>
	This tutorial is {{tutorialName}}	
</div>

<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
	$scope.tName = function() {
        return $scope.tName;
    };
});
</script>	
</body>
</html>

Wyjaśnienie kodu:

Tutaj po prostu definiujemy funkcję, która zwraca ciąg znaków „AngularJS”. Funkcja jest dołączona do obiektu zakresu za pośrednictwem zmiennej członkowskiej o nazwie tutorialName.
Jeśli polecenie zostanie wykonane pomyślnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

Kontroler AngularJS z przykładem kontrolera ng

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 oddzielnych plikach.

Aby to zrobić, wykonaj poniższe kroki:

Krok 1) W pliku app.js dodaj następujący kod dla swojego kontrolera

angular.module('app',[]).controller('HelloWorldCtrl',function($scope)
{
	$scope.message = "Hello World"
});

Powyższy kod wykonuje następujące rzeczy:

Zdefiniuj moduł o nazwie „aplikacja”, w którym będzie przechowywany kontroler wraz z funkcjonalnością kontrolera.
Utwórz kontroler o nazwie „HelloWorldCtrl”. Ten kontroler będzie używany do wyświetlania komunikatu „Hello World”.
Obiekt Scope służy do przekazywania informacji z kontrolera do widoku. Zatem w naszym przypadku obiekt zakresu 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 odwołanie do zmiennej składowej „message”

Nie zapomnij także dodać odniesienia do pliku skryptu app.js, który zawiera kod źródłowy Twojego kontrolera.

<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta chrset="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="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<script src="app.js"></script>

</body>
</html>

Jeśli powyższy kod został wpisany poprawnie, po uruchomieniu kodu w przeglądarce zostanie wyświetlony następujący komunikat.

Wyjście:

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órych można użyć do oddzielenia różnych funkcjonalności w module angularjs.
Kontrolery można zdefiniować w plikach zewnętrznych, aby oddzielić tę warstwę od warstwy Widoku. Jest to zwykle najlepsza praktyka przy tworzeniu aplikacji internetowych.

Możesz lubić:

Co to jest kontroler w AngularJS?

Co kontroler robi z perspektywy Angulara?

Jak zbudować podstawowy kontroler w AngularJS

POWIĄZANE ARTYKUŁY

Jak definiować metody w kontrolerach AngularJS

Kontroler AngularJS z przykładem kontrolera ng

Podsumowanie