AngularJS Warsaw #4 - Dariusz Kalbarczyk "Controller as"

Czysty kod - "Controller as" w obronie kanciastego.

Dariusz Kalbarczyk 2015-10-22

Dziękuję za to że jesteście z nami dzisiaj.

Co ja tutaj robię ;)

http://goo.gl/ZFvbc8

http://goo.gl/9OUbV7

Angular Module 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

$scope • $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; vm.test = 'test 2';} function Ctrl3() {} })();

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'; }

A jeĹ&#x203A;li przypiszemy vm do $scope? (function () { angular .module('app', [])

Nie zalecane!

.controller('Ctrl1', Ctrl1) .controller('Ctrl2', Ctrl2) .controller('Ctrl3', Ctrl3); Ctrl1.$inject = ['$scope']; function Ctrl1($scope) { $scope.vm = this; } Ctrl2.$inject = ['$scope']; function Ctrl2($scope) { $scope.vm = this; $scope.vm.test = 'test 2'; } Ctrl3.$inject = ['$scope']; function Ctrl3($scope) { $scope.vm = this; } })();

Oraz wrócimy do klasycznej składni <div ng-controller="Ctrl1"> Ctrl1: {{vm.test}} <div ng-controller="Ctrl2"> Ctrl2: {{vm.test}} <div ng-controller="Ctrl3"> Ctrl3: {{vm.test}} </div> </div> </div>

Otrzymamy

Ctrl1: Ctrl2: test 2 Ctrl3:

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' }

Dziękuję za uwagę Dariusz Kalbarczyk ngkalbarczyk@gmail.com https://pl.linkedin.com/in/ngkalbarczyk https://www.facebook.com/dkalbarczyk https://twitter.com/ngKalbarczyk http://ng-poland.pl http://www.meetup.com/AngularJS-Warsaw