Question

我写了一个文件new.html，我正在尝试测试导航。但是当我加载页面View1.html应该加载但它显示一个空白页面。这是我的new.html：

<!DOCTYPE html>
<html data-ng-app="demoApp">
    <head> 
        <title> Angular Test</title>
    </head>
    <body>
        <div>
            <div data-ng-view></div>
        </div>
        <script src = "Scripts/angular.min.js"></script>
        <script src="Scripts/angular-route.min.js"></script>
    </body>
    <script>
        var demoApp = angular.module('demoApp', ['ngRoute']);
        demoApp.config(function ($routeProvider) {
            $routeProvider
                .when('/', 
                {
                    controller: 'SimpleCtr',
                    templateUrl: 'View1.html'
                })
                .when('/2',
                {
                    controller: 'SimpleCtr',
                    templateUrl: 'View2.html'
                })
                .otherwise({ redirectTo: '/' });
        });
        demoApp.controller('SimpleCtr', function($scope) {
                $scope.customers = [
                    { name:'Rajat', city:'Kanpur' }, 
                    { name:'Adarsh', city:'Lucknow' }, 
                    { name:'Manoj', city:'Banaras' }
                ];

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

这是我的View1.html：

<div class="container">
    <h2> View 1 </h2>
    Name: <br/>
    <input type="text" data-ng-model="filter.name"/>
    <br/>
    <ul>
        <li data-ng-repeat = "cust in customers | filter:filter.name | orderBy:'city'"> {{cust.name}} </li>
    </ul>
    Customer Name: <br/>
    <input type="text" data-ng-model="newCustomer.name"/>
    <br />
    Customer City: <br />
    <input type="text" data-ng-model="newCustomer.city"/>
    <br />
    <button data-ng-click = "addCustomer()"> Add Customer </button>
    <a href = "#/2" > View 2 </a>   
</div>

以下是View2.html：

<div class="container">
        <h2> View 2 </h2>
        City:
        <br/>
        <input type="text" data-ng-model="city" />
        <br/>
        <ul>
            <li data-ng-repeat = "cust in customers | filter:filter.city | orderBy:'city'"> {{cust.name}} </li>
        </ul>
</div>

请在我出错的地方帮助我？

Answer 1

您在第8行的代码中缺少结束括号

<!DOCTYPE html>
<html data-ng-app="demoApp">
    <head> 
        <title> Angular Test</title>
    </head>
    <body>
        <div>
            <div data-ng-view> </div> <!-- right here -->
        </div>

我在这里创建了一个plunker：documentation from here http://plnkr.co/edit/uj4S1ybv7vJSsQctG1nD

您的视图未加载，因为您尝试使用file://协议访问它们。如果您将您的网站放在HTTP服务器上（例如XAMPP），您将获得所需的结果。

Answer 2

它适用于Plnkr。 http://plnkr.co/edit/NmfnOMTRHXzsLkcHfgZX?p=preview

我最好的猜测是你没有在HTTP服务器上运行该文件。最简单的HTTP服务器是，在您的工作目录中运行此命令：

python -m SimpleHTTPServer

然后，在浏览器中请求您的程序

localhost:8000/new.html

Angular- View未加载

2 个答案: