Jak zacząć przygodę z najpopularniejszym frameworkiem JavaScript

Dariusz Kalbarczykngkalbarczyk@gmail.com

Co ja tutaj robię ;)

http://goo.gl/ZFvbc8 http://goo.gl/9OUbV7 http://goo.gl/GXoYDP

http://ng-poland.pl

Dlaczego warto postawić na AngularJS?1.SPA2.Dyrektywy3.Modularyzacja4.Testy

AngularJS 1.x czy 2.0?

?

Pierwsza aplikacja

ng-repeat & filter

Config

Angular Module 1.xAngular 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 kontroleraangular

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

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

.module('app.cars')

.controller('Car', Car);

function Car($scope){ console.log(‘scope',$scope);};

$scope vs VMangular

.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ę 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) {}

})();

OtrzymamyCtrl1: 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"}

})();

OtrzymamyCtrl1: 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) {} })();

OtrzymamyCtrl1: 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() {} })();

OtrzymamyCtrl1: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';

}

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 - routingconfig: {

templateUrl: 'strona1.html', controller: 'Ctrl1', controllerAs: 'vm'

}

AngularJS Warsaw & NG-Poland

http://www.meetup.com/AngularJS-Warsaw

http://ng-poland.pl

Dziękuję za uwagę