角度视图未加载

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>

我在这里创建了一个插件： http ://plnkr.co/edit/uj4S1ybv7vJSsQctG1nD 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

角度视图未加载

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-09-28 06:56:11

解决方案2
0 2015-09-28 07:07:48

角度视图未加载

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-09-28 06:56:11

解决方案2 0 2015-09-28 07:07:48

解决方案1
1 已采纳 2015-09-28 06:56:11

解决方案2
0 2015-09-28 07:07:48