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

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

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

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
宣告應用程式作用域 (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
Angular 表達式 (Angular Expressions)
 用途
 類 JavaScript 語法，表達模型的程式片段
 語法範例
 {{ 9*9 }}
 {{ 'Hello World' }}
 {{ "Hello World" }}
 {{ (true) ? '真' : '假' }} 不要放邏輯!
 {{ { 'key': 'value' }.key }}
 {{ obj = 123 }}
 {{ obj }}

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

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

8
Angular 指令 (Directives)

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

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

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
ANGULARJS 整體架構概觀
The Conceptual Overview of AngularJS

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

14
啟動 AngularJS 的過程 (開機: bootstrap)

15
執行 AngularJS 的流程 (執行時期)

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

18
控制器 (Controller)

19
模型 (Model)

20
檢視頁面 (View)

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

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

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

24
模組 (Modules) 與注入器 (Injector)

25
ANGULAR-SEED 專案內容剖析
The Content of the angular-seed projects

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

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
使用 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
透過 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
透過 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
透過 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
不同專案規模的目錄配置
 小型 NG 專案
 依據 ng 物件類型區分不同模組檔案
 稍微抽象一點的 NG 專案
 依據 ng 物件類型區分目錄
 再依網站功能模組來區分不同模組檔案
 依據功能模組切割
 依據網站功能模組區分目錄
 再依據 ng 物件類型區分目錄
 再依網站功能或服務區分不同模組檔案

33
小型 NG 專案

34
稍微抽象一點的 NG 專案

35
依據功能模組切割

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

37
Will 保哥的技術交流中心 (Facebook)

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
感謝各位

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (18)

More from Will Huang

More from Will Huang (20)

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