Kontroler w AngularJS

Znajdziecie tutaj szablon aplikacji w AngularJS. W poprzednim wpisie co prawda jest już Hello World, ale teraz napiszemy je z podziałem na pliki, kontrolerem i modułem, tak jak powinno to się robić w prawdziwych aplikacjach. Poznamy także czym jest obiekt $scope.

Hello World w jednym pliku

Przypomnijmy sobie kod Hello Word:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Hello World AngularJS</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
</head>
<body ng-app>
	<h2>Hello World AngularJS</h2>
	<input type="text" ng-model="myText">
	{{myText}}
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Hello World AngularJS</title>

</head>

<h2>Hello World AngularJS</h2>

</body>

</html>

Wynik działania:

<br /> Loading plunk…<br />

Podział na pliki

Teraz nasza aplikacja będzie składała się z dwóch plików:

index.html – zawiera widok w HTML,
controller.js – zawiera kontrolery (w tym przypadku również deklarację modułu) w JavaScript.

Pozwoli to zachować porządek w kodzie (HTML nie będzie się mieszał z JavaScript). W przyszłości, gdy kontrolerów będzie więcej, można tworzyć kolejny plik dla każdego kontrolera, co jeszcze bardziej zorganizuje kod aplikacji.

Moduł

W AngularJS można aplikacje dzielić na moduły. Na początku wystarczy nam jeden. Jego deklaracja wygląda tak:

var app = angular.module('myApp', []);

1	var app = angular.module('myApp', []);

Pierwszym parametrem jest nazwa deklarowanego modułu, a drugim lista wstrzykiwanych zależności (o tym w kolejnych wpisach – na razie nie potrzebujemy nic dodatkowego).

W kodzie HTML musimy teraz zainicjalizować naszą aplikację za pomocą dyrektywy ng-app (było już trochę o niej w poprzednim wpisie). Tym razem przyjmie parametr z nazwą naszego modułu. Umieszczono ją także w elemencie <html>:

<html ng-app="myApp">

1	<html ng-app="myApp">

Kontroler

AngularJS wspiera tworzenie aplikacji zgodnych ze wzorcem projektowym Model-Widok-Kontroler (ang. Model-View-Controller, MVC). W kontrolerem jest javascriptowa (anonimowa) funkcja:

function() {
  // jakieś działania kontrolera
};

function() {

// jakieś działania kontrolera

};

Musimy jednak kontroler przypisać do modułu. Służy do tego metoda controller wywoływana na zmiennej pod którą jest obiekt modułu (w tym przypadku app), która przyjmuje dwa parametry. Pierwszym jest nazwa kontrolera, a drugim kontroler (czyli funkcja):

app.controller('myCtrl', function() {
  // jakieś działania kontrolera
});

app.controller('myCtrl', function() {

// jakieś działania kontrolera

});

W HTML należy także zastosować dyrektywę ng-controller, aby powiązać kontrolerem w widokiem (wybranym tagiem HTML). Zazwyczaj jest to tag <body>, ale może być również jakiś <div>. Ważne jest to, aby był to nadrzędy tag do tych, w których ma działać Angular. Parametrem jest nazwa kontroler (podobnie jak w przypadku dyrektywy ng-model):

<body ng-controller="myCtrl">

1	<body ng-controller="myCtrl">

Implementacja kontrolera – korzystanie ze $scope

Na potrzeby przykładu dodajmy w kontrolerze operację, która będzie ustawiała wartość zmiennej myText. Musimy jednak jakoś się do niej dostać, gdyż jest dostępna tylko w widoku. Do tego potrzebny będzie nam obiekt $scope. Jest to most pomiędzy widokiem a kontrolerem. Tworzony jest automatycznie podczas wywołania dyrektywy ng-controller. Aby z niego skorzystać, należy go wstrzyknąć do kontrolera (przekazać jako parametr do funkcji):

app.controller('myCtrl', function($scope) {
  $scope.myText = "World";
  // reszta funkcjonalności kontrolera
});

app.controller('myCtrl', function($scope) {

$scope.myText = "World";

// reszta funkcjonalności kontrolera

});

Zmiany, które zajdą w widoku będą automatycznie zachodziły w kontrolerze i w drugą stronę – modyfikacja w kontrolerze zmienia dane w widoku.

W kontrolerze dodajmy jeszcze funkcję o nazwie myResult, która będzie korzystać ze zmiennej myText, wykonywać operacje (dodawanie kawałka tekstu) i zwracać tekstowy wynik. Przypiszmy ją do $scope, aby była dostępna w widoku:

 $scope.myResult = function () {
    return "Hello " + $scope.myText + "!";
  };

$scope.myResult = function () {

return "Hello " + $scope.myText + "!";

};

Możemy teraz w widoku z niej skorzystać (zauważmy, że jest to interpolacja wywołania funkcji, a nie interpolacja zmiennej):

{{myResult()}}

1	{{myResult()}}

Wynikowe pliki

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>Hello World AngularJS</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
	<script src="controller.js"></script>
</head>
<body ng-controller="myCtrl">
	<h2>Hello World AngularJS</h2>
	<input type="text" ng-model="myText">
	{{myResult()}} 
</body>
</html>

<!DOCTYPE html>

<head>

<title>Hello World AngularJS</title>

</head>

<h2>Hello World AngularJS</h2>

</body>

</html>

controller.js

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.myText = "World";
  
  $scope.myResult = function () {
    return "Hello " + $scope.myText + "!";
  };
});

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.myText = "World";

$scope.myResult = function () {

return "Hello " + $scope.myText + "!";

};

});

Wynik działania aplikacji:

<br /> Loading plunk…<br />

Kod na GitHub

Kod tej części aplikacji umieściłem na GitHubie w repozytorium agenda-editor w branchu hello-world-angularjs:
https://github.com/mkczyk/agenda-editor/tree/hello-world-angularjs

Marcin Kowalczyk – Blog IT

Informatyka, programowanie, studia