Accueil itinéraire dans ui-routeur

- Je utiliser https://github.com/angular-ui/ui-router de la bibliothèque. Lorsque j'essaie d'accéder à l'indice de route ('/') je suis redirigé vers 404. Le code:

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

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

Quel est le problème avec ce code? Bien que lorsque j'utilise l'interface utilisateur-sref="la maison", il fonctionne, mais l'url ressemble à '/#/' mais quand un utilisateur entre le nom du site, il utilise juste de nom de domaine, comme "mysite.com', pas 'mysite.com/#/'

source d'informationauteur Victor

  1. 31

    Vous ai raconté comment se comporter quand tout inconnu/autre route est fournie - aller à /404.

    Mais il nous faut également définir la façon de se comporter, lorsque certains, mais pas "exacte" /"ne sait pas" est accessible, c'est à dire. créer alias

    C'est là que le .when() pourrait/devrait être utilisé:

    ...

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

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

    Il n'y a rien de mal avec votre code. Vous êtes manquant de peu explicite de l'état pour 404. Essayez d'ajouter ceci:

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

    Pour se débarrasser de le dièse (#) symbole vous avez besoin d'injecter une plus de dépendance dans la config du module:

    $locationProvider

    Et utiliser le .html5Mode() méthode pour définir HTML5 Mode de vrai, comme

    $locationProvider.html5Mode(true);

    Aussi, assurez-vous que votre serveur est configuré pour permettre Angulaire de la poignée de votre trajet. Par exemple, voici un Node/Express qui permet à la technique ci-dessus pour le travail:

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

    Et dans votre index.js fichier (ou cependant vous configurez votre node.js exemple):

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

    Ici par exemple:

    //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'
        }
    });
  4. 0

    Le moyen le plus simple pour moi avec ui-router était de donner l'url du champ une valeur vide :

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