Непонимание одностраничной маршрутизации в Angular

Я думаю, что у меня есть фундаментальное непонимание того, как angular перехватывает мои маршруты в одностраничном приложении.

Моя проблема, я думаю, довольно проста. Когда я ввожу URL:

localhost:3000/streams/

Я хотел бы загрузить страницу «потоки». Как я думал, это работает следующим образом:

  1. Мой экспресс-сервер получает запрос и отвечает макетом.

    app.get('/streams/',function(req,res){
     res.render('layout');
    })
    
  2. Моя страница макета отображается. Он вызывает клиент app.js и имеет ng-view.
  3. Angular перехватывает путь «/streams/», а затем вызывает шаблон «streams». Так:

     $routeProvider
      .when('/',
       {
        templateUrl: '/templates/mainpage'
       }
      )
      .when('/streams/',
       {
        templateUrl: '/templates/streams'
       }
      )
    

Почему-то реальность совсем другая.

Когда я загружаю '/streams', angular извлекает /templates/streams и

когда я загружаю '/streams/, angular извлекает /templates/mainpage.

Почему?


Это недоразумение троллит меня уже несколько дней...

Любая помощь будет вознаграждена 5 квантами хорошей энергии.

Спасибо.


person Adam    schedule 26.11.2013    source источник
comment
Это потому, что /streams/ не соответствует ни одному из ваших определенных маршрутов, и у вас нет набора по умолчанию. Вероятно, он просто захватывает первый определенный .when(), который является /templates/mainpage.   -  person Zack Argyle    schedule 27.11.2013
comment
Спасибо. Чего я не понимаю, так это @ZackArgyle, почему /streams/ не соответствует моим определенным маршрутам. Разве об этом не заботится второй оператор .when()?   -  person Adam    schedule 27.11.2013
comment
Да, это особенность angular. Ознакомьтесь с этим вопросом Переполнение стека   -  person Zack Argyle    schedule 27.11.2013
comment
Я думаю, что понял. Так что, в основном, лучше всего было бы попытаться использовать вызовы $http внутри моих операторов .when() и не полагаться на ресурс angular $?   -  person Adam    schedule 27.11.2013
comment
Похоже, вы должны попытаться избежать последнего, например, '/streams\\/', или добавить пробел в конце, например '/streams/'. Я не пробовал их, но стоит попробовать, прежде чем прибегать к $http для всего   -  person Zack Argyle    schedule 27.11.2013


Ответы (1)


Оказывается, на самом деле дело было немного в другом.

Дело не в том, как было описано, что Angular не знал, что я имею в виду «потоки», когда я загружаю «потоки/», это то, что html имел относительную базу.

По сути, эта относительная база создавала впечатление, что я уже нашел шаблон, а именно '/streams', и теперь извлекаю другой, а именно '/'. Эту проблему можно просто решить, добавив корневую базу в ваш html.

 <base href="/">

Это должно сделать это.

person Adam    schedule 23.12.2013