AngularJS没有主题标记动态路由 [英] AngularJS Dynamic Routes Without Hashtag

问题描述

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

我希望有，因为当你在domain.com键入出现的应用程序的信息网页。用户可以通过管理应用，将可于domain.com/john创建自定义页面。下面我的code工作与主题标签，但创建domain.com/#/和domain.com /＃/约翰。

如何更改我的code为我的期望结果的工作？当我尝试了html5Mode，domain.com/john都到了404。

app.js

 配置（['$ routeProvider'，函数（$ routeProvider）{
    $ routeProvider.when（'/'，{templateUrl：意见/ home.html做为'，控制器：'HomeCtrl'}）;
    $ routeProvider.when（'/：用户'，{templateUrl：意见/ user.html'，控制器：'UserCtrl'}）;
    $ routeProvider.otherwise（{redirectTo：'/'}）;
    //$locationProvider.html5Mode(true）;
}]）;
 

controller.js

 控制器（'UserCtrl'，['$范围，$ routeParams'，函数（$范围，$ routeParams）{    VAR参数= $ routeParams.user;}]）;
 

解决方案

如果您从您的应用程序内到达的路线之一它会正常工作，但如果您复制并粘贴到浏览器地址栏，你会得到404因为服务器不知道如何路由到这些地址，例如，如果你试图去domain.com/john~~V你会得到一个错误，因为服务器是要寻找一个john.html网页，其中最有可能不会在那里。你可以做的就是配置您的服务器返回到你的基地页面home.html的要求为不包含＃，然后角度将处理从那里转发你这条路线。

查看HTML5路由中的文档。

  

使用该模式需要URL重写，服务器端的，基本上你
  不得不重写所有的链接到应用程序的入口点
  （例如：index.html）

另一种选择（更糟糕的做法相比，服务器端的URL重写）相对于给完全合格的地址，在您的溃败配置你的资源与服务器的根目录，例如：

  VAR myRoutingApp = angular.module（'routingApp'，['ngResource'，'ngRoute'，'kendo.directives'，'ngGrid']）
    的.config（函数（$ routeProvider，$ locationProvider）{
        $ routeProvider.when（'/'，{templateUrl：../Angular/AngularSeed/app/templates/Home.html'，控制器：'../Angular/AngularSeed/app/controllers/HomeController'}）;
        $ routeProvider.when（'/公司'，{templateUrl：../Angular/AngularSeed/app/templates/Page1.html'，控制器：'../Angular/AngularSeed/app/controllers/Page1Controller'}）;
        $ routeProvider.when（'/ CreateCompany'，{templateUrl：../Angular/AngularSeed/app/templates/Page2.html'，控制器：'../Angular/AngularSeed/app/controllers/Page2Controller'}）; ......
        $ locationProvider.html5Mode（真）;        $ routeProvider.otherwise（{redirectTo：'/'}）;
    }）;
 

这工作，但显然是不理想的。

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.

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.

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;

}]);

解决方案

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.

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)

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屋！