Question

我正在尝试通过关注this tutorial来学习/刷新我的AngularJS知识。

我现在正在尝试完成有关视图和路由的部分。但是，当我加载main.html页面时，不会显示任何视图。我只看到了：

Before view! After view!

chrome dev控制台也是完全空的（没有错误/警告等）。

那么我错过了什么？

我在Win7 64bit pc上通过本地运行'express'node.js服务器。我正在使用http://localhost:9000/main.html

在浏览器中访问该页面

我下载了1.5.8版本的angular.js和angular-route.min.js，并将它们放在与main.html相同的目录中。

尝试：http://localhost:9000/view1.html成功显示视图的内容。

这是main.html：

<!DOCTYPE html>
<html ng-app="demoApp">
    <body>

        Before view!

        <div ng-view></div>

        After view!

        <script src="angular.min.js"></script>
        <script src="angular-route.min.js"></script>

        <script>
            var demoApp=angular.module('demoApp',['ngRoute']);

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

            });

            var controllers= {};

            controllers.SimpleController= function($scope) {
                        $scope.customers=[
                            {name:'John Smith', city: 'New York'},
                            {name: 'Bob Jones', city: 'London'},
                            {name:'David Peters', city: 'Sydney'}
                        ];
                        $scope.addCustomer=function() {
                            $scope.customers.push( { name: $scope.newCustomer.name, city: $scope.newCustomer.city });
                        }
                    };

            demoApp.controller(controllers);

        </script>

    </body>

</html>

这是view1.html：

<div class="container">
    <h2>View 1</h2>
    Name: <input type="text" ng-model="filter.name" />

    <ul>
        <li ng-repeat="cust in customers | filter:filter.name | orderBy:'name'">{{ cust.name | uppercase }} - {{ cust.city | lowercase}}</li>
    </ul>
    <br />
    Customer Name: <br/>
    <input type="text" ng-model="newCustomer.name" /> 
    <br />
    Customer City: <br/>
    <input type="text" ng-model="newCustomer.city" /> 
    <br/>
    <button ng-click="addCustomer()">Add Customer</button>

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

</div>

view2.html只是view1.html的简单版本

Answer 1

替换以下代码：

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

                });

使用以下代码：

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

    });

使用“templateUrl”替换代码中的“templateURL”，因为它区分大小写。

AngularJS中的空视图

1 个答案: