为什么 AngularJS 路由在本地不起作用？
[英]Why AngularJS routes are not working in local?
问题描述
I have html file which implements AngularJS routes as follows,
我有如下实现 AngularJS 路由的 html 文件，
index.html:索引.html：
<!DOCTYPE html>
<html ng-app="demo">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.1/angular-route.min.js"></script>
<script>
// Code goes here
var demo = angular.module('demo', ['ngRoute']);
demo.config(function($routeProvider){
$routeProvider.when('/', {
controller: 'testController',
templateUrl: 'test.html'
})
})
var controllers = {};
controllers.testController = function($scope){
$scope.first = "Info";
$scope.customers=[
{name:'jerry',city:'chicago'},
{name:'tom',city:'houston'},
{name:'enslo',city:'taipei'}
];
}
demo.controller(controllers)
</script>
</body>
</html>
test.html:测试.html：
<div>
<input type="text" ng-model="name"/>
</br>
{{first}}
</br>
<ul>
<li ng-repeat="cust in customers | filter:name">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div>
You can find the working version here你可以在这里找到工作版本
But why is it not working when I run the same in my local browser :(但是为什么当我在本地浏览器中运行它时它不起作用:(
Here is the chrome console error:这是 chrome 控制台错误：
Any help appreciated!任何帮助表示赞赏！ :) :)
4 个解决方案
解决方案1
4 已采纳 2014-09-16 11:34:12
It is important to make it clear.说清楚很重要。 For security reasons, Chrome (for example) won't allow you to load local files (ie: the templates for your views).出于安全原因，Chrome（例如）不允许您加载本地文件（即：视图的模板）。 My suggestion is to set up a web server to test your applications:我的建议是设置一个 Web 服务器来测试您的应用程序：
- Use the free edition of theVisual Studio Express for web development.使用免费版的Visual Studio Express进行 Web 开发。
- Use gruntjs to quickly set up your project.使用gruntjs快速设置您的项目。
Alternatively you can use inline templates in place of loading it externally, but it does not seems to be a good practice.或者，您可以使用内联模板代替外部加载，但这似乎不是一个好习惯。
Edit:编辑：
Using the console error print that you posted, Chrome is blocking your ajax request.使用您发布的控制台错误打印，Chrome 阻止了您的 ajax 请求。 You can bypass this restriction using a command line argument:您可以使用命令行参数绕过此限制：
chrome.exe --allow-file-access-from-files
However I would encourage you to set up a simple local web server, It will prevent you for some headaches while your are learning...但是，我鼓励您设置一个简单的本地 Web 服务器，它可以防止您在学习时遇到一些麻烦...
解决方案2
0 2014-09-16 11:41:56
You can use Firefox for test.您可以使用 Firefox 进行测试。 Route and ajax will work.路由和 ajax 将起作用。 But it is better to set up a web server like @gustavodidomenico said但是最好设置一个像@gustavodidomenico 所说的网络服务器
解决方案3
0 2015-11-27 09:44:40
the work around to make ng-view work in local is to put the content of other htmls in the script tag as使 ng-view 在本地工作的解决方法是将其他 html 的内容放在脚本标记中
<script type="text/ng-template" id="index22.html">
This is index 2 template.
</script>
<script type="text/ng-template" id="index33.html">
This is index 3 template.
</script>
in the same HTML from where the call is being made.在进行调用的同一 HTML 中。
ngview makes an AJAX call to load the content of external HTMLs or seperate HTMLs , chrome does not allow AJAX call for local resources , IE 11 also shows 'Access is denied' error message. ngview 进行 AJAX 调用以加载外部 HTML 或单独 HTML 的内容，chrome 不允许对本地资源进行 AJAX 调用，IE 11 还显示“访问被拒绝”错误消息。
when including in script tags , this AJAX call is not made.当包含在脚本标签中时，不会进行此 AJAX 调用。
解决方案4
0 2020-10-20 11:22:38
There is a Chrome Extension called Web Server for Chrome .有一个名为Web Server for Chrome的Chrome Extension 。 you can add it and then lunch it, in browse dialog choose your working folder, then it gives you a Local URL , you can test your app there.你可以添加它然后午餐它，在浏览对话框中选择你的工作文件夹，然后它给你一个Local URL ，你可以在那里测试你的应用程序。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.