先看程式碼:
define(['angular','angular-touch'],function(angular){
'use strict';
return angular.module('weather-app',['ngTouch']);
});
用requirejs呼叫這個模組來取得angularjs定義好的模組,結果發現在angular.module('weather-app',['ngTouch'])
這句模組定義尚未執行之前,就已經報出出錯提示[$injector:modulerr] Failed to instantiate module weather-app due to:
…(斷點設在'use strict'上斷下來的時候就已經有報錯了)。
並且發現報錯中的 module 名稱隨 html 檔案中的 ng-app
屬性值變化,上面js模組程式碼裡的weather-app
改為別的值反而沒有什麼變化。而錯誤提示的整個堆疊都只涉及到angular.js
一個資源文件,其他都是瀏覽器自帶插件的文件。
感覺好像是angular.js下載完成後就兀自先執行了,define回調function主體裡的模組定義根本沒執行,就開始檢查html標籤上的angular指令,並且試圖初始化ng-app,結果發現ng-app上所指定的名稱還沒透過angular.module('weather-app',['ngTouch']);
這句話來定義呢。
這再次確認了:之前曾經遇到的問題是一樣的。
當時是載入angular和另外兩個自訂模組,一共三個依賴項後,再執行angular.module定義的。
自訂模組人為插入超長無意義字串之後,因為必須等它載入完成才能定義angular.module(),以至於angular先於此載入完畢,並試圖初始化標籤上的ng-app而報錯誤。
所以我需要的解決方案,應該可以做到angular.js載入完畢後不會立即執行,而是等angular.module('weather-app',['ngTouch'])指令執行完,才去處理標籤上的ng-app。
別在頁面上寫
ng-app="weather-app"
, 然后再配合使用angular.bootstrap
就OK了http://docs.ngnice.com/api/ng/function/angular.bootstrap