AngularJS 開發實戰：解析 angular-seed 專案架構與內容

1. 1 AngularJS 開發實戰多奇數位創意有限公司技術總監黃保翕 ( Will 保哥 ) 部落格：http://blog.miniasp.com/ 解析 angular-seed 專案架構與內容

2. All services from your imperative. 2 ANGULARJS 入門 Basic AngularJS

3. All services from your imperative. 3 載入 AngularJS 函式庫  下載網址  http://angularjs.org/  所有版本下載 (含各版本文件)  http://code.angularjs.org/  載入函式庫  <script src="/js/angular.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/angula rjs/1.1.5/angular.min.js"></script>

4. All services from your imperative. 4 宣告應用程式作用域 (Application Scope)  宣告方式  <html ng-app>  <html ng-app="optionalModuleName">  特性  一份 HTML 只能宣告一個應用程式作用域  應用程式作用域會初始化所有 AngularJS 物件  $rootScope  $injector (Instance Cache) ( DI by Name )  $provider (Instance Factory) ( Singleton Pattern)  $routeProvider (Routing Module) (SPA)  ….

5. All services from your imperative. 5 Angular 表達式 (Angular Expressions)  用途  類 JavaScript 語法，表達模型的程式片段  語法範例  {{ 9*9 }}  {{ 'Hello World' }}  {{ "Hello World" }}  {{ (true) ? '真' : '假' }} 不要放邏輯!  {{ { 'key': 'value' }.key }}  {{ obj = 123 }}  {{ obj }}

6. All services from your imperative. 6 Angular 過濾器 (Angular Filters)  用途  用來轉換或過濾各種資料  語法範例  {{ 9999 | number }}  {{ 9999+1 | number:2 }}  {{ 999*2 | currency }}  {{ 'Hello World' | uppercase }}  {{ 'Hello World' | lowercase }}  {{ obj | json }}

7. All services from your imperative. 7 Angular 過濾器 (Angular Filters)  格式轉換  currency  number  date  lowercase  uppercase  json  資料過濾範例  http://jsbin.com/angularjs-filters/1  資料過濾  filter  limitTo  orderBy

8. All services from your imperative. 8 Angular 指令 (Directives)

9. All services from your imperative. 9 宣告控制器作用域 (Controller Scope)  宣告方式  <ANY ng-controller="MainCtrl"></ANY>  特性  動態建立一個作用域 (Scope)  可以建立多層次的作用域  巢狀作用域之間會有繼承關係  原型鏈結 (Prototype Chain)

10. All services from your imperative. 10 定義控制器  範例程式 function MainCtrl($scope) { $scope.name = { 'name': 'Will' }; }

11. All services from your imperative. 11 如何載入額外的 Angular 模組  預設載入 ng 模組  var app = angular.module('app', []);  <html ng-app="app">  載入其他 Angular 模組  var app = angular.module('app', ['ngSanitize']);  <html ng-app="app">  <script src="angular-sanitize.js"></script>  範例  http://jsbin.com/angularjs-load-modules/1/edit

12. All services from your imperative. 12 ANGULARJS 整體架構概觀 The Conceptual Overview of AngularJS

13. All services from your imperative. 13 AngularJS 有哪些特性  MVC / MVVM / MVW  Data binding  Dependency Injection  Testing  Routing  Templates  jqLite  Form Validation  Controllers  Views  Scope ( View <-> $scope <-> Controller )  ……

14. All services from your imperative. 14 啟動 AngularJS 的過程 (開機: bootstrap)

15. All services from your imperative. 15 執行 AngularJS 的流程 (執行時期)

16. All services from your imperative. 16 關於 Scope (作用域)  用來偵測 Model 物件的變更  ng 靠 Scope 連結 View 與 Controller 之間  View: 表達式 (expression)  Controller: $scope  Scope 擁有物件繼承特性  類似 DOM 的樹狀結構  透過 ng 的 directives 建立新的 Scope  ng-controller, ng-repeat, ng-switch  ng-view, ng-include  其他自訂的 directives

17. All services from your imperative. 17 MVC 設計樣式  Controller  用來定義應用程式的主要行為! (商業邏輯)  屬性 (原始型別、物件型別) / 事件 / 方法  Model  用來存取資料，連結 View / Controller 的橋樑  $scope / $rootScope / Custom Model  View  以 DOM 為範本 ( 相較於用 string 為範本 )  透過 ng-model 啟動雙向資料繫結  原則: 不要把邏輯放在 View 裡面!

18. All services from your imperative. 18 控制器 (Controller)

19. All services from your imperative. 19 模型 (Model)

20. All services from your imperative. 20 檢視頁面 (View)

21. All services from your imperative. 21 賦予 HTML 超能力的指令 (Directives)  賦予 HTML 額外的  行為 (behavior)  事件 (events)  擴充 HTML 的方式  元素名稱 (覆寫內建元素或自訂新元素)  屬性名稱 (覆寫內建屬性或自訂新屬性)  樣式類別名稱 (透過 HTML 的 class 屬性)  註解型態 (透過註解的形式擴充 HTML 能力)

22. All services from your imperative. 22 資料過濾器 (Filters)  將 Model 資料進行過濾或格式轉換  語法範例  {{ 9999 | number }}  {{ 9999+1 | number:2 }}  {{ 999*2 | currency }}  {{ 'Hello World' | uppercase }}  {{ 'Hello World' | lowercase }}  {{ obj | json }}

