Angularjs route for node express js backend

Question

I have creating a nodejs backend with an angular js front end. I have the following angularjs code for routing.

var myApp = angular.module('myApp ', ['ngRoute']);

myApp .config(['$routeProvider', '$locationProvider', function($routeProvider){
    $routeProvider
        .when('/login', {
            templateUrl : 'login.html',
            controller: 'loginController'
        }).otherwise({
            templateUrl : 'main.html',
            controller  : 'mainController'
        });
}]);

and my app.js contains the following code. (note: I am using the express js framework 3.0)

app.use(app.router);
app.use('/',function(req, res) {
    res.sendfile(__dirname + '/public/index.html');
});

I put all the htmls in the public folder and the structure is something like this.

    public/
            -css folder
            -angular dependencies
            -all my htmls (index.html,login.html,main.html)
    routes/
            -index.js
    views/
            -index.ejs
            -error.ejs
    app.js

Now when I hit my base url the index.html loads based on the code I gave in the app.js given above. then the angular inserts the main.html code in the ng-view div. When I hit the /login I want the login.html to be loaded. But instead the same main.html is being loaded. can someone throw light on this? There are few solutions but none came to my rescue.

Answer 1

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

This helped me.

I made changes as

myApp.config(['$routeProvider', '$locationProvider',
    function($routeProvider,$locationProvider){
        $routeProvider
        .when('/login', {
            templateUrl : 'login.html',
            controller: 'loginController'
        }).when('/', {
            templateUrl : 'main.html',
            controller  : 'mainController'
        });
    $locationProvider.html5Mode(true);
}]);

changes to app.js

app.use(express.static(path.join(__dirname, 'public')));
app.use(express.static(__dirname + '/public'));
app.use(app.router);
app.use('/',function(req, res) {
  res.sendfile(__dirname + '/public/index.html');
});