“访问受限制的URI被拒绝”或FileNotFound角度路由

时间:2014-11-21 23:16:58

标签: javascript jquery angularjs url-routing angularjs-routing

我正在尝试在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)上运行上述文件时,我得到了一个找不到文件的错误页面上面的两个“无效”案例。

1 个答案:

答案 0 :(得分:1)

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

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