Angular和Sails路由配置 [英] Angular and Sails routing configuration
问题描述
是否有任何Sails.js(或Node)配置可以阻止Angular路由工作?
无论我采用哪种方法，除帆帆route.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的route.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的配置中定义完全相同的路由，这没有任何意义.
有什么想法吗? P.S.如果需要，我将提供其他数据.
尝试删除html5模式以查看会发生什么情况:
$locationProvider.html5Mode(false);
如果您仅使用Sails应用程序来为Angular应用程序提供API，但是使用相同的后端来提供您的角度代码，则可以在所有API路由前加上"api"前缀，以防止发生冲突有角度的路线.
您将拥有/api/profile
而不是/profile我研究了Sails.js框架，并制作了一个小应用程序对其进行测试.
我能够成功地在风帆未定义的角度作业中使用航线.
我认为角度布线的工作方式存在误解.
如果使用window.location更改路径或手动键入url，浏览器将向服务器发送获取请求.因此，在您的情况下，将请求/profile或/profilee，并且服务器将查看可用的路由，如果没有匹配项，则会抛出404.
为防止这种情况，您实际上应该使用角度方法更改路径. Angular在路径中使用'#'符号来防止浏览器在URL更改时向服务器发送请求.浏览器忽略'#'符号后的更改.或者，在您的情况下，使用html5模式也可以达到类似的效果.请注意，虽然使用html5模式可能会在用户刷新页面时引起麻烦，但此后会向服务器发出请求(有关如何在下面修复该问题的更多信息).
因此，您要使用javascript更改路径的方法是 $ location 服务.在角度视图中，您还可以使用普通的锚标记，例如，因为角度可以解析这些标记:
<a href="/profilee">Go to profile</a>
由于您拥有的是单页应用程序，因此所有视图均由客户端处理.根(/)以外的所有路径都是由angular创建的虚拟路径.它们通常不存在于服务器中.仅根目录可用.使用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'
关于航行中的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: '',
Is there any Sails.js (or Node) configuration which can prevent Angular routing from working?
No matter what approach I take, every rout apart from ones in sails' routes.js return 404.
I've tried both 1.2 and 1.3 Angular versions, and I'm using Sails v 0.9.15.
All scripts are loaded in correct order (for example):
<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>
I'm using the ngRoute correctly:
var myApp= angular.module('myApp', ['ngRoute']);
Here are my routes in Angular's 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' });
}]);
And I'm also using location provider:
myApp.config(function ($locationProvider) {
$locationProvider.html5Mode(true);
});
Additional details:
ng-app and ng-view are correctly placed, and my paths are correct. I can correctly show profile.html with Angular (and also to include data from Sails' Restful API).
Problem is, that I can only do that for routes defined in 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'
} //......
So basically, in order to show some html content with Angular, I have to define EXACTLY THE SAME route in Sails' configuration, which makes no sense.
Any ideas? P.S. I'll provide additional data if needed.
Try removing the html5 mode to see what happens:
$locationProvider.html5Mode(false);
If you are using your sails application only to provide an API for your Angular app, but you are using the same backend to serve your angular code, then you could prefix all API routes with 'api' in order to prevent having conflicts with angular routes.
Instead of /profile you would have /api/profile
EDIT: I've taken a look into the Sails.js framework and made a small app to test it.
I was able to successfully have routes in angular work that were not defined by sails.
I think there is a misunderstanding of how angular routing works.
If you change the path with window.location or type the url manually, the browser will send a get request to the server. So in your case, there will be a request for /profile or /profilee and the server will look at the available routes and will throw a 404 if nothing matches.
To prevent that, you should actually change the path using angular methods. Angular uses the '#' symbol in the path to prevent the browser of sending requests to the server when the url changes. Browsers ignore changes after the '#' symbol. Or in your case, a similar effect is achieved using the html5 mode. Beware though that using html5 mode can cause troubles when users refresh the page, since then a request will be made to the server (more on how to fix that below).
So, what you should be using to change the paths with javascript is the $location service. In your angular views, you can also use normal anchor tags like, because angular parses those:
<a href="/profilee">Go to profile</a>
Since what you have is a single page application, alls views are handled by the client. All the paths beyond the root (/) are virtual paths created by angular. They usually don't exist in the server. Only the root is available. When using html5 mode that can be a problem.
A way to fix that is to rewrite the routing of the server to serve everything else as if it was a request to the root path. In sails they even suggest how to do that in the 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'
Regarding the API in sail, you can configure a prefix inside the config/controllers.js file:
/**
* `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路由配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
