WarsawJS

AngularJS #1

AngularJS #1

Dariusz Kalbarczyk

Arkadiusz Kalbarczyk

Premiera książki, pierwszy kwartał 2015

Agenda

  1. Co to jest AngularJS?
  2. Od czego zacząć?
  3. Dyrektywy i data binding
  4. Pierwsza aplikacja
  5. $scope
  6. Routing
  7. Komunikacja z serwerem

Co to jest AngularJS?

AngularJS - otwarta biblioteka języka JavaScript, wspierana i firmowana przez Google, wspomagająca tworzenie i rozwój aplikacji SPA (Single Page Application). Umożliwia wdrożenie wzorca MVC (Model-View-Controller). Jedną z rzeczy, którą od razu wyróżnia jest to, że posiada własny kompilator HTML, przez możemy nauczyć go (html-a) nowych sztuczek.

Od czego zacząć?

  1. angularjs.org
  2. youtube.com/user/angularjs
  3. gist.github.com/kalbarczyk
  4. meetup.com/AngularJS-Warsaw
  5. ng-poland.pl

Dyrektywy i data binding

            ng-app
            ng-controller
            ng-model
            ng-repeat
            ng-show
            ...

Two way data binding

Zmiany w widoku są natychmiast odzwierciedlane w modelu(kontrolerze), analogicznie zmiany w modelu są w czasie rzeczywistym widoczne w widoku.

Pierwsza aplikacja

                <!doctype html>
                <html ng-app  >
                <body>
                <input ng-model="text" />  
                {{text}}   
                <script src="angular.js"> </script>
                </body>
                </html>

Demo 1 - Pierwsza aplikacja

Kod do pobrania z GitHub

https://gist.github.com/kalbarczyk/0481f5ddd1aa2538d96b

Moduł & Kontroler

            // Tworzymy moduł (kontener, namespace, pojemnik)
            var app = angular.module('app', []);
            //  Tworzymy kontroler (JavaScript constructor function )
            app.controller('defaultCtrl', function ($scope) {
                ...
            });

Co warto wiedzieć o kontrolerach?

Użyj kontrolera do:
- Zainicjowania stanu obiektu $scope
- Rozszerzenia obiektu $scope

Co warto wiedzieć o kontrolerach?

Nie używaj kontrolera do:
- Manipulowanie drzewem DOM - kontrolery nie powinny zawierac rozbudowanej logiki. Wykorzystuj do tego potęgę dyrektyw.
- Formatowania – użyj izolowanych kontrolek
- Filtrowania – użyj izolowanych filtrów
- Współdzielenia kodu – użyj izolowanych serwisów

$scope

  1. Czym jest $Scope?
  2. Dziedziczenie
  3. Mechanika $Scope

Zadania $scope

  1. Komunikacja danych pomiędzy Widokiem (HTML) a Modelem
  2. Nasłuchiwanie zmian - $swatch(), 2way data binding
  3. $digest() oraz $apply()

Zadania $scope - komunikacja widok/kontroler #1

				
		  		app.controller('defaultCtrl', function($scope) { 
                    $scope.mountain  ="Mount Everest";         
                      ...                                                                     
            });

Zadania $scope - komunikacja widok/kontroler #2

               
                     <div ng-controller="defaultCtrl">
                          {{ mountain }}   <input ng-model="mountain"  />
                     </div>

Zadania $scope - nasłuchiwanie oraz propagacja 

			
				 Implicit watcher 
				 {{ watchedElement }} 
				 
                
                Explicit watcher 
                $watch(‘watchedElement’ , function(newValue, oldValue) {
                         //functions body…  
                        });

$digest() oraz $apply()

  1. Cykl $digest() iteruje po liście nasłuchiwaczy wypatrując zmian
  2. $apply() służy do integracji Angulara z innymi frameworkami bądź bibliotekami

ngRepeat & filtr

                 <body ng-init="items=['a','b','c','d']">
                 <input ng-model="text" /> 
                ...
                 <tr ng-repeat="item in items | filter:text">
                 <td>{{item}}</td>
                ...

Demo 2 - ngRepeat & filter

Kod do pobrania z GitHub

https://gist.github.com/kalbarczyk/58553f4e05e1c66b3e20

Demo 3 - ToDo

Kod do pobrania z GitHub

https://gist.github.com/kalbarczyk/a26f01197b5ab4ffbff7

Routing

             <div ng-view> </div >

Konfiguracja

                var app = angular.module('app', ['ngRoute']);
                app.config(function ($routeProvider) { $routeProvider
                .when("/home", { templateUrl: "home.html" })
                .when("/a", { templateUrl: "a.html", controller: "aCtrl" })
                .when("/a/:id", { templateUrl: "ab.html", 
                controller: "abCtrl" })
                .otherwise({ redirectTo: "/home" });
                });

Demo 4 - Routing

Kod do pobrania z GitHub

https://gist.github.com/kalbarczyk/1e5dcd7d8bcd24698eb7

Komunikacja z serwerem

  1. $http dla XHR oraz JSONP
  2. Obietnice (promises)

Komunikacja z serwerem - $http

			$http.get('/api/data')
            $http.post('/api/data', data, config)
            $http.put('/api/data', data, config)
            $http.delete('/api/data', config)
            $http.head('/api/data', config)
            $http.jsonp('/api/data')

Komunikacja z serwerem - Obietnice

            $http.get('/api/data')
                 .success(function(data, status, headers, config) {
                    // co ma sie wydarzyć po pozytywnym rozpatrzeniu        
                  })
                 .error(function(data, status, headers, config) {
                    //obsługa błędów
            });

See you next month at WarsawJS

Fork me on Github