AngularJS模块不工作答案

【问题标题】：AngularJS Modules not workingAngularJS模块不工作
【发布时间】：2018-06-07 05:29:02
【问题描述】：

这是我的代码：

index.html

<!DOCTYPE html>
<html lang="en" ng-app="groceryListApp">
<meta charset="utf-8">
<head>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 101 Template</title>

<link  href="css/bootstrap.min.css" rel="stylesheet">

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.js"></script>
 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>


</head>
<body ng-controller="HomeController">
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="1">
                <span class="glyphicon glyphicon-apple" style="color: #5bdb46">
                </span>
                {{appTitle}}
            </a>
        </div>
    </div>
</nav>  

<div class="container" ng-controller="GroceryListItemsController">
    <div class="col-xs-12">
        <ul class="list-group">
            <li ng-repeat="items in groceryListItems | orderBy: 'date'" class="list-group-item-text-center clearfix">
                <span style="font-weight: bold">{{item.itemName | uppercase}}</span>
            </li>
        </ul>
    </div>
</div>

<script src="lib/jquery-3.2.1.min.js"></script>
<script type="lib/bootstrap.min.js"></script>
<script type="lib/angular.min.js"></script>
<script type="js/app.js"></script>
</body>
</html>

app.js

var app = angular.module ("groceryListApp", []);

app.controller("HomeController",["$scope", function($scope) {
    $scope.appTitle = "Grocery List";

}]);

app.controller("GroceryListItemsController", ["$scope", function($scope){

    $scope.groceryItems = [

        {completed: true, itemName: 'milk', date:'2017-10-01'},
        {completed: true, itemName: 'cookies', date:'2017-10-02'},
        {completed: true, itemName: 'ice cream',date:'2017-10-03'}.
        {completed: true, itemName: 'potatoes', date:'2017-10-04'}
        {completed: true, itemName: 'cereal', date:'2017-10-05'},
        {completed: true, itemName: 'bread', date:'2017-10-06'},
        {completed: true, itemName: 'eggs', date:'2017-10-07'},
        {completed: true, itemName: 'tortillas',date:'2017-10-08'}
]

}]);

当用chrome打开html文件时，输出为

{{appTitle}}

{{item.itemName |大写}}

控制器不在这里工作？

我用过boostrap version-v3.3.4 并且角度是最新版本。

请告诉我我应该怎么做。

谢谢

【问题讨论】：

在顶部而不是底部加载您的角度脚本
您是直接在浏览器中打开 html 文件还是为此使用任何服务器？
直接从浏览器

标签： angularjs module

【解决方案1】：

script type应该是script src，改

来自

<script type="lib/bootstrap.min.js"></script>
<script type="lib/angular.min.js"></script>
<script type="js/app.js"></script>

收件人

<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="js/app.js"></script>

【讨论】：

是的 {{appTitle}} 被替换为购物清单，但是 {{item.itemName |大写}}消失了，项目不可见
@Ashley 发生这种情况是因为您已将 ng-controller 应用于主体，因此它不需要第二个控制器
不错的观察?
@Sajeetharan 对此不确定，但由于 ng 重复数据不正确，之前没有显示项目。它应该是“杂货项目中的项目”以及脚本 src 而不是脚本类型：P