2016-01-07 73 views
-1

我有2個文件:模塊 'sportsStore' 不可用

App.html

<!DOCTYPE html> 
<html ng-app="SportsStore"> 
<head> 
    <title>SportsStore</title> 
    <script src="scripts/angular.js"></script> 
    <link href="css/bootstrap.css" rel="stylesheet" /> 
    <link href="css/bootstrap-theme.css" rel="stylesheet" /> 
    <script src="controllers/sportsStore.js"></script> 
    <script> 
     angular.module("sportsStore", []); 
    </script> 

</head> 
<body ng-controller="sportsStoreCtrl"> 
    <div class="navbar navbar-inverse"> 
     <a class="navbar-brand" href="#">SPORTS STORE</a> 
    </div> 
    <div class="panel panel-default row"> 
     <div class="col-xs-3"> 
      Categories go here 
     </div> 
     <div class="col-xs-8"> 
      <div class="well" ng-repeat="item in data.products"> 
       <h3> 
        <strong>{{item.name}}</strong> 
        <span class="pull-right label label-primary"> 
         {{item.price | currency}} 
        </span> 
       </h3> 
       <span class="lead">{{item.description}}</span> 
      </div> 
     </div> 
    </div> 
</body> 
</html> 

SportsStore.js

angular.module("sportsStore") 
.controller("sportsStoreCtrl", function ($scope) { 
    $scope.data = { 
     products: [ 
     { 
      name: "Product #1", description: "A product", 
      category: "Category #1", price: 100 
     }, 
     { 
      name: "Product #2", description: "A product", 
      category: "Category #1", price: 110 
     }, 
     { 
      name: "Product #3", description: "A product", 
      category: "Category #2", price: 210 
     }, 
     { 
      name: "Product #4", description: "A product", 
      category: "Category #3", price: 202 
     }] 
    }; 
}); 

爲什麼會收到以下錯誤在Chrome?

Uncaught Error: [$injector:nomod] Module 'sportsStore' 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.

回答

3

要調用模塊之前初始化

<script src="controllers/sportsStore.js"></script> 
<script> 
    angular.module("sportsStore", []); 

</script> 

要創建模塊

angular.module("sportsStore", []); 

,並得到模塊

angular.module("sportsStore"); 

嘗試這樣

<script> 
    angular.module("sportsStore", []); 

</script> 
<script src="controllers/sportsStore.js"></script> 

或在您的js創建模塊

像這樣

angular.module("sportsStore",[]) 
.controller("sportsStoreCtrl", function ($scope) { 

模塊名稱是case-sensitive.You使用的模塊名稱

但在你的js你的模塊名字是sportsStore

嘗試這樣

<html ng-app="sportsStore"> 
1

在你的HTML你的模塊名稱是 - SportsStore

i.e ng-app="SportsStore" 

在app.js模塊名稱必須完全類似於我們在NG-定義的值應用程序,這是區分大小寫。

angular.module("sportsStore") -- Wrong 

應該是這樣

angular.module("SportsStore",[]) -- Right 

你要通過對模塊的空數組工作。

下面的鏈接是一個例子,如何創建模塊,並啓動應用程序

https://docs.angularjs.org/tutorial/step_02