《AngularJS深度剖析與最佳實務》筆記: 第二章 概念介紹

標籤：其他   code   靜態   通過   邏輯   div   介面   dom   建立   

第二章 概念介紹

2.1 什麼是UI?

• 使用者介面包括內容(靜態資訊+動態資訊), 外觀, 互動. 在前端技術棧中分別由HTML, CSS和JS負責. 進一步抽象, 分別對應於MVC三個主要部分: Model, View和Controller
• 對應到AngularJS中, 
  • 內容:
    • 靜態內容---模板
    • 動態內容---scope
  • 互動---Controller
  • 外觀
    • CSS----樣式
    • filter----格式

　　　　　　

2.2. 模組(module)

• 模組: 把相關的一組編程元素(如類, 函數, 變數等)組織到同一個發布包中. 這些編程元素之間緊密協作, 隱藏實現細節, 只通過公開的介面與其他模組合作
• 解決模組之間的依賴關係. 
• 引用模組: 
  

  angular.module(‘com.ngnice.npp‘)

• 建立模組:
  

  angular.module(‘com.ngnice.npp‘, [‘common‘])        //第二個參數是數組, 聲明所依賴的模組

• 模組依賴關係是一棵樹, 凡是依賴了app模組的更進階模組, 也會自動依賴app所依賴的common模組 

  
  
  

2.3 範圍(scope)

• AngularJS中, scope通過原型繼承的方式被組織成了一棵樹, 根節點是$rootScope, 這是Angular在啟動時自動建立的, 通過對應於ng-app指令, 並關聯到ng-app所在節點
• scope是Angular解耦商務邏輯層和視圖層的關鍵: Controller操作scope, View展現scope的內容. 傳統前端程式中大量複雜的DOM操縱邏輯都被轉變成對scope的操作

　　

2.4 控制器(Controller)

 

　　

 

《AngularJS深度剖析與最佳實務》筆記: 第二章 概念介紹