2014-02-20 30 views
2

我試圖通過讀取這個POST來延遲加載文件。 但無法實現它。我在螢火蟲中收到'模塊錯誤'錯誤。延遲加載時出現模塊錯誤

這裏是我的項目結構:

root 
|----app 
    |----script.js 
    |----app.js 
    |----appBootstrap.js 
    |----login 
      |----login.html 
      |----login.js 
    |----vendor 
      |----angular.min.js 
      |----angular-route.min.js 
|----index.html 

的index.html代碼:

<!DOCTYPE HTML> 
    <html ng-app="myApp"> 
    <head> 

    </head> 
    <body ng-view=""> 

     <!-- javascript files--> 
     <script type="text/javascript" rel="javascript" src="app/vendor/angular.min.js"></script> 
<script type="text/javascript" rel="javascript" src="app/vendor/angular-route.min.js"></script> 
<script type="text/javascript" rel="javascript" src="app/script.js"></script> 
     <script type="text/javascript" rel="javascript" src="app/appBootstrap.js"></script> 

    </body> 
    </html> 

app.js代碼:

(function() 
{ 
    var myApp = angular.module('myApp',[]); 

    myApp.config(function($routeProvider, $controllerProvider, $filterProvider, $provide) 
     { 
      myApp.controllerProvider = $controllerProvider; 
      myApp.compileProvider = $compileProvider; 
      myApp.routeProvider  = $routeProvider; 
      myApp.filterProvider  = $filterProvider; 
      myApp.provide   = $provide; 

      $routeProvider.when('/', {templateUrl:'login/login.html', resolve:{ deps: function($q, $rootScope) 
      { 
       var deferred = $q.defer(); 
       // Add dependencies here 
       var dependencies = 
        [ 
         'login/login.js' 
        ]; 

       $script(dependencies, function() 
       { 
        // all dependencies have now been loaded by $script.js so resolve the promise 
        $rootScope.$apply(function() 
        { 
         deferred.resolve(); 
        }); 
       }); 

       return deferred.promise; 
      }}}); 
     }); 
})(); 

appBootstrap.js代碼:

$script(['app.js'], function() 
{ 
    angular.bootstrap(document, ['myApp']) 
}); 

當我嘗試加載根文件夾在瀏覽器中,我得到以下錯誤

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.13/$injector/modulerr?p0=myApp&p1=Error%3A%…calsearch_new%2Fbranches%2Fb1.0%2Fapp%2Fvendor%2Fangular.min.js%3A32%3A232) 

可能有人請解釋一下我究竟做錯了什麼?

更新1:如所建議的通過@kartikluke加入ngRoute文件(角route.min.js),但仍顯示出相同的錯誤,但現在兩次

回答

4

那麼我隨後在錯誤的鏈接

Module Error 
error 
Description 
This error occurs when a module fails to load due to some exception. The error message above should provide additional context. 

In AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x, be sure that you've installed ngRoute.

添加ngRoute

好吧,所以它似乎不是ngRoute。

如果你不知道缺少哪個模塊,使用不精縮angular.js這給可讀的錯誤信息:"Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument."

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script> 
<script type="text/javascript" rel="javascript" src="app/vendor/angular-route.js"></script> 
<script type="text/javascript" rel="javascript" src="app/app.js"></script> 
<script type="text/javascript" rel="javascript" src="app/script.js"></script> 
<script type="text/javascript" rel="javascript" src="app/appBootstrap.js"></script>` 

好吧,我通過你的代碼看着,我發現與更換後unminified代碼並將app.js添加到腳本中,我發現模塊$ compileProvider沒有被注入。

enter image description here

myApp.config(function($routeProvider, $controllerProvider, $filterProvider, $provide, $compileProvider)

到底很簡單。使用cdn和unminified代碼會給你正確的錯誤。

+0

嘗試添加ngRoute文件,但仍然給出相同的錯誤 – VishwaKumar

+1

使用非縮小版本的Angular它會給你可讀的錯誤。 – kartikluke

+0

對不起,沒有得到任何可讀的錯誤也使用非縮小後,錯誤仍然存​​在 – VishwaKumar