[英]Using both Angular routeProvider and Express routes
I'm trying to make angular's routeProvider to manage all the routes of my app. 我正在尝试使angular的routeProvider来管理我的应用程序的所有路由。 I define my routes accordingly in the app.js file of angular (client side): 我在angular(客户端)的app.js文件中相应地定义了我的路线:
(function(){
var app = angular.module("Crowdsourcing", ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/single/:street/:buildingNumber/:apartmentNumber", {
templateUrl: "/views/single.html'",
controller: "ListingCtrl"
})
.otherwise({redirectTo:"/"});
});
}());
However, when writing a URL (eg /single) on the browser that request is tried to be handled by my backend express/node api. 但是,当在浏览器上写一个URL(例如/ single)时,该请求尝试由我的后端express / node api处理。 Thus, it is not found because the backend routes are for example /api/foo. 因此,由于后端路由是例如/ api / foo,所以未找到。 How can I make sure Angular's routeProvider always manages my requests? 如何确保Angular的routeProvider始终管理我的请求?
And more important what is the basic flow of the application? 更重要的是,应用程序的基本流程是什么? When Client writing a URL how does the application knows whether the url is handled by express js or by routeProvider ? 当客户端编写URL时,应用程序如何知道URL是由express js还是由routeProvider处理的?
Generally you distinguish URLs which are handled by the angular app from the express URLs by using a #
sign between hostname and page URL. 通常,您可以通过在主机名和页面URL之间使用#
符号来区分由角度应用程序处理的URL和快速URL。
For example: 例如:
If you want to request an URL from the backend you would call: http://host.com/api/foo/
如果要从后端请求URL,请致电: http://host.com/api/foo/
: http://host.com/api/foo/
Instead if you want to request an URL from the angular app you would call: http://host.com/#/single
相反,如果您想从有角度的应用程序中请求URL,则应调用: http://host.com/#/single
: http://host.com/#/single
So if you want to call the angular app URL you have add the #
sign. 因此,如果要调用角度应用程序URL,请添加#
号。
This is a very important fact you need to keep in mind when working with single page applications. 这是一个非常重要的事实,在使用单页应用程序时需要牢记。
Update: 更新:
Have a look at this seed project: https://github.com/btford/angular-express-seed 看看这个种子项目: https : //github.com/btford/angular-express-seed
It uses the a similar technology stack as your project. 它使用与项目类似的技术堆栈。 This should make it more clear for you. 这应该使您更清楚。
I have faced the same issue few days ago. 我几天前也遇到过同样的问题。 The problem is, even when you make a server call for data it redirects it to client side routing and searches in $routeProvider
. 问题是,即使您在服务器上调用数据时,它也会将其重定向到客户端路由并在$routeProvider
搜索。
You need to make sure you add something like below code in your server.js
. 您需要确保在server.js
添加类似下面的代码。 It means when ever there is a call starting with /api
then it will redirect it to the routes in server side instead of client side routing. 这意味着,无论何时有以/api
开头的调用,它都会将其重定向到服务器端的路由,而不是客户端路由。
var api = express.Router();
require('./app/routes')(api);
app.use('/api', api);
In your factory when we make a call as below this will go to server side routes.js rather than client side. 在您的工厂中,当我们按如下所示进行呼叫时,它将转到服务器端route.js而不是客户端。
$resource('/api/adduser')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.