Angular 和 Sails 路由配置

Question

是否有任何 Sails.js（或 Node）配置可以阻止 Angular 路由工作？

无论我采取什么方法，除了sails'routes.js 中的路由之外的每一个路由都返回404。

我已经尝试了 1.2 和 1.3 Angular 版本，并且我使用的是 Sails v 0.9.15。

所有脚本都以正确的顺序加载（例如）：

<script src="/linker/js/libs/angular/angular.js"></script>
<script src="/linker/js/libs/angular/angular-resource.js"></script>
<script src="/linker/js/libs/angular/angular-route.js"></script>
<script src="/linker/js/libs/angular/angular-sanitize.js"></script>
...
<script src="/linker/js/app.js"></script>

我正在正确使用 ngRoute：

var myApp= angular.module('myApp', ['ngRoute']);

这是我在 Angular 的 app.js 中的路线：

myApp.config(['$routeProvider', function ($routeProvider) { 

$routeProvider
    .when('/profile',
        { templateUrl: 'linker/views/profile.html', controller: 'MainCtrl' })
    .when('/profile-detail',
        { templateUrl: 'linker/views/profile_detail.html', controller: 'MainCtrl' });
}]);

而且我也在使用位置提供程序：

myApp.config(function ($locationProvider) {
    $locationProvider.html5Mode(true);
});

其他细节：

ng-app 和 ng-view 放置正确，我的路径是正确的。我可以使用 Angular 正确显示 profile.html（还可以包含来自 Sails 的 Restful API 的数据）。

问题是，我只能对 Sails 的 routes.js 中定义的路线执行此操作。

例子：

module.exports.routes = {
  '/' : {
    controller: 'main',
    action: 'index'
  },
  '/signup' : {
    controller: 'main',
    action: 'signup'
  },
  '/login' : {
    controller: 'main',
    action: 'login'
  },
  '/profile': {
    controller: 'users',
    action: 'profile'
  } //......

所以基本上，为了使用 Angular 显示一些 html 内容，我必须在 Sails 的配置中定义完全相同的路由，这没有任何意义。

有什么想法吗？附言如果需要，我会提供更多数据。

Answer 1

尝试移除 html5 模式看看会发生什么：

$locationProvider.html5Mode(false);

如果您使用您的sails 应用程序只是为您的Angular 应用程序提供API，但您使用相同的后端来提供您的角度代码，那么您可以在所有API 路由前加上'api' 以防止发生冲突有角度的路线。

您将使用 /api/profile

而不是 /profile

---

编辑： 我查看了 Sails.js 框架并制作了一个小应用程序来测试它。

我能够成功地在非帆定义的角度工作中获得路线。

我认为对角度路由的工作原理存在误解。

如果您使用 window.location 更改路径或手动输入 url，浏览器将向服务器发送 get 请求。因此，在您的情况下，将请求 /profile 或 /profilee 并且服务器将查看可用路由，如果没有匹配项将抛出 404。

为了防止这种情况，您实际上应该使用角度方法更改路径。 Angular 在路径中使用 '#' 符号来防止浏览器在 url 更改时向服务器发送请求。浏览器会忽略 '#' 符号之后的更改。或者在您的情况下，使用 html5 模式可以实现类似的效果。请注意，当用户刷新页面时，使用 html5 模式可能会导致问题，因为此时会向服务器发出请求（更多关于如何解决此问题的内容，请参见下文）。

因此，您应该使用 $location 服务来使用 javascript 更改路径。在您的角度视图中，您还可以使用普通的锚标记，例如，因为角度解析那些：

<a href="/profilee">Go to profile</a>

由于您拥有的是单页应用程序，因此所有视图都由客户端处理。根 (/) 之外的所有路径都是 angular 创建的虚拟路径。它们通常不存在于服务器中。只有根可用。使用html5模式时can be a problem.

解决此问题的一种方法是重写服务器的路由以服务其他所有内容，就好像它是对根路径的请求一样。在sails 中，他们甚至建议如何在config/routes.js 中做到这一点：

  // What about the ever-popular "vanity URLs" aka URL slugs?
  // (you might remember doing this with `mod_rewrite` in Apache)
  //
  // This is where you want to set up root-relative dynamic routes like:
  // http://yourwebsite.com/twinkletoez
  //
  // NOTE:
  // You'll still want to allow requests through to the static assets,
  // so we need to set up this route to ignore URLs that have a trailing ".":
  // (e.g. your javascript, CSS, and image files)
  'get /*(^.*)': 'UserController.profile'

---

关于sails中的API，可以在config/controllers.js文件中配置前缀：

/**
 * `prefix`
 *
 * An optional mount path for all blueprint routes on a controller, including `rest`, 
 * `actions`, and `shortcuts`.  This allows you to continue to use blueprints, even if you
 * need to namespace your API methods.
 *
 * For example, `prefix: '/api/v2'` would make the following REST blueprint routes
 * for a FooController:
 *
 * `GET /api/v2/foo/:id?`
 * `POST /api/v2/foo`
 * `PUT /api/v2/foo/:id`
 * `DELETE /api/v2/foo/:id`
 *
 * By default, no prefix is used.
 */
prefix: '',