Siemanko.
Ostatnio opisałem krótko czym jest AngularJS, pokazałem jak stworzyć moduł aplikacji oraz jak mniej więcej działa na prostym przykładzie tzw. Two-Way Data Binding.
Dzisiaj chciałbym krótko pokazać jak wygląda kontroler naszej aplikacji. Stworzymy nie tylko kontroler ale także podepniemy go pod widok i napiszemy proste działanie, które odkryje nowe definicje o których napiszę oczywiście w następnych artykułach.
Przede wszystkim nie zaleca się w nich pisać skryptów do manipulacji DOM, ponieważ od tego są dyrektywy o których także opowiem niebawem.
Podstawowe informacje
Pokazałem już jak zbudować moduł, także będziemy musieli i w tym przypadku stworzyć takowy moduł z nazwą naszej aplikacji.
HTML:
<div ng-app="demoApp"> // controller here! </div>
JS:
var app = angular.module('demoApp', []);
Wstępna inicjacja wykonana. Nic trudnego. Teraz spróbujemy dodać kontroler.
Budowa prostego kontrolera wygląda następująco:
app.controller('nazwaKontrolera', function($scope) { // JS code here! });
W funkcji kontrolera podajemy dwa parametry. Pierwszy to nazwa kontrolera a drugi to funkcja zwrotna, która dodatkowo zawiera jeden paramert $scope.
$scope jest łącznikiem między widokiem a kontrolerem.
No właśnie.. widok. Tak wygląda deklaracja kontrolerów w widoku:
<div ng-app="demoApp"> <div ng-controller="nazwaKontrolera"> {{q}} </div> </div>
Jak widać, kontroler poprzez wbudowaną dyrektywę został zaczepiony do widoku, który jest zwykłym HTML'em. Od tej pory to co jest między nim będzie sterowane z kodu JS. Jak widać dodałem jeszcze pomiędzy q w typowych znacznikach Angulara. Jest to przekaźnik, który użyjemy w wymianie danych pomiędzy kontrolerem a widokiem.
Wyobraźmy sobie że ng-controller="nazwaKontrolera" to $scope, który zawiera w sobie {{q}} i przypisuje do niego jakąś wartość, bądź też czyta z niego dane. Dzieła wyobraźni można dokończyć tym kodem:
app.controller('nazwaKontrolera', function($scope) { $scope.q = 'Mój pierwszy kontroller!' })
Widzisz powiązanie ? Demo
Tak jak mówiłem - $scope tutaj jest łącznikiem między tym co się dzieje w widoku i kontrolerze.
Dodatkowe informacje
1* Jeśli chodzi o większe aplikacje, które używają przede wszystkim minifikacji plików JS, to niestety to rozwiązanie które podałem wyżej po zminifikowaniu nie zadziała. Dlaczego ? Angular nie będzie wiedział co jest czym, ponieważ jak nie jeden wie minifikacja JS'a zamienia nam zmienne na mniejsze ciągi znaków itp.
Autorzy AngularJS zadbali o ten detal. Możemy wykonać przypisanie naszych zmienianych zmiennych po czym framework będzie zdolny sobie odczytać ich znaczenie
app.controller('nazwaKontrolera', ['$scope', function($scope) { $scope.q = 'Mój pierwszy kontroller!' }]);
2* Do definiowania kontrolerów możemy używać zwykłych funkcji JavaScript
function nazwaKontrolera($scope) { $scope.q = 'Mój pierwszy kontroller!' }
3* Od wersji 1.2 można używać aliasów dla kontrolerów przy tym pozbywając się $scope'a z JS'a.
<div ng-app="demoApp"> <div ng-controller="nazwaKontrolera as ctrl"> {{ctrl.q}} </div> </div>
app.controller('nazwaKontrolera', function() { this.q = 'Mój pierwszy kontroller!' })
W tym przypadku każda metoda działa podana wyżej. Z przypisywaniem parametrów oraz z normalną funkcją JavaScript.
Nie pozbywamy się tutaj przypisywania całkowicie, ponieważ poza $scope'em mamy także Serwisy, Fabryki itp, które są dołączane tak jak $scope, poprzez dependency injection.
Poradziliśmy sobie w tym momencie z kontrolerem w AngularJS a więc jesteśmy krok dalej.
Myślę że następnym tematem będą dyrektywy, które podzielę na dwie, a może trzy części ponieważ są dość obszerne.
Dziękuje za uwagę. (Wszelkie opinie, błędy proszę zwracać w temacie)
Pozdrawiam!