Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use AngularJS routes with Express (Node.js) when a new page is requested?

I'm using Express, which loads AngularJS from a static directory. Normally, I will request http://localhost/, in which Express serves me my index.html and all of the correct Angular files, etc. In my Angular app, I have these routes setup, which replace the content in an ng-view:

$routeProvider.when('/', {     templateUrl: '/partials/main.html',     controller: MainCtrl, });  $routeProvider.when('/project/:projectId', {     templateUrl: '/partials/project.html',     controller: ProjectCtrl, });  $locationProvider.html5Mode(true); 

On my main page, I have a link to <a href="/project/{{project.id}}">, which will successfully load the template and direct me to http://localhost/project/3 or whatever ID I have specified. The problem is when I try to direct my browser to http://localhost/project/3 or refresh the page, the request is going to the Express/Node server, which returns Cannot GET /project/3.

How do I setup my Express routes to accommodate for this? I'm guessing it will require the use of $location in Angular (although I'd prefer to avoid the ugly ?searches and #hashes they use), but I'm clueless about how to go about setting up the Express routes to handle this.

Thanks.

like image 982
winduptoy Avatar asked Nov 04 '12 19:11

winduptoy


People also ask

What is routing and how routing works in Express JS?

Routing refers to how an application's endpoints (URIs) respond to client requests. For an introduction to routing, see Basic routing. You define routing using methods of the Express app object that correspond to HTTP methods; for example, app. get() to handle GET requests and app.

How does the AngularJS application route?

Application routes in AngularJS are declared via the $routeProvider, which is the provider of the $route service. This service makes it easy to wire together controllers, view templates, and the current URL location in the browser.

Which is the right way to define routes in node JS?

We define the routes by using the methods of this “app” object. This app object specifies a callback function, which is called when a request is received. We have different methods in app object for a different type of request. The next() is used to hand off the control to the next callback.


2 Answers

with express 4, you probably want to catch all requests and redirect to angularjs index.html page. app.use(app.router); doesn't exist anymore and res.sendfile is deprecated, use res.sendFilewith an uppercase F.

app.post('/projects/', projectController.createProject); app.get('/projects/:id', projectController.getProject); app.get('*', function (req, res) {     res.sendFile('/public/index.html'); }); 

put all your API routes before the route for every path app.get('*', function (req, res){...})

like image 186
Guillaume Vincent Avatar answered Sep 24 '22 02:09

Guillaume Vincent


I would create a catch-all handler that runs after your regular routes that sends the necessary data.

app = express(); // your normal configuration like `app.use(express.bodyParser());` here // ... app.use(app.router); app.use(function(req, res) {   // Use res.sendfile, as it streams instead of reading the file into memory.   res.sendfile(__dirname + '/public/index.html'); }); 

app.router is the middleware that runs all of your Express routes (like app.get and app.post); normally, Express puts this at the very end of the middleware chain automatically, but you can also add it to the chain explicitly, like we did here.

Then, if the URL isn't handled by app.router, the last middleware will send the Angular HTML view down to the client. This will happen for any URL that isn't handled by the other middleware, so your Angular app will have to handle invalid routes correctly.

like image 27
Michelle Tilley Avatar answered Sep 22 '22 02:09

Michelle Tilley