Angular ngRoute - 如果手动输入网址，则无法获取页面答案

【问题标题】：Angular ngRoute - Cannot GET page if enter url manuallyAngular ngRoute - 如果手动输入网址，则无法获取页面
【发布时间】：2015-06-22 18:13:55
【问题描述】：

我是 AngularJS 的初学者，有以下问题。我正在使用 ngRoute 模块，这是我目前的代码：

html：

<nav ng-controller="navController as nav">
    <ul>
        <li ng-repeat="item in navItems">
            <a href="{{ item.url }}">{{ item.name }}</a>
        </li>
    </ul>
</nav>


<div id="main">
    <div ng-view></div>
</div>

app.js

(function(window) {

    var app = angular.module('app', ['ngRoute']);

    app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                templateUrl : 'pages/home.html',
                controller  : 'mainController'
            })
            .when('/contact', {
                templateUrl : 'pages/contact.html',
                controller  : 'contactController'
            });

        if (window.history && window.history.pushState) {
            $locationProvider.html5Mode(true);
        }
    }]);


    app.controller('mainController', ['$scope', function($scope) {
        $scope.message = 'Hello from home page';
    }]);


    app.controller('contactController', ['$scope', function($scope) {
        $scope.message = 'Hello from contact page';
    }]);

    app.controller('navController', ['$scope', function($scope) {
        $scope.navItems = [
            { name: 'Home', url: '/' },
            { name: 'Contact', url: '/contact' }
        ];
    }]);

})(window);

而且效果很好。 Angular 呈现菜单，当我单击链接时，它会显示我想要的页面。但以下情况除外。当它显示主页（url：http://localhost:3000）并且我手动添加到 url 地址“/contact”时，我得到空白页，错误为“无法获取 /contact”。有人可以解释一下为什么会这样，我该如何解决？我将不胜感激任何帮助。谢谢。

【问题讨论】：

尝试添加#/contact
你的意思是网址？是的，然后它起作用了。但用户可能不会输入 #/contact ;] 很可能我根本不应该为此烦恼，但我很好奇是否有解决方法。
你想手动输入吗？？
您在使用 html5mode 时是否将其包含在标记中？
是的，我的中有基本标签

标签： angularjs ngroute

【解决方案1】：

事实上，对于非 HTML5 浏览器，您需要 #（井号标签）。

否则他们只会在提到的 href 处对服务器进行 HTTP 调用。 # 是一个旧的浏览器短路，它不会触发请求，它允许许多 js 框架在此之上构建自己的客户端重新路由。

您可以使用 $locationProvider.html5Mode(true) 告诉 Angular 使用 HTML5 策略（如果可用）。

这里是支持HTML5策略的浏览器列表：http://caniuse.com/#feat=history

来源：AngularJS routing without the hash '#'

【讨论】：