Angular 和 Sails 路由配置

是否有任何 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 中定义的路线执行此操作。

Example:

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 的配置中定义完全相同的路由，这是没有意义的。

有任何想法吗？附：如果需要，我将提供额外的数据。

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

$locationProvider.html5Mode(false);

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

代替/profile你将会拥有/api/配置文件

EDIT:我研究了 Sails.js 框架并制作了一个小应用程序来测试它。

我能够成功地在有角度的工作中找到不受帆定义的路线。

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

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

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

因此，您应该使用 javascript 来更改路径$地点 http://docs.angularjs.org/api/ng/service/%24location服务。在你的角度视图中，你还可以使用普通的锚标签，因为角度会解析这些标签：

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

由于您拥有的是单页应用程序，因此所有视图都由客户端处理。根目录（/）之外的所有路径都是 Angular 创建的虚拟路径。它们通常不存在于服务器中。只有 root 可用。当使用html5模式时可能是个问题 http://blog.releaseboard.com/2013/12/angular-js-gotcha-2-html5-mode.html.

解决此问题的一种方法是重写服务器的路由以服务其他所有内容，就像对根路径的请求一样。在 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'

关于sail中的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: '',