Question

假设我的网站上有多个部分，具体取决于某人的角色。

/客户
/管理器
/管理员

我想知道如何设置我的Angular路线，以便这样的网址成为可能：

/客户
/客户＃/帐户
/客户＃/ mybasket
/管理器
/管理者＃/帐户
/管理者＃/订单
/管理员
/管理员账户＃
/管理员＃设置

＆＃34;当＆＃34; $ routeProvider的条件只检查哈希符号后的url。如何根据URL的第一部分重新路由？或者如何为每个URL（/ customer，/ manager，/ administrator）映射唯一的routeprovider？

Answer 1

您拥有的选项是使用html5Mode=true，然后完全删除#。但这需要处理整页刷新，在这种情况下服务器需要返回正确的html。

这来自$location developer guide

服务器端

使用此模式需要在服务器端重写URL，   基本上你必须重写所有你的入口点的链接   应用程序（例如index.html）。需要标签也是   对于这种情况很重要，因为它允许Angular区分   url的一部分是应用程序库和路径   应该由申请人处理。

Answer 2

我刚刚完成了Seshadri and Green, AngularJS up and Running的新o'reilly书的阅读，他们在第10章中对此进行了广泛的讨论。迄今为止，我对ng-route的最佳描述。这个具体案例见p160-162。业。推荐这本书深入探讨角度。

要理解的一个关键概念是，当浏览器遇到网址中的#时，这是一个信号，表示不会往返于浏览器的服务器。因此，任何解决方案都需要同时具有服务器端和客户端端代码（例如，如果用户键入http://foo.com/myfoo/mybar，您的服务器必须知道哪个文件处理该路由。

因此，在较高的层面上，您需要与客户端角度代码协同工作，并使用称为“HTML5模式”和浏览器push state api的东西。我不知道你在服务器端做什么;所以我把它作为一个单独的练习;虽然它非常简单，比如node，rails和php来抓取和操纵服务器上的路由，让它返回正确的html文件来处理路由。

正如书中所述，3个步骤，缩写为：

在角度模块中启用HTML5模式作为应用配置的一部分。看起来像这样：

angular.module('myapp',[ngroute])
   .config([$locationProvider','$routeProvider',
      function($locationProvider,$routeProvider){
          $locationProvider.html5mode(true);
  }]);

将<base>部分中的<head>标记用于您的单页应用程序将管理的部分名称空间。例如，如果您正在使用像angular-seed这样的东西，并且它位于/app中的index.html中，那么该块看起来像：
```
<html>
  <head>
    <base href="/app" />
  </head>
</html>
```

这样浏览器不会根据您的操作破坏相对路径。因此，如果index.html at / app处理/ app / customer，/ app / manager等;这确保了如果用户输入/ app / customer / todd index.html页面相对链接，例如/ app / admin将以/ app而不是/ app / customer / todd开头，并将/ app / admin发送给您服务器而不是/ app / customer / todd / admin。

在服务器上，您需要确保任何子网址都重定向到处理子路由的角度页面。如果你说像角种子这样的东西;转向这种路由将要求您可能远离其使用的静态Web服务器到特定于应用程序的节点应用程序。一个相对简单的express / nodejs应用程序将确保当客户端请求/ app / customer / todd时它返回/app/index.html来处理请求。

值得阅读$location上的文档，以便更多地了解它们是如何组合在一起的。我在网上找到了another example，但忽略了3，这会导致更复杂的情况。它的代码片段比我放在这里更完整;所以可能值得链接遍历的能量。

这本书讨论了对SEO的其他影响，以及this post;但这应该让你开始。

如何使用不同的routeProvider，具体取决于您网站的某个部分

2 个答案: