AngularJS 開發實戰:解析 angular-seed 專案架構與內容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
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 )
……
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 裡面!
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
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 物件類型區分目錄
再依網站功能或服務區分不同模組檔案
36. All services from your imperative.
36
共用程式碼的管理
AngularJS 有四種管理方法
從 modules 呼叫共用的物件,可以借用 Facades 設計
樣式,以簡化複雜度。
把同性質的程式碼,集中到 modules 進行管理,然
後視情況載入。
新增工具方法到 $rootScope 即可共用於整個
ngApp 之間,包含所有 Child Scope 都能用。
(但少用為妙)
使用事件(Events)解除元件之間的耦合關係,不用把
程式碼寫死。AngularJS 可以用 $on 方法註冊事件在
Scope 物件上,然後在 Controller 可以觸發上層
($emit)或下層($broadcast)的事件。
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