AngularJS Controller as

2. Czysty kod - "Controller as" w
obronie kanciastego.
Dariusz Kalbarczyk
2015-10-22

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

4. Co ja tutaj robię ;)
http://goo.gl/ZFvbc8 http://goo.gl/9OUbV7

5. Angular Module
Angular Module
Config
Routs
View Controllers
Directives Factories
$scope

6. 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();

7. 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

8. 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

9. $scope vs VM
angular
.module('app.cars')
.controller('Car', Car);
function Car($scope){
console.log('scope ',$scope);
};

10. $scope vs VM
angular
.module('app.cars')
.controller('Car', Car);
function Car(){
var vm = this;
console.log('vm ', vm);
};

11. $scope
• $id
• $apply
• $digest
• $watch
• $broadcast
• $destroy
• $emit
• $eval

12. $scope
• $new
• $on
• $parnet
• $root
• $watchCollection
• $evalAsync
• …

13. 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?

14. Bardziej czytelnie
<div ng-controller="Ctrl1">
{{ctrl1.test}}
<div ng-controller="Ctrl2">
{{ctrl2.test}}
<div ng-controller="Ctrl3">
{{ctrl3.test}}
</div>
</div>
</div>

15. Co się stanie?
<div ng-controller="Ctrl1">
Ctrl1: {{test}}
<div ng-controller="Ctrl2">
Ctrl2: {{test}}
<div ng-controller="Ctrl3">
Ctrl3: {{test}}
</div>
</div>
</div>

16. 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"}
Ctrl2.$inject = ['$scope'];
function Ctrl2($scope) {}
Ctrl3.$inject = ['$scope'];
function Ctrl3($scope) {}
})();

17. Otrzymamy
Ctrl1: test 1
Ctrl2: test 1
Ctrl3: test 1

18. Co się 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"}
})();

19. 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 ;)

20. 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>

21. Co się 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) {}
})();

22. Otrzymamy
Ctrl1: test 1
Ctrl2:
Ctrl3:

23. 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>

24. 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() {}
})();

25. Otrzymamy
Ctrl1:
Ctrl2: test 2
Ctrl3:
Nie ma $scope a jednak działa i nie jest to
Angular2

26. 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ę kontrolera

27. 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

28. ctrl2 jest rozpoznane jako vm
<div ng-controller="Ctrl2 as ctrl2">
Ctrl2: {{ctrl2.test}}
function Ctrl2() {
var vm = this;
vm.test = 'test 2';
}

29. A jeśli przypiszemy vm do $scope?
(function () {
angular
.module('app', [])
.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; }
})();
Nie zalecane!

30. 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>

31. Otrzymamy
Ctrl1:
Ctrl2: test 2
Ctrl3:

32. Po co cała ta zabawa?
Jeśli używasz tylko bindowania
danych, nie musisz używać $scope!

33. Co jednak gdy $scope jest potrzebny?
Watro pomyśleć o przeniesieniu tej
funkcjonalności poza kontroler.

34. controllerAs - html
<div ng-controller="Ctrl1">
<div ng-controller="Ctrl1 as vm">
<div ng-controller="Ctrl1 as ctrl1">

35. controllerAs - routing
config: {
templateUrl: 'strona1.html',
controller: 'Ctrl1',
controllerAs: 'vm'
}

36. 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