Your SlideShare is downloading. ×
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
AngularJS 開發實戰:解析 angular-seed 專案架構與內容
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

23,553

Published on

若要開始將 AngularJS 套用在工作上,如何妥善組織越來越多的 JavaScript 程式碼變成一種挑戰,透過 angular-seed 專案提供的參考架構,讓我們更知道如何組織小型、中型,甚至於大型的 AngularJS 專案,有興趣的朋友,歡迎加入本次免費的線上講座,讓你在家中就能夠一起探討 angular-seed 的專案架構與內容,也許有很多你沒有發現的小細節喔。 …

若要開始將 AngularJS 套用在工作上,如何妥善組織越來越多的 JavaScript 程式碼變成一種挑戰,透過 angular-seed 專案提供的參考架構,讓我們更知道如何組織小型、中型,甚至於大型的 AngularJS 專案,有興趣的朋友,歡迎加入本次免費的線上講座,讓你在家中就能夠一起探討 angular-seed 的專案架構與內容,也許有很多你沒有發現的小細節喔。

活動網址: https://www.facebook.com/events/636429123037001/
( 已結束 )

Published in: Technology
0 Comments
111 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
23,553
On Slideshare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
1
Comments
0
Likes
111
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×