Question

我有2个文件：

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中收到以下错误？

未捕捉错误：[$ injector：nomod]模块'sportsStore'不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

Answer 1

您在初始化之前调用模块

<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) {

模块名称是大小写敏感的。您正在使用模块名称

<html ng-app="SportsStore">

但在您的js中，您的模块名称为sportsStore。

试试这个

<html ng-app="sportsStore">

Answer 2

在你的html中你的模块名称是 - SportsStore

i.e ng-app="SportsStore"

app.js中的模块名称必须与我们在ng-app中定义的值完全相似，这对于区分大小写是正确的。

angular.module("sportsStore") -- Wrong

应该是

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

您必须为模块传递空数组才能正常工作。

以下链接是一个如何创建模块和启动应用程序的示例

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

模块'sportsStore'不可用

2 个答案: