Kontrolery

Wzorzecz projektowy MVC (Model-View-Controller):

  • Model (dane; JSON),
  • Widok (wyświetlenie modelu w interfejsie użytkownika; szablon HTML),
  • Kontroler (reaguje na dane od użytkownika, zarządza aplikacją, aktualizuje model i odświeża widoki; kod JavaScript).

Dodaj nowy plik controller.js, w którym utworzysz kontroler. Oczywiście trzeba dodać nasz wpisa z naszym nowym plikie indexhtml`:

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

Kontroler w AngularJS to anonimowa funkcja JavaScript:

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

Kontroler należy przypisać do modułu. Służy do tego metoda controller wywoływana na zmiennej pod którą jest przypisany obiekt modułu (najczęściej app).

  • Pierwszy parametr: jest nazwa kontrolera,
  • Drugi parametr: kontroler (czyli funkcja).
app.controller('nazwaKontrolera', function() {
  // ...
});

Aby powiązać kontroler z widokiem (tagiem HTML np. <body> lub <div>) trzeba użyć dyrektywy ng-controller:

<body ng-controller="nazwaKontrolera">

Dependency Injection (odwrócenie sterowania - Inversion of Control) dba o dostarczenie potrzebnych nam instancji obiektów. Przykładami są: $scope, $timeout, $http i inne.

app.controller('nazwaKontrolera', function($wstrzyknietaZaleznosc1, $zaleznosc2) {
    //...
});

Instancje obiektów (np. $scope) są tworzone automatycznie podczas wywołania dyrektywy ng-controller.

$scope to most pomiędzy widokiem a kontrolerem. Aby z niego skorzystać, należy go wstrzyknąć do kontrolera (przekazać jako parametr do funkcji).

Po wstrzyknięciu, możemy go użyć $scope w kontrolerze, aby przypisać do niego zmienną lub funkcję:

$scope.myText = "My new text";

Teraz w widoku możemy skorzystać z tej zmiennej:

{{myText}}

W JavaScript możemy definiować funkcje na dwa sposoby

function nazwaFunkcji() {
    // ...
}
var nazwaFunkcji = function() {
    // ...
}

Przypisać funkcję do $scope (jednocześnie ją tworząc ) możemy w ten sposób:

$scope.nazwaFunkcji = function() {
    // ...
}

A wywołać ją w widoku:

{{nazwaFunkcji()}}

Przykładowo:

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

$scope.hey = function() {
    alert("hey!!!");
}
<button ng-click="hey()">Hey!</button>

  1. Zrób aplikację, w której użytkownik będzie wpisywał swoje imię i nazwisko w oddzielnych polach. Po kliknięciu przycisku pokaże się okienko z przywitaniem i liczbą literą ile mają jego imię z nazwiskiem.

  1. Upewnij się, że zapisałeś kod źródłowy. W Sublime Text o niezapisaniu informuje kółeczko.
  2. Odśwież stronę (skrót F5).
  3. Jeśli zwykłe odświeżenie nic nie daje wyczyść cache: Shift+F5 w Google Chrome.
  4. Na konsoli (zakłdka Console po wciśnięciu F12 w Google Chrome) możesz zobaczyć błędy.
  5. Wypisuj na konsolę console.log().