Angulaire de l'interface utilisateur-routeur ajout de hash de l'url

Je suis en train d'ouvrir un échafaudage pour une application avec des angles et angular-ui-router. - Je avoir de travail cependant, elle semble être l'ajout d'un code de hachage dans mon url (je suis sous dev sur localhost) localhost:9000/#/test. Lorsque j'atterris sur la page principale, c'est juste localhost:9000 et il sert toujours de la vue principale de contenu. Je tiens à vous débarrasser de la valeur de hachage si possible.

Donc, voici ma configuration:

Dans mon index.html dans le corps, je viens d'avoir mon nav et puis l'interface utilisateur-vue:

 <div class="row">
   <ul class="nav navbar-nav">
      <li><a ui-sref="index">Home</a></li>
      <li><a ui-sref="test">Test</a></li>
    </ul>
  </div>

  <div ui-view=""></div>

et dans mon app.js je viens d'avoir:

angular
.module('playApp', [
'ui.router'
])
.config(function($stateProvider) {
$stateProvider
.state('index', {
    url: '',
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
})
.state('test', {
    url: '/test',
    templateUrl: 'views/test.html',
    controller: 'testCtrl'
});
});

Alors quand j'ai des terres, c'est bien, mais quand j'ai commencer à l'aide de la valeur liquidative j'ai mis en place, il ajoute les hash de l'url, préférerait ne pas avoir, si possible. Merci!

De vérifier la html5Mode([mode]) de l' $locationProvider - docs.angularjs.org/api/ng/provider/$locationProvider
compris $locationProvider et ne $locationProvider.html5Mode(true);

OriginalL'auteur ajmajmajma | 2015-02-27

  1. 3

    Inclure $locationProvider et ne $locationProvider.html5Mode(true); :

    angular.module('playApp', ['ui.router'])
    .config(function($stateProvider, $locationProvider) {
        $stateProvider.state('index', {
            url: '',
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
       .state('test', {
            url: '/test',
            templateUrl: 'views/test.html',
            controller: 'testCtrl'
        });

        $locationProvider.html5Mode(true);
    });

    J'ai aussi un otherwise là, de sorte que si il ne peut pas trouver un itinéraire précis, il sera juste valeur par défaut dos:

    angular.module('playApp', ['ui.router'])
    .config(function($stateProvider, $locationProvider, $urlRouterProvider) {
        $stateProvider.state('index', {
            url: '',
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
       .state('test', {
            url: '/test',
            templateUrl: 'views/test.html',
            controller: 'testCtrl'
        });

        $locationProvider.html5Mode(true);
        $urlRouterProvider.otherwise('/');
    });
    Dans le cas où vous avez des questions supplémentaires et une erreur qui nécessite une balise d'être présent, découvrez cette documentation :: docs.angularjs.org/error/emplacement$/nobase
    Ou $locationProvider.html5Mode({ enabled: true, requireBase: false });

    OriginalL'auteur Callum Linington

  2. 1

    Injecter $locationProvider dans votre config et définir html5mode vrai:

    angular.module('playApp', [
    'ui.router'
])
.config(function($stateProvider, $locationProvider ) {
    $stateProvider
        .state('index', {
            url: '',
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
        .state('test', {
            url: '/test',
            templateUrl: 'views/test.html',
            controller: 'testCtrl'
        });

    $locationProvider.html5Mode(true);

});

    Assurez-vous d'ajuster votre .htaccess pour gérer cela (réécriture de l'arrière à la racine).

    Plus de détails sur le serveur-côté réécrit à github.com/angular-ui/ui-router/wiki/....

    OriginalL'auteur jeff

  3. 0

    Il existe une alternative à html5Mode. Mais il a ses inconvénients.

    Lors de la définition de l'interface utilisateur du routeur unis, le url n'est pas nécessaire. À partir de cette documentation:

    Vous pouvez créer certains des enfants les états sans Url, si ça n'a pas de sens pour marquer ces enfant, les états. La machine d'état des transitions entre les url à moins d'états, comme d'habitude, mais ne pas mettre à jour l'url lorsque vous avez terminé. Vous pouvez bénéficier de tous les autres avantages d'un état de transition tels que les paramètres, résoudre, et le cycle de vie des crochets.

    Si vous n'avez pas besoin de fournir une URL pour un état, de sorte que les utilisateurs peuvent marquer ces états, vous pouvez omettre le url option. L'URL ne change pas.

    OriginalL'auteur rchavarria