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 Controllers
Directives Factories
$scope

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')
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')
function Car($scope){
console.log('scope ',$scope);
};

$scope vs VM
angular
.module('app.cars')
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}}
{{test}}
{{test}}
</div>
</div>
</div>
Która wartość
zostanie
wyświetlona?

Bardziej czytelnie
{{ctrl1.test}}
{{ctrl2.test}}
{{ctrl3.test}}
</div>
</div>
</div>

Co się stanie?
Ctrl1: {{test}}
Ctrl2: {{test}}
Ctrl3: {{test}}
</div>
</div>
</div>

Co się stanie?
(function () {
angular
.module('app', []).controller('Ctrl1', Ctrl1)
.controller('Ctrl2', Ctrl2).controller('Ctrl3', Ctrl3);
Ctrl1.$inject = ['$scope'];
function Ctrl1($scope) { $scope.test="test 1"}
function Ctrl2($scope) {}
})();

Otrzymamy
Ctrl1: test 1
Ctrl2: test 1
Ctrl3: test 1

Co się stanie?
(function () {
angular
.module('app', []).controller('Ctrl1', Ctrl1)
.controller('Ctrl2', Ctrl2).controller('Ctrl3', Ctrl3);
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}}
Ctrl2: {{vm.test}}
Ctrl3: {{vm.test}}
</div>
</div>
</div>

Co się stanie?
(function () {
angular
.module('app', [])
.controller('Ctrl1', Ctrl1)
.controller('Ctrl3', Ctrl3);
function Ctrl1($scope) { $scope.vm={ test : 'test 1' } };
})();

Otrzymamy
Ctrl1: test 1
Ctrl2:
Ctrl3:

Controller As bez $scope
Ctrl1: {{vm.test}}
Ctrl2: {{vm.test}}
Ctrl3: {{vm.test}}
</div>
</div>
</div>

Gdzie jest $scope?
(function () {
angular
.module('app', [])
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ła i nie jest to
Angular2

Czy można bardziej czytelnie?
<div ng-controller="Ctrl1 as ctrl1">
Ctrl1: {{ctrl1.test}}
</div>
</div>
</div>
Podmieniamy vm na nazwę kontrolera

Ale nic nie zmieniamy w kodzie JavaScript!
(function () {
angular
.module('app', [])
function Ctrl1() {}
function Ctrl2() { var vm = this; vm.test = 'test 2';}
function Ctrl3() {}
})();
Tu nadal pozostaje vm

ctrl2 jest rozpoznane jako vm
function Ctrl2() {
var vm = this;
vm.test = 'test 2';
}

A jeśli przypiszemy vm do $scope?
(function () {
angular
.module('app', [])
function Ctrl1($scope) { $scope.vm = this; }
function Ctrl2($scope) { $scope.vm = this; $scope.vm.test = 'test 2'; }
function Ctrl3($scope) { $scope.vm = this; }
})();
Nie zalecane!

Oraz wrócimy do klasycznej składni
Ctrl1: {{vm.test}}
Ctrl2: {{vm.test}}
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

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

AngularJS Warsaw #4 - Dariusz Kalbarczyk "Controller as"

More Related Content

Similar to AngularJS Warsaw #4 - Dariusz Kalbarczyk "Controller as" (20)

AngularJS Warsaw #4 - Dariusz Kalbarczyk "Controller as"