[javascript] angular-ui-router URL에서 ‘#’기호를 삭제하는 방법

Program / 글쓴이

angular-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에서 ‘#’기호를 삭제하려면 어떻게해야합니까?

답변

해시 태그없이 탐색하려면 HTML5Mode를 활성화해야합니다.

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

또한 <head>HTML 파일에 다음 코드를 추가하여 앱의 루트 URL을 angular에 알려야 합니다.

<base href="/">

HTML5 모드 지원은 브라우저에 따라 다릅니다. History API를 지원하지 않는 사람들을 위해 Angular는 hashbang으로 대체됩니다 .

답변

Angular 1.6+를 사용 hashPrefix하는 경우 URL 에서을 제거해야합니다 .

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

베이스도 변경하는 것을 잊지 마십시오.

<head>
    ...
    <base href="/">
</head>

답변

    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() ?  >" >

답변