AngularJS - Как заставить серверную и клиентскую маршрутизацию работать вместе
Я работаю над переносом проекта в угловой SPA. В настоящее время это более "традиционное" приложение node/locomotivejs, которое обслуживает шаблоны со стороны сервера (никогда не назывался подходящий термин для этого).
Проекты слишком велики для одновременной миграции, поэтому мы конвертируем их в угловую страницу за раз.
Моя проблема: если вы загружаете угловую часть приложения, все работает нормально. Вы можете идти на угловые маршруты правильно. Однако, если вы затем идете по неугловому маршруту (который должен обрабатываться на стороне сервера), то ничего не загружается (представление ng становится пустым, а не загружается целый новый шаблон). Если вы сначала перейдете на серверный маршрут или нажмете "Обновить", страница загрузится правильно.
Я предполагаю, что angular пытается справиться с этими маршрутами, и я не уверен, как заставить его вернуть сервер.
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/something/page1', {
templateUrl: '/page1.html',
controller: 'page1Ctrl'
});
$routeProvider.when('/something/page1/subpage', {
templateUrl: '/subpage.html',
controller: 'subpageCtrl'
});
}]);
это мой угловой маршрут провайдера. Не указано иное. Серверная часть у меня что-то вроде:
this.match( '/someOtherPage', 'someOtherPage#showstuff');
Если я захожу в /someOtherPage напрямую, он корректно загружается со стороны сервера. Если я захожу в / кое-что /page1, а затем в /someOtherPage, он не связывается с сервером.
1 ответ
Поскольку вы используете режим angular html 5, angular не может определить разницу между маршрутом, который вы хотите обработать под углом, и тем, который вы не делаете. Я думаю, что вы должны сказать угловой, чтобы игнорировать определенные маршруты. Похоже, это то, что вы ищете:
https://docs.angularjs.org/guide/$location
Поэтому измените ваши ссылки на неугловые страницы, чтобы использовать target
,
ех. <a href="/ext/link?a=b" target="_self">link</a>