Question

这是我的代码：

的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 而角度是最新版本。

请告诉我应该做些什么。

由于

Answer 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>

AngularJS模块无法正常工作

1 个答案: