web-dev-qa-db-ja.com

angle-ui-router URLの「＃」記号を削除する方法

Angle-ui-routerライブラリを使用していますが、URLに問題があります。

私は次のコードを持っています：

app.js：

app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('state', {
        url: '/state',
        templateUrl: 'templates/state.html',
        onEnter: function () {
            /*... code ...*/
        }
    })});

index.html：

<a href="#/state">STATE</a>

これは機能しますが、<a>タグから「＃」を削除すると、機能しません。

URLから「＃」記号を削除するにはどうすればよいですか？

javascriptangularjsangular-ui-router
74
Niezborala

ハッシュタグなしのナビゲーションが必要な場合は、HTML5Modeを有効にする必要があります。

app.config(["$locationProvider", function($locationProvider) {
  $locationProvider.html5Mode(true);
}]);

次のコードをHTMLファイルの<head>に追加して、アプリのルートURLをangularに伝える必要もあります。

<base href="/">

HTML5モードのサポートはブラウザに依存することに注意してください。 History APIをサポートしていない場合は、 Angularはhashbangにフォールバックします 。

114
Simon Belanger

Angular 1.6 +を使用している場合は、URLから hashPrefix も削除する必要があります。

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix(''); // by default '!'
  $locationProvider.html5Mode(true);
}]);

ベースも変更することを忘れないでください：

<head>
    ...
    <base href="/">
</head>
9
Mistalis
    yourApp.config(function ($stateProvider, $urlRouterProvider,$locationProvider) {

    $urlRouterProvider.otherwise('/home');

    //add this line in your routing code   
    $locationProvider.html5Mode(true);

    $stateProvider.state('web.home', {
                url: '/home',
                templateUrl: 'pages/home.html',
                controller: 'mainController'         
            })
    }

index.phpまたはindex.htmlの<head>タグの挿入

< base href="/" >

CodeIgniterの場合：

<base href=" < ?php echo base_url() ?  >" >
3
Vishal Nathbone