我有实现 AngularJS 路由的 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>
测试.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>
您可以找到工作版本here http://runnable.com/me/VBgClIU-ZakCu23W
但是为什么当我在本地浏览器中运行相同的代码时它不起作用:(
这是 chrome 控制台错误：
任何帮助表示赞赏！ :)
弄清楚这一点很重要。出于安全原因，Chrome（例如）不允许您加载本地文件（即：视图模板）。我的建议是设置一个 Web 服务器来测试您的应用程序：
- 使用免费版Visual Studio Express http://msdn.microsoft.com/pt-br/library/dd537667(v=vs.100).aspx用于网络开发。
- Use gruntjs http://gruntjs.com/快速设置您的项目。
或者，您可以使用内联模板来代替从外部加载它，但这似乎不是一个好的做法。
Edit:
使用您发布的控制台错误打印，Chrome 正在阻止您的 ajax 请求。您可以使用命令行参数绕过此限制：
chrome.exe --allow-file-access-from-files
不过，我鼓励您建立一个简单的本地网络服务器，它将防止您在学习时遇到一些令人头痛的问题......
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
