Wzorzecz projektowy MVC (Model-View-Controller):
Dodaj nowy plik controller.js
, w którym utworzysz kontroler. Oczywiście trzeba dodać nasz wpisa z naszym nowym plikie index
html`:
<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
).
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>
console.log()
.