AngularJS - Everyday
-
Upload
dariusz-kalbarczyk -
Category
Documents
-
view
219 -
download
1
description
Transcript of AngularJS - Everyday
AngularJSDariusz Kalbarczyk
Co ja tutaj robię ;)
http://goo.gl/ZFvbc8 http://goo.gl/9OUbV7
Dlaczego warto postawić na AngularJS
AngularJS
AngularJS
Chcę łatwiej.
Chcę więcej.
Chcę wygodniej.Chcę jakości.
Chcę szybciej.
Chcą się wyróżniać.
Chcę być podziwiany.
1
2
3
45
6
7
Symptomy świadczące o niedoborze Angulara w Twoim życiu
Angular Module
Angular Module
Config
Routs
View Controllers
Directives Factories
$scope
Kontroler – JavaScript’owy konstruktor
// JavaScript Constructorfunction 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ę stanie?
<div ng-controller="Ctrl1"> Ctrl1: {{test}} <div ng-controller="Ctrl2"> Ctrl2: {{test}} <div ng-controller="Ctrl3"> 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"}
Ctrl2.$inject = ['$scope'];function Ctrl2($scope) {}
Ctrl3.$inject = ['$scope'];function Ctrl3($scope) {}
})();
Otrzymamy
Ctrl1: test 1Ctrl2: test 1Ctrl3: test 1
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"} })();
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ę 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 1Ctrl2: 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 2Ctrl3:
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 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
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ś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!
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 2Ctrl3:
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 [email protected]://pl.linkedin.com/in/ngkalbarczyk https://www.facebook.com/dkalbarczykhttps://twitter.com/ngKalbarczykhttp://ng-poland.plhttp://www.meetup.com/AngularJS-Warsaw