Tweet
Tweet

Slide 1

Slide 1 text

ӞԶ Angular ጱ๋֯ਫ ᪢ 2015.7 1

Slide 2

Slide 2 text

ֵአ ControllerAs դ๊ $scope angular.module('app', []) .controller('FooCtrl', function () { this.foo = 'this is foo' })
{{ ctrl.foo }}
2015.7 2

Slide 3

Slide 3 text

$scope.ctrl = new Ctrl see 2015.7 3

Slide 4

Slide 4 text

Pros • ӧᵱᥝׁᩢ $scope ဳف • හഝ੗ᬰᛔ޸ݷ੒᨝ҁ޸ݷᑮᳵ҂҅᭿عݒᰁ٫ᑱ • ݢզ᭿عӞԶଉᥠጱᔩᔊҁైአ$scope.$watch҂ • ਻ฃၥᦶ • ᶎݻ๚๶ҁAngular2҂ 2015.7 4

Slide 5

Slide 5 text

ࣁ Directive Ӥֵአ module.directive('fooBar', function () { return { scope: {}, template: '{{ ctrl.foo }}', controllerAs: 'ctrl', controller: function () { this.foo = 'this is foobar directive' } } }) 2015.7 5

Slide 6

Slide 6 text

Directive ጱᳯ᷌ module.directive('fooBar', function () { return { scope: { data: '=' }, template: '{{ ctrl.foo }} {{ ctrl.data.xx }}', controllerAs: 'ctrl', controller: function ($scope) { this.foo = 'this is foobar directive' // handle data var self = this $scope.$watch('data', function (data) { self.data = data }) } } }) 2015.7 6

Slide 7

Slide 7 text

bindToController!! 2015.7 7

Slide 8

Slide 8 text

ֵአ Directive ᕟᕢᶭᶎ 2015.7 8

Slide 9

Slide 9 text

2015.7 9

Slide 10

Slide 10 text

Pros • ᕟկ۸ • ᶎݻ๚๶ҁAngular2҂ 2015.7 10

Slide 11

Slide 11 text

᭿عֵአ $scope ᱾๶ᬰᤈᕟկԏᳵጱԻ԰ ᭗ᬦֵአ Serviceҁහഝ҂ ౲ᘏ eventsҁ᭗ᦔ҂ 2015.7 11

Slide 12

Slide 12 text

$scope.$broadcast('addTask', list) $scope.$emit('createdTask', task) see 2015.7 12

Slide 13

Slide 13 text

Pros • ܔݻහഝၞ • flux • ӧᵱᥝփ handler҅$scope Ԟๅےଗٳ • 2015.7 13

Slide 14

Slide 14 text

Router ng-click="router.forward('/folder')" 2015.7 14

Slide 15

Slide 15 text

href="/folder" see 2015.7 15

Slide 16

Slide 16 text

Pros • ݢᦢᳯ௔ • ຽٵ۸ 2015.7 16

Slide 17

Slide 17 text

ཛྷࣘဳف // directives/foo.js return function ($scope, $timeout) { return { scope: {} template: 'xxx' link: function () {} } } // module.js module.directive('foo', ['$scope', '$timeout', foo]) 2015.7 17

Slide 18

Slide 18 text

// directives/foo.js return ['$scope', '$timeout', function ($scope, $timeout) { return { scope: {} template: 'xxx' link: function () {} } }] // module.js module.directive('foo', foo) 2015.7 18

Slide 19

Slide 19 text

// directives/foo.js module.directive('foo', ['$scope', '$timeout', function ($scope, $timeout) { return { scope: {} template: 'xxx' link: function () {} } }]) 2015.7 19

Slide 20

Slide 20 text

Extra: token vs cookie 2015.7 20

Slide 21

Slide 21 text

2015.7 21

Slide 22

Slide 22 text

Pros • CORS • Stateless • ຽٵ۸ https://tools.ietf.org/html/rfc7519 • قᒒ݋অ • ਻ฃၥᦶ see 2015.7 22

Slide 23

Slide 23 text

Thanks • http://www.benlesh.com/2013/10/title.html • http://blog.thoughtram.io/angularjs/2015/01/02/exploring- angular-1.3-bindToController.html • http://jwt.io • https://auth0.com/blog/2014/01/07/angularjs- authentication-with-cookies-vs-token/ 2015.7 23