Question

我刚刚开始使用Angular和大多数编程。我正在尝试制作一个单独的view1.html文件出现在我的index.html页面上，但它不会，所以我假设这是一个路由问题。我尝试粘贴index.html主体中的view1.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>

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

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

1 个答案: