Argument 'xxx' is not a function, got undefined,初學Angular的第一個坑

　　終於考完試了，在沒更新的這一段時間裏，一直都在忙於應付考試。不過在期間也是接觸到不少好玩的東西，比如Html5的Canvas，我用lufylegend的Html5引擎做了個《看你有所色》的遊戲。還有最近剛開始玩的Angular。

　　Angular也是早有聽說了啊，一直沒閒下功夫研究，趁着放假，學一學。慕課網（www.imooc.com）裏有一套教程，還是很不錯的。但是真正上手編碼的時候就發現，尼瑪！例子都跑不起來，全是報錯，Argument 'xxx' is not a function, got undefined是最顯眼的錯誤。我們先來看看教程中的“錯誤”代碼是怎樣的。

　　來一個最簡單的 Hello World 吧！

　　我們一般接觸到的第一個入門教程都是類似與這樣的，代碼簡單。我們有個ng-app作爲Angular的啓動口，然後ng-controller="helloCtrl"控制p標籤。View層，則用雙花括號出入數據greeting的message值。然後在下面的script定義了一個helloCtrl的函數，併爲$scope.greeting賦了值。這一切看起來都是那麼自然，想象中，瀏覽器就該出現，"Hello, World!"。可惜的是，瀏覽器給了我們這樣的回覆。

　　

　　沒錯，這就是開頭所說的那個。於是我弄不懂，爲什麼老師可以跑通，我卻跑不通，大家都是Angular-1.3.0。國內不給力，很難找到答案，最後去StackOverflow找到了。因爲從Angular-1.3.0 beta15開始，Angular不再支持全局的Controller！那麼問題來了，如何在Angular裏定義模塊呢？

　　當然這篇blog是爲了讓大家學習Angular的時候別遇到閉門羹，我大致說一下。AngularJs裏，有一個angular.module，模塊機制就是靠這個來加載的。我們來看看如何可以重新出現夢寐以求的“Hello World”。

　　

　　我們看看，改了什麼，ng-app="myApp"首先給入口賦了名字，然後再下面進行模塊的初始化。在angular.module(String, moduleArray)函數裏，第一個String參數是該模塊的名字，第二個參數是所依賴的模塊（這裏暫時用不着），返回了myApp這個模塊，然後再通過模塊的controller方法定義helloCtrl控制器即可。

 

　　當然我們要解釋依賴模塊的話，我們可以看一下稍作修改的第三版Demo

僅僅是多定義一個helloController模塊，這樣myApp，就可以僅僅作爲啓動口，而不會混雜着控制器。我們可以定義多個js文件，清晰明確的通過模塊梳理整個項目的結構。