Poniewż aplikacje tworzone w AngularJS powinny wykorzystywać wzorzec MVC, należy wydzielić komponenty widoku, kontrolera oraz modelu danych. Za widok odpowiada szablon html, który zostaje przekompilowany do ostatecznej postaci za pomocą dyrektyw biblioteki. Kontrolerem będzie funkcja w pliku .js, natomiast model danych zostanie zaaplikowany do obiektu $scope.
Przykładowy widok poniżej prezentuje działanie dyrektyw ng-repeat, ng-controller oraz ng-click.
<body ng-controller="CountriesController">
<ul>
<li ng-repeat="country in countries">
<div>
<span>
Name : <strong>{{country.name}}</strong>
</span>
<span>
Capital City : <strong>{{country.capital}}</strong>
</span>
</div>
</li>
</ul>
<p> Total countries in Benelux : {{countries.length}} </p>
<button ng-click="removeLast()">Remove last item</button>
</body>
Aby wykonać data-binding, należy podać nazwę kontrolera, za pomocą atrybutu
ng-controller umieszczanego wewnątrz tagu
body. AngularJS po napotkaniu takiej dyrektywy zacznie poszukiwanie funkcji o identycznej nazwie w plikach js. Kolejna instrukcja to
ng-repeat, czyli odpowiednik pętli foreach z języka C#, Umożliwia ona binding do kolekcji obiektów i stworzenie szablonu dla pojedynczego obiektu. Za pomocą
ng-click, możemy podać jaka akcja ma się wykonać po kliknięciu w element. W powyższym przykładzie będzie to funkcja removeLast zdefiniowana w kontrolerze.
//funkcja konstruktora dla country
var Country = function(name,capital)
{
this.name = name;
this.capital = capital;
}
function CountriesController($scope) {
$scope.countries = [
new Country("Netherlands","The Hague"),
new Country("Belgium","Brussels"),
new Country("Luxembourg","Luxembourg")
];
$scope.removeLast = function(){
var index = $scope.countries.length - 1;
$scope.countries.splice(index, 1);
}
}
Funkcja kontrolera wywoływana z parametrem $scope, definiuje model danych oraz zachowania poprzez odpowiednie funkcje. Zmiany przeprowadzane na kolekcji (np. usunięcie elementu), spowodują natychmiastowe odświeżenie widoku.
Kolejną prostą do dodania funkcjonalnością jest przeszukiwanie pełno-tekstowe (Full Text Search), które nie korzysta w żaden sposób z kontrolera (!).
Aby móc przeszukiwać kolekcję, do której wpięliśmy data-binding, należy zmodyfikować ng-repeat o dyrektywę filtru.
<li ng-repeat="country in countries | filter:query">
Dodatkowo wystarczy dodać element input, do którego użytkownik będzie mógł wpisać swoje zapytanie.
<input type="text" ng-model="query">
W przypadku kolekcji obiektów przeszukane zostaną wszystkie properties i element zostanie zwrócony, jeżeli jakakolwiek zawiera podaną przez użytkownika frazę.
Aby zastosować binding w dwie strony, wystarczy dodać property query do elementu $scope w kontrolerze. Dzięki temu możemy na przykład wypisywać i resetować zapytanie.
<label>{{query}}</label>
<!-- ... -->
<button ng-click="resetQuery()">Reset query</button>
function CountriesController($scope) {
$scope.query = '';
$scope.resetQuery = function(){
$scope.query = '';
}
}
Binding automatycznie odświeży zarówno UI, jak i filtr wyszukiwania.
