Угловая маршрутизация не работает с экспресс

Question

Я делаю образец приложения MEAN. У меня есть угловая маршрутизация, но когда я делаю любой запрос, он напрямую нажимает на сервер и дает мне Can not GET/movies.

Ниже приведен код на стороне сервера для обслуживания статических файлов.

//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)); 
}); 

Внутри моей клиентской папки есть еще одна папка с именем «вид», где есть все мои шаблоны.

Ниже мой маршрутизации/URL фильма

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

Answer 1

Добавить urlRouterProvider в конфиг и добавить контроллер в 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"]; 
     } 
    }) 
}); 

Ссылка:
https://github.com/angular-ui/ui-router

Answer 2

Используя точку в ваше имя состояния .state('movies.list', { вы создаете вложенное состояние 'li st 'родительского состояния' фильмы '.

Если вы не хотите создавать вложенное состояние, удалите точку и назовите ее как «listMovies», и она должна работать.

Update

в вашей экспресс-конфигурации:

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

и в Вашем угловом маршруту:

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