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

Question

Я пользуюсь 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/#/'

Answer 1

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

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

Вот где .when() может/должен быть использован:

... 

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

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

Answer 2

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

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

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

$locationProvider 

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

$locationProvider.html5Mode(true); 

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

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

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

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

Answer 3

Вот пример:

// the known route, with missing '/' - let's 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' 
     } 
    }); 

Answer 4

Самый простой способ для меня с UI-маршрутизатор давал поле адреса пустое значение:

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