23. All services from your imperative. 23 模組 (Modules) 與注入器 (Injector)  注入器 (Injector)  是一個 service locator  一個 ng-app 只會有一個 injector  injector 負責維護一群內部物件快取  每一個註冊在 injector 的物件都會有個名稱  如果透過名稱找不到物件，會透過 instance factory 自動建立  模組 (Modules)  一個設定注入器 instance factory 的管道  http://docs.angularjs.org/api/AUTO.$provide

24. All services from your imperative. 24 模組 (Modules) 與注入器 (Injector)

25. All services from your imperative. 25 ANGULAR-SEED 專案內容剖析 The Content of the angular-seed projects

26. All services from your imperative. 26 angular-seed 專案導覽  導覽工具  Sublime Text 2  JetBrains WebStorm 6  NodeJS > scripts/web-server.js  合併原始碼  http://jsbin.com/ukoyip/1/edit

27. All services from your imperative. 27 載入 AngularJS 函式庫  下載網址 (含各版本文件)  http://angularjs.org/  http://code.angularjs.org/  同步載入  <script src="/js/angular.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/angula rjs/1.1.5/angular.min.js"></script>  非同步載入  先載入 angular-loader.min.js 確保正確執行  再使用 $script 或 RequireJS 載入函式庫

28. All services from your imperative. 28 使用 angular loader 載入與執行 // 使用 $script 非同步載入所有相依的函式庫腳本 $script([ 'lib/angular/angular.js', 'js/app.js', 'js/services.js', 'js/controllers.js', 'js/filters.js', 'js/directives.js' ], function() { // 載入完成後執行 ng 初始化動作 angular.bootstrap(document, ['myApp']); });

29. All services from your imperative. 29 透過 angular.module 建立與匯入模組  angular.module (API in module ng )  建立與匯入相依模組 (module) 的唯一方法  模組的主要用途是配置 NG 的執行內容  controller  directive  filter  Angular Services ( Developer Guide / Creating Services )  service  factory  provider  value  constant  config  route  animation

30. All services from your imperative. 30 透過 angular.module 配置 NG 執行環境  Module (Type in module ng )  run(initializationFn)  config(configFn)  controller(name, constructor)  directive(name, directiveFactory)  filter(name, filterFactory)  animation(name, animationFactory)

31. All services from your imperative. 31 透過 angular.module 配置 NG 執行環境  Module (Type in module ng )  Angular Services  provider(name, providerType) 建立一個 provider 物件  傳入一個含有 this.$get 方法的建構式  factory(name, providerFunction) 建立一個 provider 物件  傳入一個函式，然後會自動包一個 $get 起來，並建立 provider  會透過 providerFunction.apply() 建立物件 ($injector.instantiate)  service(name, constructor) 建立一個 provider 物件  傳入一個建構式，建立物件實體後，透過 factory 包成一個 provider  value(name, object) 建立一個 provider 物件  傳入一個值，透過 factory 包成一個 provider  constant(name, object) 建立 providerCache/instanceCache  function constant(name, value) {  providerCache[name] = value;  instanceCache[name] = value;  }  http://www.egghead.io/video/HvTZbQ_hUZY ※ 比較 service & factory & provider 的差異 http://jsbin.com/ohamub/678/edit

32. All services from your imperative. 32 不同專案規模的目錄配置  小型 NG 專案  依據 ng 物件類型區分不同模組檔案  稍微抽象一點的 NG 專案  依據 ng 物件類型區分目錄  再依網站功能模組來區分不同模組檔案  依據功能模組切割  依據網站功能模組區分目錄  再依據 ng 物件類型區分目錄  再依網站功能或服務區分不同模組檔案

33. All services from your imperative. 33 小型 NG 專案

34. All services from your imperative. 34 稍微抽象一點的 NG 專案

35. All services from your imperative. 35 依據功能模組切割

36. All services from your imperative. 36 共用程式碼的管理  AngularJS 有四種管理方法  從 modules 呼叫共用的物件，可以借用 Facades 設計樣式，以簡化複雜度。  把同性質的程式碼，集中到 modules 進行管理，然後視情況載入。  新增工具方法到 $rootScope 即可共用於整個 ngApp 之間，包含所有 Child Scope 都能用。 (但少用為妙)  使用事件(Events)解除元件之間的耦合關係，不用把程式碼寫死。AngularJS 可以用 $on 方法註冊事件在 Scope 物件上，然後在 Controller 可以觸發上層 ($emit)或下層($broadcast)的事件。

37. All services from your imperative. 37 Will 保哥的技術交流中心 (Facebook)

38. All services from your imperative. 38 聯絡資訊  The Will Will Web 記載著 Will 在網路世界的學習心得與技術分享  http://blog.miniasp.com/  Will 保哥的技術交流中心 (臉書粉絲專頁)  http://www.facebook.com/will.fans  ★ ★ ★ Will 保哥的噗浪 ★ ★ ★  http://www.plurk.com/willh/invite

39. All services from your imperative. 39 感謝各位

AngularJS 開發實戰：解析 angular-seed 專案架構與內容

Will Huang

AngularJS 開發實戰：解析 angular-seed 專案架構與內容