Question

我正在尝试使用ng-view创建单页面Web应用程序，但我无法进展。在html页面中加载似乎有问题，我不知道如何处理它。是否有人能够确定我的计划有什么问题？

以下文件包含在名为Example的目录中：

angular.js（v1.4.3）
angular-route.js（v1.4.3）
的script.js
的index.html
first.html
second.html

的index.html

<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="script.js"></script>
</head>

<body ng-app="RoutingApp">
<div>
<h2>AngularJS Routing Example</h2>
<p>Jump to the <a href="#first">first</a> or <a href="#second">second page</a></p>
<div ng-view></div>
</div>
</body>
</html>

的script.js：

var app = angular.module('RoutingApp', ['ngRoute']);

app.config( [ '$routeProvider', function($routeProvider) {
$routeProvider
    .when('/first', {
        templateUrl: 'first.html'
    })
    .when('/second', {
        templateUrl: 'second.html'
    })
    .otherwise({
        redirectTo: '/'
    });
}]);

first.html

<h2>This is the first page.</h2>

second.html

<h2>This is the second page.</h2>

从Chrome调试控制台：

XMLHttpRequest cannot load file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/first.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/first.html'.
at Error (native)
at file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:10514:11
at sendReq (file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:10333:9)
at serverRequest (file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:10045:16)
at processQueue (file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:14567:28)
at file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:14583:27
at Scope.$eval (file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:15846:28)
at Scope.$digest (file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:15657:31)
at Scope.$apply (file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:15951:24)
at HTMLBodyElement.<anonymous> (file:///C:/Users/d.n.harvey.macaulay/Desktop/Example/angular.js:12086:24)(anonymous function) @ angular.js:12330 Error: [$compile:tpload] Failed to load template: first.html (HTTP status: undefined undefined)
http://errors.angularjs.org/1.4.3/$compile/tpload?p0=first.html&p1=undefined&p2=undefined
at angular.js:68
at handleError (angular.js:17530)
at processQueue (angular.js:14567)
at angular.js:14583
at Scope.$eval (angular.js:15846)
at Scope.$digest (angular.js:15657)
at Scope.$apply (angular.js:15951)
at HTMLBodyElement.<anonymous> (angular.js:12086)
at HTMLBodyElement.eventHandler (angular.js:3271)

提前致谢。

Answer 1

这是因为浏览器不允许通过AJAX请求访问本地文件。您需要使用网络服务器（例如apache）为您的网页提供服务，并使用http://localhost/index.html

访问该网页

Answer 2

首先是<a href="#first">first</a> or <a href="#second">second page</a></p>

应该有以下方式的链接

 <a href="#/first">first</a>

其次，您是否正确加载模板网址，请查看此帖AngularJS writing an app with no server

AngularJS路由/加载文件问题

2 个答案: