为什么AngularJS路由在本地不起作用? [英] Why AngularJS routes are not working in local?
问题描述
我有一个实现AngularJS路由的html文件，
index.html:
<！DOCTYPE html>< html ng-app ="demo">< head>< link rel ="stylesheet" href ="style.css"></head><身体>< 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>//代码在这里var demo = angular.module('demo'，['ngRoute']);demo.config(function($ routeProvider){$ routeProvider.when('/'，{控制器:"testController"，templateUrl:"test.html"})})var controllers = {};controllers.testController = function($ scope){$ scope.first =信息";$ scope.customers = [{name:'jerry'，city:'chicago'}，{name:'tom'，city:'houston'}，{name:'enslo'，city:'taipei'}];}demo.controller(控制器)</script></body></html> test.html:
< div>< input type ="text" ng-model ="name"/></br>{{第一的}}</br>< ul>< li ng-repeat =在客户中锁定| filter:name"> {{cust.name |大写}}-{{cust.city}}</li></ul></div> 您可以在用于Web开发.
或者，您可以使用内联模板代替从外部加载它，但这似乎不是一个好习惯.
使用您发布的控制台错误打印，Chrome阻止了您的Ajax请求.您可以使用命令行参数来绕过此限制:
chrome.exe-允许文件访问文件 不过，我鼓励您设置一个简单的本地Web服务器，这样可以避免您在学习过程中头疼.
I have html file which implements AngularJS routes as follows,
index.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:
<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:
Any help appreciated! :)
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). My suggestion is to set up a web server to test your applications:
- Use the free edition of the Visual Studio Express for web development.
- Use gruntjs to quickly set up your project.
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. 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...
这篇关于为什么AngularJS路由在本地不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
