Question

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

无论我采取什么方法，除了帆的路线之外的每一次溃败都会返回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'以防止发生冲突有角度的路线。

而不是 / profile 你将拥有 / api / profile

修改我已经看了一下Sails.js框架并制作了一个小应用程序来测试它。

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

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

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

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

因此，您应该使用javascript更改路径的是$location服务。在你的角度视图中，你也可以使用普通的锚标签，因为angular解析那些：

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

由于您拥有的是单页面应用程序，所有视图都由客户端处理。超出根（/）的所有路径都是由angular创建的虚拟路径。它们通常不存在于服务器中。只有root可用。使用can be a problem。
的html5模式时
解决这个问题的方法是重写服务器的路由以提供其他所有内容，就好像它是对根路径的请求一样。在帆中，他们甚至建议如何在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: '',

Angular和Sails路由配置

1 个答案: