【发布时间】：2015-12-25 08:30:30
【问题描述】：
我写了一个文件 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>
请帮我看看哪里出错了？
【问题讨论】：
-
我试过 但现在我收到错误，因为 XMLHttpRequest 无法加载文件：//localhost/Users/XYZ/angularTest/View1.html .跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。
-
还有 2 个错误：无法在 'XMLHttpRequest' 上执行 'send' 和错误：[$compile:tpload]
-
在windows上安装像XAMPP这样的网络服务器，通过
localhost:80访问你的网站 -
您必须通过 http 运行，而不仅仅是使用浏览器访问文件。
标签： javascript html angularjs