Как использовать маршруты AngularJS с Express (Node.js) при запросе новой страницы?

Я использую Express, который загружает AngularJS из статического каталога. Обычно я запрашиваю http://localhost/, в котором Express обслуживает меня index.html и все правильные файлы Angular и т.д. В моем приложении Angular у меня есть эти настройки маршрутов, которые заменяют содержимое в ng-view:

$routeProvider.when('/', {
    templateUrl: '/partials/main.html',
    controller: MainCtrl,
});

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

$locationProvider.html5Mode(true);

На моей главной странице у меня есть ссылка на <a href="/project/{{project.id}}">, которая будет успешно загружать шаблон и перенаправлять меня на http://localhost/project/3 или любой другой идентификатор, который я указал. Проблема в том, что когда я пытаюсь направить мой браузер на http://localhost/project/3 или обновить страницу, запрос отправляется на сервер Express/Node, который возвращает Cannot GET /project/3.

Как мне настроить маршруты Express для этого? Я предполагаю, что это потребует использования $location в Angular (хотя я бы предпочел избежать уродливых поисков и # хэши, которые они используют), но я не знаю, как начать настройку маршрутов Express, чтобы справиться с этим.

Спасибо.

Ответ 1

Я бы создал обработчик catch-all, который запускается после ваших обычных маршрутов, которые отправляют необходимые данные.

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 - это промежуточное программное обеспечение, которое запускает все ваши экспресс-маршруты (например, app.get и app.post); обычно Express автоматически ставит это в конец цепи промежуточного программного обеспечения, но вы также можете добавить его в цепочку явно, как мы это делали здесь.

Затем, если URL-адрес не обрабатывается app.router, последнее промежуточное программное обеспечение отправит HTML-представление Angular вниз клиенту. Это произойдет для любого URL-адреса, который не обрабатывается другим промежуточным программным обеспечением, поэтому вашему приложению Angular придется правильно обрабатывать неверные маршруты.

Ответ 2

с выражением 4, вы, вероятно, захотите поймать все запросы и перенаправить на страницу angularjs index.html. app.use(app.router); больше не существует, а res.sendfile устарел, используйте res.sendfile с прописными буквами F.

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

поместите все маршруты API перед маршрутом для каждого пути app.get('*', function (req, res){...})

Ответ 3

Думаю, я должен был уточнить, что мне неинтересно использовать механизм шаблонов, но Angular вытащить все частичные части HTML на нем, Node работает полностью как статический сервер здесь (но он не будет для JSON API. Брайан Форд показывает, как это сделать, используя Jade здесь: http://briantford.com/blog/angular-express.html

Мое приложение - одностраничное приложение, поэтому я создал маршрут Express для каждого возможного шаблона URL, и каждый из них делает то же самое.

fs.readFile(__dirname + '/public/index.html', 'utf8', function(err, content) {
    res.send(content);
});

Я предполагал, что мне придется передать некоторые переменные запроса в Angular, но похоже, что Angular автоматически выполняет это.