Домашний маршрут в u-router

Я использую https://github.com/angular-ui/ui-router. Когда я пытаюсь получить индексный маршрут ('/'), я перенаправлен на 404. Код:

angular.module('cr').config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'views/index.html'
        });

    $urlRouterProvider.otherwise('/404');
});

Что не так с этим кодом? Хотя, когда я использую ui-sref = "home", он работает, но URL-адрес выглядит как "/#/", но когда пользователь вводит имя сайта, он использует только имя домена, например "mysite.com", а не "mysite.com/#/'

Ответ 1

Вы заявили, как вести себя, когда предоставляется какой-либо неизвестный/другой маршрут - перейдите к /404.

Но мы также должны определить, как вести себя, когда доступен какой-то ожидаемый, но не "точный" / "неизвестный" маршрут, т.е. создать псевдоним

То, где можно использовать /t 21 > :

...

// the known route, with missing '/' - let create alias
$urlRouterProvider.when('', '/');

// the unknown
$urlRouterProvider.otherwise('/404');

Ответ 2

В коде нет ничего плохого. Вам просто не хватает явного состояния для 404. Попробуйте добавить это:

.state('404', {
    url: '{path:.*}',
    templateUrl: 'views/404'
});

Чтобы избавиться от символа hash (#), вам нужно добавить еще одну зависимость в ваш конфигурационный модуль:

$locationProvider

И используйте метод .html5Mode(), чтобы установить режим HTML5 в true, например

$locationProvider.html5Mode(true);

Кроме того, убедитесь, что ваш сервер настроен на разрешение Angular обрабатывать вашу маршрутизацию. Например, здесь приведена конфигурация Node/Express, которая позволяет использовать вышеупомянутый метод:

app.get('*', routes.index);

И в вашем файле index.js(или, тем не менее, вы настраиваете свой экземпляр node.js):

exports.index = function(req, res){
   res.render('index');
};

Ответ 3

Вот пример:

// the known route, with missing '/' - let create alias
$urlRouterProvider.when('', '/');

// Redirect any unmatched url to 404 view (without change location.hash)
$urlRouterProvider.otherwise(function($injector) {
    var $state = $injector.get('$state');
    $state.go('404', null, {
        location: false
    });

}); 

$stateProvider
    // homepage views
    .state('homepage', {
        url: "/",
        templateUrl: "views/homepage.html",            
        data: {
            pageTitle: 'Home'
        }
        ... more here ...
    })
    // 404 views
    .state('404', {
        url: "/404",
        templateUrl: "views/404.html",            
        data: {
            pageTitle: '404 Not found'
        }
    });

Ответ 4

Самый простой способ для ui-router - дать поле url пустое значение:

        $stateProvider
        .state('home', {
            url: '',
            templateUrl: 'views/homepage.html',
            controller: 'AppCtrl'
        })