我正在尝试在Angular中配置路由。这就是我所拥有的:
<!DOCTYPE html>
<html ng-app="countryApp">
<head>
<meta charset="utf-8">
<title>Angular.js-add routes</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js"></script>
<script>
var countryApp = angular.module('countryApp', ['ngRoute']);
countryApp.config(function($routeProvider){
$routeProvider.
when('/',{
template: '<ul><li ng-repeat="country in countries">{{country.countryName}}</li></ul>',
controller: 'CountryListCtrl'
}).
when('/:countryName',{
template: '<h1>TODO create country detail view</h1>',
controller: 'CountryDetailCtrl'
}).
otherwise({
redirectTo:'/'
});
});
countryApp.controller('countryListCtrl', function($scope,$http){
$http.get('countries.php').success(function(data){
$scope.countries=data;
});
});
countryApp.controller('countryDetailCtrl', function($scope,$routeParams){
console.log($routeParams);
});
</script>
</head>
<body ng-controller= "countryListCtrl">
<ul>
<li ng-repeat="country in countries">{{country.countryName}}</li>
</ul>
</body>
</html>
上述代码保存在ng-app.html文件中。
我的问题:
ng-app.html -works
ng-app.html / - 不起作用。提供“访问限制URI拒绝.....”错误
ng-app.html / USA - 不起作用。提供找不到文件错误页面
当我尝试在服务器(localhost)上运行上述文件时,我得到了一个找不到文件的错误页面上面的两个“无效”案例。
答案 0 :(得分:1)
谢谢@charlietfl。 网址确实最终成为:ng-app.html#/ USA
我还想指出我做了一些错别字。控制器countryListCtrl和countryDetailCtrl都以定义中的小写c开头。但我在路由部分使用了大写的C语言。