2015-10-17 80 views
0

嗨,我開始使用angularjs v1.4.7和angular-route v1.5.0來開發一個spa。

結構在我的項目是:

- static 
-- js 
---- libs 
------ angular.min.js 
------ angular-route.min.js 
---- app.js 

- web 
-- views 
----- ... my views ... 
-- index.html 

即時得到這個錯誤在瀏覽器控制檯:

Uncaught Error: [$injector:modulerr] 

我的指數:

<!DOCTYPE html> 

<html ng-app="app"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 

    <link rel="stylesheet" href="../static/bootstrap-3.3.5/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="../static/css/app.css" /> 

    <title> 
     JM2 
    </title> 

    <script type="text/javascript" src="../static/js/libs/jquery-2.1.4.min.js"></script> 
    <script type="text/javascript" src="../static/bootstrap-3.3.5/js/bootstrap.min.js"></script> 

    <script type="text/javascript" src="../static/js/libs/angular.min.js"></script> 
    <script type="text/javascript" src="../static/js/libs/angular-route.min.js"></script> 

    <script type="text/javascript" src="../static/js/app.js"></script> 
</head> 

<body> 

    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 

      <div class="navbar-header"> 
       <button type="button" 
        class="navbar-toggle collapsed" 
        data-toggle="collapse" 
        data-target="#navbar" 
        aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#"> 
        JM2 
       </a> 
      </div> 

      <div class="collapse navbar-collapse" 
       id="navbar"> 
       <ul class="nav navbar-nav"> 
        <li role="presentation"> 
         <a href="#"> 
          Home 
         </a> 
        </li> 
        <li role="presentation"> 
         <a href="#builds"> 
          Builds 
         </a> 
        </li> 
       </ul> 

       <ul class="nav navbar-nav navbar-right"> 
        <li role="presentation"> 
         <a href="#admin"> 
          Admin 
         </a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

    <div class="container-fluid"> 
     <div ng-view></div> 
    </div> 
</body> 

</html> 

我app.js:

var app = angular.module('app', ['ngRoute']); 

app.config(['$routeProvider'], function($routeProvider) { 

$routeProvider 
    .when('/', { 
     templateUrl: 'views/home.html', 
     controller: 'homeController' 
    }) 
    .when('/builds', { 
     templateUrl: 'views/builds.html', 
     controller: 'buildsController' 
    }) 
    .when('/admin', { 
     templateUrl: 'views/admin.html', 
     controller: 'adminController' 
    }) 
    .otherwise({ 
     redirectTo: '/' 
    }); 

}); 

app.controller('homeController', function($scope) { 

}); 

app.controller('buildsController', function($scope) { 

}); 

app.controller('adminController', function($scope) { 

}); 

爲什麼我有這個錯誤?我讀過一些問題,你說的是角度路由導入的問題,但我已經導入。

非常感謝您提前。

+0

只是一個方面說明,我會建議讓你使用相同的角 – JMK

+0

只是一個提示的其他部分AngularJS核心的版本,使用的UI路由器相反,它比NG路由器更好 –

回答

4

提到的依賴關係不正確。您需要將具有依賴關係名稱的數組作爲字符串傳遞,並將函數作爲數組中最後一個具有相同順序依賴關係的元素。

變化app.config(['$routeProvider'], function($routeProvider) {

app.config(['$routeProvider', function($routeProvider) { 
//      ^  Removed ] 

... 
... 

}]); // <----- Add ] here 
+0

很多感謝的人,3小時這個。 – Arturo

+0

@Arturo歡迎。很高興有幫助 – Tushar

相關問題