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:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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> |
Wynik działania:
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:
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>
:
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:
1 2 3 |
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):
1 2 3 |
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
):
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):
1 2 3 4 |
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:
1 2 3 |
$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):
1 |
{{myResult()}} |
Wynikowe pliki
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!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> |
controller.js
1 2 3 4 5 6 7 8 9 |
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.myText = "World"; $scope.myResult = function () { return "Hello " + $scope.myText + "!"; }; }); |
Wynik działania aplikacji:
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
Pingback: AgendaEditor: lista i formularz w AngularJS | Marcin Kowalczyk – Blog IT