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

使用此模式需要在服务器端重写URL，基本上是您必须重写所有链接到您的应用程序的入口点（例如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: '/' });
    });

这有效，但显然不理想。

没有Hashtag的AngularJS动态路由

1 个答案: