2014-11-21 131 views
1

我想在Angular中配置路由。下面是我有:以上“访问受限制的URI被拒绝”或FileNotFound角路由

<!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 - 不起作用。给文件未找到错误页面

当我尝试运行的服务器(本地主机)上述文件,我得到未找到错误页以上两个文件“不工作”的情况。

+1

根据你的配置应该是'ng-app.html#/ USA',因为你没有设置'html5Mode' – charlietfl 2014-11-22 00:14:05

回答

1

谢谢@charlietfl。 网址确实最终成为:ng-app.html#/ USA

我也想指出,我犯了一些错别字。控制器countryListCtrl和countryDetailCtrl都以定义中的小写c开头。但是我在路由部分使用了大写的C。