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

第二章 概念介紹

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)