AngularJS没有#标签动态路由(AngularJS Dynamic Routes Withou

2019-10-19 03:50发布

我使用的角度和不知道如何处理那些不包含#动态创建的URL建立一个应用程序。 我曾尝试html5Mode真实的,但因为服务器正在寻找实际的目录不起作用。

我希望有,因为当你在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的请求没有#,然后将角处理从那里转发你这条路线。

查看HTML5路由的文档 。

使用该模式需要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: '/' });
    });

这样的作品,但显然是不理想的。



文章来源: AngularJS Dynamic Routes Without Hashtag