一些 Angular 的最佳实践

Transcript

1. ӞԶ Angular ጱ๋֯ਫ ᪢ 2015.7 1
2. ֵአ ControllerAs դ๊ $scope <script> angular.module('app', []) .controller('FooCtrl', function () { this.foo = 'this is foo' }) </script> <div ng-app="app" ng-controller="FooCtrl as ctrl"> {{ ctrl.foo }} </div> 2015.7 2
3. $scope.ctrl = new Ctrl see 2015.7 3
4. Pros • ӧᵱᥝׁᩢ $scope ဳف • හഝ੗ᬰᛔ޸ݷ੒᨝ҁ޸ݷᑮᳵ҂҅᭿عݒᰁ٫ᑱ • ݢզ᭿عӞԶଉᥠጱᔩᔊҁైአ$scope.$watch҂ • ਻ฃၥᦶ • ᶎݻ๚๶ҁAngular2҂ 2015.7 4
5. ࣁ Directive Ӥֵአ module.directive('fooBar', function () { return { scope: {}, template: '{{ ctrl.foo }}', controllerAs: 'ctrl', controller: function () { this.foo = 'this is foobar directive' } } }) 2015.7 5
6. 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
7. bindToController!! 2015.7 7
8. ֵአ Directive ᕟᕢᶭᶎ 2015.7 8
9. 2015.7 9
10. Pros • ᕟկ۸ • ᶎݻ๚๶ҁAngular2҂ 2015.7 10
11. ᭿عֵአ $scope ᱾๶ᬰᤈᕟկԏᳵጱԻ԰ ᭗ᬦֵአ Serviceҁහഝ҂ ౲ᘏ eventsҁ᭗ᦔ҂ 2015.7 11
12. $scope.$broadcast('addTask', list) $scope.$emit('createdTask', task) see 2015.7 12
13. Pros • ܔݻහഝၞ • flux • ӧᵱᥝփ handler҅$scope Ԟๅےଗٳ • <foo on-save="ctrl.create(foo)"/> 2015.7 13
14. Router ng-click="router.forward('/folder')" 2015.7 14
15. href="/folder" see 2015.7 15
16. Pros • ݢᦢᳯ௔ • ຽٵ۸ 2015.7 16
17. ཛྷࣘဳف // directives/foo.js return function ($scope, $timeout) { return { scope: {} template: 'xxx' link: function () {} } } // module.js module.directive('foo', ['$scope', '$timeout', foo]) 2015.7 17
18. // directives/foo.js return ['$scope', '$timeout', function ($scope, $timeout) { return { scope: {} template: 'xxx' link: function () {} } }] // module.js module.directive('foo', foo) 2015.7 18
19. // directives/foo.js module.directive('foo', ['$scope', '$timeout', function ($scope, $timeout) { return { scope: {} template: 'xxx' link: function () {} } }]) 2015.7 19
20. Extra: token vs cookie 2015.7 20
21. 2015.7 21
22. Pros • CORS • Stateless • ຽٵ۸ https://tools.ietf.org/html/rfc7519 • قᒒ݋অ • ਻ฃၥᦶ see 2015.7 22
23. 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