Angular和Sails路由配置

是否有任何Sails.js(或节点)配置可以阻止Angular路由工作？

无论我采取什么样的方法,除了帆的路线之外的每一次溃败都会返回404.

我已经尝试了1.2和1.3 Angular版本,我正在使用Sails v 0.9.15.

所有脚本都以正确的顺序加载(例如):

...

我正确使用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的配置中完全定义相同的路由,这没有任何意义.

有任何想法吗？PS如果需要,我会提供额外的数据.

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

$locationProvider.html5Mode(false);

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

而不是/ profile你会有/ api/profile

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

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

我认为对角度路由的工作方式存在误解.

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

为了防止这种情况,您应该使用angular方法实际更改路径.Angular 在路径中使用"#"符号来阻止浏览器在URL更改时向服务器发送请求.浏览器忽略'#'符号后的更改.或者在您的情况下,使用html5模式可以实现类似的效果.请注意,当用户刷新页面时,使用html5模式会导致麻烦,从那时起将向服务器发出请求(更多关于如何修复下面的内容).

那么,你应该使用javascript更改路径的是$ location服务.在你的角度视图中,你也可以使用普通的锚标签,因为angular会解析那些:

Go to profile

由于您拥有的是单页面应用程序,因此所有视图都由客户端处理.超出根(/)的所有路径都是由angular创建的虚拟路径.它们通常不存在于服务器中.只有root可用.使用html5模式时可能会出现问题.

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