使用ui-router时如何摆脱/#/?

时间:2014-08-31 22:41:51

标签: javascript angularjs routes angular-ui-router

我是Angular的新手,我目前正在使用ui.router进行我的路线并对某些事情感到好奇。我注意到当我在localhost或在线访问我的网站时,我的网址包含/#/。主页看起来像domain.com/#/和其他页面关注套件(domain.com/#/about)如何让它显示没有哈希?

以下是我的app.js

的示例
var app = angular.module('dashboardApp', ['ui.router']);

app.config(
    ['$stateProvider','$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/');

    $stateProvider
        //Dashboard states and nested views ========================
        .state('home', {
            url: '/',
            templateUrl: './templates/main/dashboard.html',
            controller: 'dashboardCtrl'
        })

        //Subject states and nested views ==========================
        .state('about', {
            url: '/about',
            templateUrl: './templates/main/about.html',
            controller: 'aboutCtrl'
        });
    }]);

以下是我在DOM中调用它的方式

<div class="main-nav">
    <a ui-sref="home"><img src="randomimage.png" /></a>
</div>
<div class="main-nav">
    <a ui-sref="about">About</a>
</div>

1 个答案:

答案 0 :(得分:5)

出于与旧浏览器的兼容性原因,hasbang存在。 以下是同一问题的主题:

AngularJS routing without the hash '#'

这是一篇博客文章,解释了如何安全地摆脱旧版浏览器的回退:

http://scotch.io/quick-tips/js/angular/pretty-urls-in-angularjs-removing-the-hashtag

基本上,您可以使用$locationProvider.html5Mode(true)来消除&#34; HTML5 ready&#34;浏览器和Angular将自动回退到旧浏览器的hashbang版本。