无法在 index.html 中显示单独的视图，并且控制器也无法正常工作答案

【问题标题】：Cannot get separate views to appear in index.html, and controller is also not working无法在 index.html 中显示单独的视图，并且控制器也无法正常工作
【发布时间】：2015-01-30 06:08:35
【问题描述】：

我刚开始使用 Angular 和大部分编程。我试图在我的 index.html 页面上显示一个单独的 view1.html 文件，但它不会，所以我假设这是一个路由问题。我尝试将 view1.html 内容粘贴到 index.html 的正文中以对其进行测试，但它也没有显示控制器内容。我确定它们是简单的错误，但我找不到它们。 view.html 位于一个名为views 的单独文件夹中。为方便起见，我在 index.html 页面中只有 javascript。

index.html

<!DOCTYPE html>
<html lang="en" ng-app='demoApp'>
<head>
    <meta charset="UTF-8">
    <title>First Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<body>

<div>
    <div ng-view></div>
</div>


<script>
// create module called "demoApp" under the variable name "demoApp"
    var demoApp = angular.module('demoApp', []);

// ROUTING
    demoApp.config(function ($routeProvider) {
        $routeProvider
        .when ('/',
            {
                controller: 'SimpleController',
                templateUrl: 'views/view1.html'
            })
        .when('/view2',
            {
                controller: 'SimpleController',
                templateUrl: 'views/view2.html'
            })
        .otherwise({ redirectTo: '/' });
    });


// CONTROLLERS
demoApp.controller('SimpleController', function ($scope) {
    $scope.customers = [
        { name: 'Caleb', city: 'Indianapolis' },
        { name: 'Samantha', city: 'Zionsville' },
        { name: 'Tim', city: 'Palo Alto' }
    ];

    $scope.addCustomer = function () {
        $scope.customers.push(
            {
                name: $scope.newCustomer.name,
                city: $scope.newCustomer.city
            });
    };
}
</script>
</body>
</html>

view1.html

<h2>View 1</h2>
Name:
<input type="text" ng-model="name" />

<ul>
  <li ng-repeat="cust in customers"></li>
</ul>

Customer Name:
<input type="text" ng-model="newCustomer.name" />
<br>Customer City:
<input type="text" ng-model="newCustomer.city" />
<br>

<button ng-click="addCustomer()">Add Customer</button>

<a href="#/view2">View 2</a>

</div>

【问题讨论】：

标签： html angularjs angularjs-ng-repeat angular-routing

【解决方案1】：

您需要包含 Angular 路由器的脚本。

<head>
    <meta charset="UTF-8">
    <title>First Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.min.js"></script>

此外，您似乎缺少一个结束 </head> 标记。

这是您的 HTML 文件的工作版本：

<!DOCTYPE html>
<html lang="en" ng-app='demoApp'>
<head>
    <meta charset="UTF-8">
    <title>First Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular-route.js"></script>
</head>
<body>

<div>
    <div ng-view></div>
</div>


<script>
// create module called "demoApp" under the variable name "demoApp"
    var demoApp = angular.module('demoApp', ['ngRoute']);

// ROUTING
    demoApp.config(function ($routeProvider) {
        $routeProvider
        .when ('/',
            {
                controller: 'SimpleController',
                templateUrl: 'view1.html'
            })
        .when('/view2',
            {
                controller: 'SimpleController',
                templateUrl: 'view2.html'
            })
        .otherwise({ redirectTo: '/' });
    });


// CONTROLLERS
demoApp.controller('SimpleController', function ($scope) {
    $scope.customers = [
        { name: 'Caleb', city: 'Indianapolis' },
        { name: 'Samantha', city: 'Zionsville' },
        { name: 'Tim', city: 'Palo Alto' }
    ];

    $scope.newCustomer = { name: "", city: ""};

    $scope.addCustomer = function () {
        $scope.customers.push(
            {
                name: $scope.newCustomer.name,
                city: $scope.newCustomer.city
            });
    };
});
</script>
</body>
</html>

【讨论】：

我刚刚添加了这两个，没有任何改变。
您还需要将 'ngRoute' 添加到您的依赖项中： var demoApp = angular.module('demoApp', ['ngRoute']);而且您在 demoApp.controller 的末尾缺少一个右括号，在最后一个 } 应该是 });我进行了这些更改并发布了我在答案中的工作代码。