Can I make use of AngularJS's routing configuration inside Express?

Question

I have the following code on Angular side: app.js

 angular.module('myApp',[
    'ngRoute'
  ])
  .config(function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        redirectTo: '/signin'
      })
      .when('/signup', {
        templateUrl: 'app/account/signup/signup.html',
        controller: 'signupController',
        controllerAs: 'ctrl'
      })
      .when('/signin', {
        templateUrl: 'app/account/signin/signin.html',
        controller: 'signinController',
        controllerAs: 'ctrl'
       })
     })

And following code on my express side: server.js

var express = require('express');
var app = express();
var path = require("path");
var router = express.Router();
router.get('/', function(req, res){
    res.status(200).sendFile(path.join(__dirname + '/index.html'));
});
app.listen(8000);

signup.html and signin.html are ng-views inside index.html.

Currently I'm only being able to serve one static page. Is there any way that we're able to use the angular route configuration? Or I must write separate routings in express one more time?

Take a look at this: http://stackoverflow.com/questions/22739455/htaccess-redirect-for-angular-routes I don't know if this helps or not. This fixed it for me in the past. — Thomas Bormans, Aug 11 '15 at 18:03
Yes. Your Node doesn't handle undefined routes. It returns the index file on **/**. With the htaccess code, you will always return the index file which allows Angular to handle the routes. — Thomas Bormans, Aug 11 '15 at 18:11
It didn't solve my issue yet. Yes I want to display index.html for all file requests, but I want to replace section inside that index.html with individual html files, for example, if the requested url is "/signin", then I want to display "app/account/signup/signup.html" in section in index.html. Current it was not successful — strisunshine, Aug 11 '15 at 19:42
I'm not an Angular guy, sorry. I'm afraid I can't help you with that... — Thomas Bormans, Aug 11 '15 at 19:43

score 1 · Answer 1 · answered Aug 12 '15 at 04:02

If I understand you correctly, you just want a way to serve out static files. This line will do just that.

app.use(express.static(path.join(__dirname, 'public')));

It's a middleware which will check ./public/ for any files which matches the request. If a match is made it will return that file. If no files match then it'll continue on and you can handle it however you want later. So in your case you'll see to create this folder path public/app/account/signin/ and put signin.html in it and then create public/app/account/signup/ and signup.html in it.

Thank you for your answer. I already defined my routing in Angular, I didn't want to do it again in express. I was looking for a way that the express server could directly look into Angular routing. I found node.js http-server package and it saved me out. — strisunshine, Aug 18 '15 at 14:23

score 0 · Answer 2 · answered Aug 18 '15 at 14:26

0

Use npm to install http-server package instead of manually creating the server would take advantage of the Angular routing.

answered Aug 18 '15 at 14:26

strisunshine

389
2
10

Can I make use of AngularJS's routing configuration inside Express?

2 Answers2