gpt4 book ai didi

javascript - AngularJS 路由/加载文件问题

转载 作者:行者123 更新时间:2023-11-28 00:00:25 26 4
gpt4 key购买 nike

我正在尝试使用 ng-view 创建单页 Web 应用程序,但无法继续。 html 页面加载似乎出现问题,我不知道该怎么办。有人能够找出我的程序出了什么问题吗?

以下文件包含在名为“Example”的目录中:

  • Angular.js (v1.4.3)
  • Angular-route.js (v1.4.3)
  • 脚本.js
  • index.html
  • first.html
  • 第二个.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>

脚本.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: '/'
});
}]);

第一个.html

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

第二个.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)

提前致谢。

最佳答案

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

关于javascript - AngularJS 路由/加载文件问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31860507/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com