# Angular模塊 ## Angular模塊 與其他現代語言不同，當前版本的JavaScript（ECMAScript5）并沒有內置模塊化語法。但是，隨著程序規模越來越大，模塊化的需求越來越重要，于是出現了require.js等第三方庫，試圖用庫來彌補語言的不足。Angular并不依賴require.js等第三方庫，而是自己實現了模塊化系統，這個系統的核心就是模塊（module）。 所謂模塊是指把相關的一組編程元素（如類、函數、變量等）組織到同一個發布包中。這些編程元素之間緊密協作，隱藏實現細節，只通過公開的接口與其他模塊合作。模塊是一個粒度適中的復用單位，也是最常見的復用形式。比如我們常用的第三方庫往往對外公開好幾個類，使用者只要關注其公開接口就可以了，不用了解其實現細節，這種第三方庫就是一個“模塊”。Angular的module也是如此。Angular中的編程元素包括Service、Directive、Filter、Controller等，它們只有通過模塊進行“導出”才能供別人使用。 一個程序往往不會只含有一個模塊，這些模塊需要互相協作，這就導致了模塊之間具有依賴關系。 如果你曾經用jQuery寫過傳統的非MVC前端程序，你會看到的這些代碼可能會讓你感到驚訝——不再有連篇累牘的DOM操作，不再有混合了業務邏輯和視圖邏輯的臃腫代碼，不再一聽到寫測試就閃過“不可能”三個字……“光榮屬于MVC！”我們說Angular是個MVW（Model-View-Whatever）風格的框架，而在Angular中扮演Model角色的概念，就是作用域（scope）。在Angular中，scope通過原型繼承的方式被組織成了一棵樹，它的根節點就是$rootScope，這是Angular在啟動時自動創建的，它通常對應于ng-app指令，并且關聯到ng-app所在的節點。接下來，Angular會解析ng-app包含的HTML，其中的一些指令，如ng-view、ng-if、ng-repeat等也會創建自己的scope，這些scope都是從$rootScope及其子scope創建出來的，它們的嵌套關系也和這些指令的嵌套關系一致。由于它們使用了原型繼承的方式，所以，凡是上級scope擁有的屬性，都可以從下級scope中讀取，但是當需要對這些繼承下來的屬性進行寫入的時候，問題就來了：寫入會導致在下級scope上創建一個同名屬性，而不會修改上級scope上的屬性。這不是Bug，而是“原型繼承”的固有語義，這是用慣了“類繼承”的后端程序員需要特別注意的。這種scope樹很好的體現了Model之間的嵌套關系，對業務數據的結構是一個很恰當的抽象。scope之所以如此重要，是因為它事實上是Angular解耦業務邏輯層和視圖層的關鍵：Controller操作scope，View則展現scope的內容，傳統前端程序中大量復雜的DOM操縱邏輯都被轉變成對scope的操作。這種樹形結構不但體現在數據的繼承關系上，而且體現在消息的冒泡機制上