angular-ui-router URL에서 '#'기호를 삭제하는 방법

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

javascript angularjs angular-ui-router

— Niezborala
소스

HTML5 모드를 사용해야한다고 생각합니다. 그렇지 않으면 경로에 해시를 사용해야합니다

— Ian

html5mode = true 또는 html5mode = false

— Ivan Bacher

답변:

120

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

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

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

<base href="/">

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

— 사이먼 벨 랑거
소스

또 다른 질문이 있습니다. URL www.example.com/state를 붙여 넣을 때 예상되는 콘텐츠가있는 페이지가 없습니다. 이것으로 뭔가 만들 수 있나요?

— Niezborala 2014

서버에 따라 다릅니다. 각도 앱 루트에서와 동일한보기를 표시해야합니다. AngularJs는 URL을보고 적절한보기 / 컨트롤러를 표시 할만큼 똑똑합니다. 예를 들어 일반적으로 / angular에서 앱으로 이동하는 경우 / angular / state로 이동하는 것이 실제로 실제 URL에 매핑되지 않지만 실제로는 / angular의 경로이고 동일한 내용을 표시하는 경우를 처리해야합니다. 전망.

— Simon Belanger

또한 넣어하는 것을 잊지 마세요 <base href="https://stackoverflow.com/">index.html을 내부에 태그를 <head>섹션

— Saqueib

또는 requireBase : false가있는 정의 객체를 $ locationProvider.html5Mode ()에 전달하여 기본 태그가 필요하지 않도록 $ locationProvider를 구성 할 수 있습니다. $ locationProvider.html5Mode ({enabled : true, requireBase : false}); 참조 : docs.angularjs.org/error/$location/nobase

— sigmapi13

@SimonBelanger 나는 mvc4를 사용하고 있으며 사용자 특정 모델 컨트롤러에 대한 영역을 만들고 내 방문 페이지를 볼 수 있다는 점에서 _Layout을 마스터 템플릿으로 사용하는 Areas / Admin / View / Home / Index에 기본 href에 URL을 어떻게 작성해야합니까?

— 3gth

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

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

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

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

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

— 비샬 나스 본
소스