相關範例在這 :: https://github.com/esbb48/better-use-angular

1. 更好的使⽤用 Angular

2. About Me
ALi (啊梨)
JS, PHP
⼩小⼩小⼯工程師
esbb48

3. Angular 源由
• 2009 年開始計畫
• Google 維護
• ⺫⽬目前分⽀支兩個版本 1.4 與 2.0
• 使⽤用MVC的結構，結合雙向綁定的，讓開發和測試
變得更加容易。

4. Why Angular

5. 你會怎麼做？

6. ⽤用 Angular 怎麼做
Demo

7. 眾⼈人眼中的 Angular

8. Two Way Binding

9. ng-model
ng-controller
ng-repeat…
else?

10. Angular 特性

11. MVC
UI
Data
Logic
View
Model
Controller
DOM
$scope 變數
JS Class
參考：Intro to AngularJS

12. https://docs.angularjs.org/guide/databinding

13. https://docs.angularjs.org/guide/databinding
Dirty Check

14. https://docs.angularjs.org/guide/databinding
Dirty Check
Object.observe()

15. https://docs.angularjs.org/guide/databinding

16. https://docs.angularjs.org/guide/databinding

17. Templates =
HTML + Directives

18. Custom Directives
⾃自定義Angular已提供
{{ xx }}
ng-model
ng-show
ng-class
ng-xx…

19. Custom Directives
angular.module(’components’, []).directive(‘demo', function() {
return {
restrict: ‘A’ / ‘E’ / ‘C’ / ‘AEC’
scope: false / true / {},
link: function($scope, $element) {
},
template / templateUrl:
};
})

20. restrict
- 限制 directive 的適⽤用範圍
Demo

21. 基礎 scope
- 定義與外層 Scope的關係
Demo

22. 進階 scope
- scope 為 {} 時，
三種取得⽗父 scope 的⽅方式
Demo

23. Dependency Injection

24. module.service( 'serviceName', function );
module.factory( 'factoryName', function );
module.provider( 'providerName', function );
http://stackoverflow.com/questions/15666048/service-vs-provider-vs-factory
註冊 Service 的⽅方式

25. Service
• Singleton（單例）
• 可以在跨 controller 不會被重置
• 可被調⽤用的範圍不僅限於 controller
• Service 與 Factory 都是基於 Provider 的⽅方式

26. Service
angular.module(’isService’, function() {
this.returnThisFunction = true
});
v

27. Factory
angular.module(’isFactory, function() {
this.hereIsPrivate= true
this.canProcessSthWhenRegisterService = true
return {
whenRegisterJustReturnHere: true
}
});
v

28. Provider
angular.module(’isProvider, function() {
// 提供函式在 module.config 的時候被調⽤用
self = this
self.messageString = '';
self.setMessageString = function (newString) {
self.messageString = newString;
}
// 這和 Factory ⼀一樣
$get: function(){
self.hereIsPrivate = true
self.canProcessSthWhenRegisterService = true
return {
whenInjectionJustReturnHere: true
message: self.messageString
};
};
});

29. Service 與 Factory
是基於 Provider 的⽅方式

30. 可以被測試
(Protractor)

31. 常⾒見的Angular範例

32. 好⽤用的ng-model

33. Demo

34. 好⽤用的ng-bind

35. Demo

36. 好⽤用的ng-controller

37. Demo

38. Demo

39. 好⽤用的ng-repeat

40. Demo

41. Demo

44. 伴隨著功能
⼀一直⻑⾧長⼀一直⻑⾧長 …

45. http://i.imgur.com/gWyOF.gif

46. http://i.imgur.com/gWyOF.gif

47. 對不起
這個才對

48. http://output.jsbin.com/sawoxo

49. http://output.jsbin.com/sawoxo

50. 維護性低

51. 分析

52. http://output.jsbin.com/sawoxo

53. http://output.jsbin.com/sawoxo

54. http://output.jsbin.com/sawoxo

55. 拉出重複的程式碼

56. http://output.jsbin.com/sawoxo

57. http://output.jsbin.com/sawoxo

58. http://output.jsbin.com/sawoxo
訊息

59. http://output.jsbin.com/sawoxo
訊息
⽂文章

60. http://output.jsbin.com/sawoxo
訊息
⽂文章

61. 依關聯性將程式碼分類

62. 模組化

63. 理想上的模組化
• 好⽤用
• ⽅方便維護
• 單⼀一職責原則
• 保持程式碼簡潔

64. 先從 View 開始

65. 歸納出相同程式碼
預覽部分
留⾔言列

66. msg-box.html
app.js
包成 component

67. 使⽤用⽅方式
http://embed.plnkr.co/zw2B6ZXOkT8zHZZHzd20/

68. Before Vs After
Before
After

69. Controller

70. 依據關連性分類

71. ⽂文章

72. 調⽤用

73. 訊息

74. 訊息

75. 訊息
messages

76. 訊息
messages
messageServ

77. Factory

78. 調⽤用

79. Before Vs After
Before After
最終 Demo 版本

80. 回顧
• Why Angular
• Angular特性
• 常⾒見範例
• 使⽤用特性模組化

81. ⼤大家都說
Angular不好學

82. http://www.bennadel.com/blog/2439-my-experience-with-angularjs-the-super-heroic-javascript-mvw-framework.htm

83. 廣度
深度

84. 善⽤用框架概念
⽽而不被框架所侷限

85. 善⽤用 Angular 特性
寫出好維護的程式碼

86. 謝謝⼤大家 =]