Угловая маршрутизация и нг-просмотр

Question

Как Angular узнает, как сделать запрос на представление шаблона, содержащее элемент 'ng-view'?

Если я нахожусь в моем приложении, скажите прямо

http://localhost/Categories/List/accessories

, По-прежнему выполняется запрос к "/ или шаблону индекса", поскольку он содержит элемент "ng-view", необходимый для отображения всех представлений.

Когда я перехожу из индекса в /Categories/List/accessories, запрос для индекса снова не выполняется.

Ниже моя базовая маршрутизация, которая была частично скопирована из примера Angular MVC "CookBook" на GitHub.

angular.module('myApp', ['myApp.ctrl.list'])
    .config(['$routeProvider', '$locationProvider', function ($routeProvider) {
        $routeProvider.when('/', {
            templateUrl: '/Home/Splash',
        });
        $routeProvider.when('/Categories/List/:slug', {
            templateUrl: '/Categories/List',
            controller: 'listCtrl',
        });
        $routeProvider.otherwise({
            redirectTo: '/'
        });
    }]);

Answer 1

Я полагаю, что в вашей конфигурации маршрутизации в URL-адресе примера отсутствует знак фунта (#), поэтому он должен выглядеть следующим образом:

http://localhost/#/Categories/List/accessories

Часть после знака # - это путь, который должен быть разрешен AngularJS (т. Е. Заданная вами конфигурация маршрутизации)

Когда вы вводите вышеуказанный URL в адресную строку браузера, браузер автоматически ищет index.html на localhost, Большинство браузеров, если не все, настроены на поиск index.html, когда в URL присутствует только доменное имя.

Как насчет части после знака #? Вы можете спросить. Путь после знака # по определению не отправляется на сервер, и поэтому браузер может меньше заботиться о том, из чего состоит эта часть.

Во втором сценарии, который вы упомянули, AngularJS не запрашивает index.html потому что он был кэширован в первый раз, когда он был загружен, и эта кэшированная копия используется.

Answer 2

Ваш locationProvider настроен для HTML5?

$locationProvider.html5Mode(true);

См. Использование HTML5 pushstate на angular.js.