AngularJS Jak zacząć przygodę z najpopularniejszym frameworkiem JavaScript
Dariusz Kalbarczyk ngkalbarczyk@gmail.com
Co ja tutaj robię ;)
http://goo.gl/ZFvbc8
http://goo.gl/9OUbV7
http://ng-poland.pl
Dlaczego warto postawić na AngularJS?
1. SPA 2. Dyrektywy 3. Modularyzacja 4. Testy
AngularJS 1.x czy 2.0?
?
Pierwsza aplikacja
ng-repeat & filter
Config
Angular Module 1.x Angular Module
Config
Routs
View
Directives
$scope
Controllers
Factories
Kontroler – JavaScript’owy konstruktor // JavaScript Constructor function Car(){ this.model = 'RANGE ROVER'; this.price = 300000; this.engine = '3.0 V6' } // za każdym razem kiedy otwieramy kontroler, tworzymy nową instancję
var sale = new Car();
Klasyczne wywołanie kontrolera angular .module('app.cars') .controller('Car', Car);
function Car($scope){ $scope.model = 'RANGE ROVER'; $scope.price = 300000; $scope.engine = '3.0 V6'; }
$scope
Składnia - Controller As angular .module('app.cars') .controller('Car', Car);
function Car(){ var vm = this; vm.model = 'RANGE ROVER'; vm.price = 300000; vm.engine = '3.0 V6'; }
vm = this
$scope vs VM angular .module('app.cars') .controller('Car', Car);
function Car($scope){ console.log(‘scope',$scope); };
$scope vs VM angular .module('app.cars') .controller('Car', Car);
function Car(){ var vm = this; console.log('vm ', vm); };
$scope $id $apply $digest $watch $broadcast $destroy $emit $eval
$new $on $parnet $root $watchCollection $evalAsync ‌
Zagnieżdżanie kontrolerów <div ng-controller="Ctrl1"> {{test}} <div ng-controller="Ctrl2"> {{test}} <div ng-controller="Ctrl3"> {{test}} </div> </div> </div>
Która wartość zostanie wyświetlona?
Bardziej czytelnie <div ng-controller="Ctrl1"> {{ctrl1.test}} <div ng-controller="Ctrl2"> {{ctrl2.test}} <div ng-controller="Ctrl3"> {{ctrl3.test}} </div> </div> </div>
Co siÄ&#x2122; stanie? <div ng-controller="Ctrl1"> Ctrl1: {{test}} <div ng-controller="Ctrl2"> Ctrl2: {{test}} <div ng-controller="Ctrl3"> Ctrl3: {{test}} </div> </div> </div>
Co siÄ&#x2122; stanie? (function () { angular .module( 'app' , []).controller( 'Ctrl1', Ctrl1) .controller( 'Ctrl2' , Ctrl2).controller( 'Ctrl3' , Ctrl3);
Ctrl1.$inject = [ '$scope']; function Ctrl1 ($scope) { $scope.test="test 1" }
Ctrl2.$inject = [ '$scope']; function Ctrl2 ($scope) {}
Ctrl3.$inject = [ '$scope']; function Ctrl3 ($scope) {} })();
Otrzymamy Ctrl1: test 1 Ctrl2: test 1 Ctrl3: test 1
Co siÄ&#x2122; stanie? (function () { angular .module( 'app' , []).controller( 'Ctrl1', Ctrl1) .controller( 'Ctrl2' , Ctrl2).controller( 'Ctrl3' , Ctrl3);
Ctrl1.$inject = ['$scope']; function Ctrl1 ($scope) {}
Ctrl2.$inject = ['$scope']; function Ctrl2 ($scope) {}
Ctrl3.$inject = ['$scope']; function Ctrl3 ($scope) { $scope.test="test 3" } })();
Otrzymamy Ctrl1: Ctrl2: Ctrl3: test 3
Dzieci chętnie korzystają z zasobów rodziców, odwrotnie to nie działa, trochę tak jak w życiu ;)
Controller As <div ng-controller="Ctrl1 as vm"> Ctrl1: {{vm.test}} <div ng-controller="Ctrl2 as vm"> Ctrl2: {{vm.test}} <div ng-controller="Ctrl3 as vm"> Ctrl3: {{vm.test}} </div> </div> </div>
Co siÄ&#x2122; stanie? (function () { angular.module('app', []) .controller('Ctrl1', Ctrl1.controller('Ctrl2', Ctrl2) .controller('Ctrl3', Ctrl3);
Ctrl1.$inject = ['$scope']; function Ctrl1($scope) { $scope.vm={ test : 'test 1' } };
Ctrl2.$inject = ['$scope']; function Ctrl2($scope) {}
Ctrl3.$inject = ['$scope']; function Ctrl3($scope) {}
})();
Otrzymamy Ctrl1: test 1 Ctrl2: Ctrl3:
Controller As bez $scope <div ng-controller="Ctrl1 as vm"> Ctrl1: {{vm.test}} <div ng-controller="Ctrl2 as vm"> Ctrl2: {{vm.test}} <div ng-controller="Ctrl3 as vm"> Ctrl3: {{vm.test}} </div> </div> </div>
Gdzie jest $scope? (function () { angular .module('app', []) .controller('Ctrl1', Ctrl1) .controller('Ctrl2', Ctrl2) .controller('Ctrl3', Ctrl3);
function Ctrl1() {} function Ctrl2() { var vm = this; function Ctrl3() {} })();
vm.test = 'test 2';}
Otrzymamy Ctrl1: Ctrl2: test 2 Ctrl3: Nie ma $scope a jednak dziaĹ&#x201A;a i nie jest to Angular2
Czy moĹźna bardziej czytelnie? <div ng-controller="Ctrl1 as ctrl1"> Ctrl1: {{ctrl1.test}} <div ng-controller="Ctrl2 as ctrl2"> Ctrl2: {{ctrl2.test}} <div ng-controller="Ctrl3 as ctrl3"> Ctrl3: {{ctrl3.test}} </div> </div> </div>
Podmieniamy vm na nazwÄ&#x2122; kontrolera
Ale nic nie zmieniamy w kodzie JavaScript! (function () { angular .module('app', []) .controller('Ctrl1', Ctrl1) .controller('Ctrl2', Ctrl2) .controller('Ctrl3', Ctrl3);
function Ctrl1() {} function Ctrl2() { var vm = this;
vm.test = 'test 2';}
function Ctrl3() {} })();
Tu nadal pozostaje vm
ctrl2 jest rozpoznane jako vm <div ng-controller=" Ctrl2 as ctrl2"> Ctrl2: {{ctrl2.test}}
function Ctrl2() { var vm = this; vm.test = 'test 2'; }
Po co cała ta zabawa? Jeśli używasz tylko bindowania danych, nie musisz używać $scope!
Co jednak gdy $scope jest potrzebny?
Watro pomyśleć o przeniesieniu tej funkcjonalności poza kontroler.
controllerAs - html <div ng-controller="Ctrl1"> <div ng-controller="Ctrl1 as vm">
<div ng-controller="Ctrl1 as ctrl1">
controllerAs - routing config: { templateUrl: 'strona1.html', controller: 'Ctrl1', controllerAs: 'vm' }
AngularJS Warsaw & NG-Poland
http://www.meetup.com/AngularJS-Warsaw
http://ng-poland.pl Link do prezentacji: https://goo.gl/H74EzP
Dziękuję za uwagę