Skocz do zawartości

Zdjęcie
* * * * * 1 głosy

[AngularJS] Kontroler


5 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 22 lipca 2014 - 20:01

#1

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!'
}]);

Demo

 

2* Do definiowania kontrolerów możemy używać zwykłych funkcji JavaScript

function nazwaKontrolera($scope) {
    $scope.q = 'Mój pierwszy kontroller!'
}

Demo

 

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.

 

Demo

 

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!


  • 2

2ed58r7.png


unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 11 sierpnia 2014 - 15:48

#2

Nie mogę się doczekać kolejnej części, kiedy można się spodziewać? :D


  • 0

webDeveloper


Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 11 sierpnia 2014 - 19:57

#3

W sumie już nie długo. Przygotowuje troszkę dłuższy temat więc troche to trwa. W przyszłym tygodniu już chciałbym to ogarnąć. Poza tym fajnie że ktoś się tym zaciekawił :P


  • 1

2ed58r7.png


unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 12 sierpnia 2014 - 07:53

#4

No wczoraj miałem trochę czasu to sobie zacząłem na codeschool tutki oglądać :D


  • 0

webDeveloper


Yeoman

    Stary wyjadacz

  • 358 postów
    • Czas spędzony online: 6d 19h 43m 48s
169
Znakomita!
  • LocationKatowice

Napisano 12 sierpnia 2014 - 16:10

#5

No, tam ostatnio dodali Angulara więc możesz się uczyć :P


  • 0

2ed58r7.png


unbreak

    WT Elite

  • 1 937 postów
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Napisano 13 sierpnia 2014 - 07:55

#6

Skończyłem cały kurs i chcę więcej!! :D


  • 0

webDeveloper





Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych