没有标签的 AngularJS 动态路由 [英] AngularJS Dynamic Routes Without Hashtag

问题描述

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

I am building an application using Angular and not sure how to handle dynamically created urls that do not contain the #. I have tried the html5Mode true but that doesn't work because the server is looking for the actual directory.

我想要一个当您输入 domain.com 时出现的应用信息主页.用户可以通过 domain.com/john 上提供的管理应用程序创建自定义页面.我下面的代码适用于主题标签，但会创建 domain.com/#/和 domain.com/#/john.

I want to have an informational homepage for the app that appears when you type in domain.com. A user can create a custom page via an admin app that would be available at domain.com/john. My code below works with hashtags but that creates domain.com/#/ and domain.com/#/john.

如何更改我的代码以实现我想要的结果?当我尝试 html5Mode 时，domain.com/john 变为 404.

How do I change my code to work for my desired outcome? When I tried the html5Mode, domain.com/john goes to a 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;

}]);

推荐答案

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

If you arrive at one of those routes from within your app it will work fine, but if you copy and paste that into your browser address bar you'll get a 404 because the server does not understand how to route to those addresses, for example if you try to go to domain.com/john you will get an error because the server is going to look for a john.html page which most likely wont be there. What you could do is configure your server to return to your base page home.html for requests without the # and then angular will handle forwarding you to that route from there.

查看 HTML5 路由文档.

使用这种模式需要在服务器端重写URL，基本上你必须重写所有指向应用程序入口点的链接(例如 index.html)

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 重写相比更糟糕的方法)是在你的路由配置中为你的资源提供完全限定的地址，例如相对于服务器的根

Another alternative (worse approach compared to server side url rewriting) is to give fully qualified addresses to your resorces in your rout config with respect to the root of the server, for example

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: '/' });
    });

这可行，但显然并不理想.

That works, but is clearly not ideal.

这篇关于没有标签的 AngularJS 动态路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！