Как правильно использовать роутинг в связке Express + Angular?

Question

[HoHsi]

Добрый день!
Как правильно реализовать роутинг на Angular с использованием частей шаблона.
Сейчас пришлось изобретать велосипед, и делать примерно такой роутинг:
Express:

app.get('/', (req, res) => {
  if (req.xhr){
    res.render('partial-index');
  } else {
    res.render('index');
  }
});

Angular:

.config(['$routeProvider', '$locationProvider',
  ($routeProvider, $locationProvider) => {
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });

    $routeProvider
    .when("/", {
      templateUrl: '/',
      controller: 'MainCtrl'
    })
    .when("/about", {
      templateUrl: '/about',
      controller: 'AboutCtrl'
    });
});

Т.е. по сути дела, я для каждого урла проверяю XHR ли это запрос, а потом либо выдаю полную страницу, либо партиал. Я понимаю, что что-то тут неправильно, но как сделать более адекватную реализацию, а не понял.

Если использовать '*' тогда страница со скриптом будет иногда загружаться в бесконечном режиме, и браузер упадет от утечки.

Comments

[copal]

какая версия angular?

[HoHsi]

copal: 1.4.9

[copal]

HoHsi: ну тогда все просто - express на все пути отдает index.html, в которой запускается angularjs приложение и angularjs router, который уже и ставит нужную страницу.

[HoHsi]

copal: а если запус сайта начинается на с / а с кажем с /login, в такм случае, прийдет либо 500, либо партиал

[copal]

HoHsi: а если с hevoushfgoihsd]pifha]hj ?

Answer 1

[Виталий Пасюта]

Скорее всего, если вы используете роутинг от ангуляра, то ваш експресс должен работать как апи и он не должен ничего отрисововать.

Что то типа такого на клиенте

.state('login', {
  cache: false,
  url: '/login',
  templateUrl: 'templates/auth/login.html'
});
---------
.controller('loginCtrl', function ($scope, Request, $state) {

        $scope.login = function (operator) {
            Request.sendRequest('Your/path/to/express/api/current/method', obj).then(
                function resolve(resp) {
                   // handle success answer, call function to render some partial of html etc.

                },
                function reject(resp) {
                  //  handle error
                }
            );
})

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