Angular routing does not work with Express

advertisements

I am doing a sample MEAN application.I have my angular routing but when I am making any request it is directly hitting the server and giving me a Cannot GET /movies.

Here below is my server side code for serving static files.

 //Serve html files
app.get('/', function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

//Register all the client folder
var client = __dirname + '/modules';
fs.readdir(client, function(err,files) {
    files.map(function(file){
        app.use(express.static(path.join(__dirname, '/modules'+'/'+file+'/client')));
    })
});

//Serve js files
app.use(express.static(path.join(__dirname, '/public')));

//Load the models
app.models = require('./index');

//Load the routes
var routes = require('./routes');
_.each(routes,function(controller,route){
    app.use(route,controller(app,route));
});

Inside my client folder another folder called 'view' is there where all my templates are there.

Below is my routing for /movie URL

angular.module('movies').config(['$stateProvider',
  function ($stateProvider) {
    // Movies state routing
    $stateProvider
      .state('movies.list', {
        url: '/movies',
        templateUrl: 'views/movie.html'
      })
    }
]);


Add urlRouterProvider to config and Add Controller to stateProvider.state:

myApp.config(function($stateProvider, $urlRouterProvider) {
  //
  // For any unmatched url, redirect to /state1
  $urlRouterProvider.otherwise("/state1");
  //
  // Now set up the states
  $stateProvider
    .state('state1.list', {
      url: "/list",
      templateUrl: "partials/state1.list.html",
      controller: function($scope) {
        $scope.items = ["A", "List", "Of", "Items"];
      }
    })
});

Reference:
https://github.com/angular-ui/ui-router