javascript - 没有标签的 AngularJS 动态路由

Question

我正在使用 Angular 构建应用程序，但不确定如何处理动态创建的不包含 # 的 url。我试过 html5Mode true 但这不起作用，因为服务器正在寻找实际目录。

我想要一个在您输入 domain.com 时显示的应用主页信息。用户可以通过 domain.com/john 上可用的管理应用程序创建自定义页面。我下面的代码使用主题标签，但创建了 domain.com/#/和 domain.com/#/john。

如何更改我的代码以实现我想要的结果？当我尝试 html5Mode 时，domain.com/john 转到 404。

app.js

config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {templateUrl: 'views/home.html', controller: 'HomeCtrl'});
    $routeProvider.when('/:user', {templateUrl: 'views/user.html', controller: 'UserCtrl'});
    $routeProvider.otherwise({redirectTo: '/'});
    //$locationProvider.html5Mode(true);
}]);

controller.js

controller('UserCtrl', ['$scope', '$routeParams', function ($scope, $routeParams) {

    var param = $routeParams.user;

}]);

Answer 1

如果您从您的应用程序中到达这些路线之一，它会正常工作，但如果您将其复制并粘贴到您的浏览器地址栏中，您将获得 404，因为服务器不了解如何路由到这些地址，例如，如果您尝试访问 domain.com/john，您将收到错误消息，因为服务器将查找 john.html 页面，而该页面很可能不存在。你可以做的是将你的服务器配置为返回到你的基本页面 home.html 以获取不带 # 的请求，然后 angular 将处理从那里转发你到该路由。

See the docs on HTML5 routing .

Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)

另一种选择(与服务器端 url 重写相比更糟糕的方法)是在路由配置中相对于服务器的根目录为资源提供完全限定的地址，例如

var myRoutingApp = angular.module('routingApp', ['ngResource', 'ngRoute', 'kendo.directives', 'ngGrid'])
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider.when('/', { templateUrl: '../Angular/AngularSeed/app/templates/Home.html', controller: '../Angular/AngularSeed/app/controllers/HomeController' });
        $routeProvider.when('/Companies', { templateUrl: '../Angular/AngularSeed/app/templates/Page1.html', controller: '../Angular/AngularSeed/app/controllers/Page1Controller' });
        $routeProvider.when('/CreateCompany', { templateUrl: '../Angular/AngularSeed/app/templates/Page2.html', controller: '../Angular/AngularSeed/app/controllers/Page2Controller' }); ......
        $locationProvider.html5Mode(true);

        $routeProvider.otherwise({ redirectTo: '/' });
    });

这行得通，但显然不理想。