angular.js에서 HTML5 pushstate 사용


84

Angularjs에서 사용하는 # 탐색 대신 html5의 pushstate를 구현하려고합니다. 나는 대답을 위해 구글 검색을 시도했고 아직 운이없는 각도 IRC 채팅방을 시도했습니다.

이것은 내 controllers.js:

function PhoneListCtrl($scope, $http) {
    $http.get('phones/phones.json').success(function(data) {
        $scope.phones = data;
    });
}

function PhoneDetailCtrl($scope, $routeParams) {
  $scope.phoneId = $routeParams.phoneId;
}

function greetCntr($scope, $window) {
    $scope.greet = function() {
    $("#modal").slideDown();
    }
}

app.js

angular.module('phoneapp', []).
    config(['$routeProvider', function($routeProvider){
        $routeProvider.
            when('/phones', {
                templateUrl: 'partials/phone-list.html',
                controller: PhoneListCtrl
            }).
            when('/phones/:phoneId', {
                templateUrl: 'partials/phone-detail.html',
                controller: PhoneDetailCtrl
            }).
            otherwise({
                redirectTo: '/phones'
            });
    }])

답변:


129

$ locationProvider를 구성에 삽입하고 $locationProvider.html5Mode(true).

http://docs.angularjs.org/api/ng.$locationProvider

간단한 예 :

JS :

myApp.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when('/page1', { template: 'page1.html', controller: 'Page1Ctrl' })
    .when('/page2', { template: 'page2.html', controller: 'Page2Ctrl' })
});

HTML :

<a href="/page1">Page 1</a> | <a href="https://stackoverflow.com/page2">Page 2</a>

routeProvider에 대한 config ()가 이미있을 때 이에 대한 코드 샘플을 볼 수 있습니까? 이를 위해 새 config ()를 생성하거나 구성 배열로 첫 번째에 추가해야하는지 확실하지 않으며 configFn이 무엇인지 확실하지 않습니다 ( docs.angularjs.org/api/angular.module )
Mike Crittenden

나도 같은 일을하지만, 한 내가 클릭 할 때 / 전화 / : phoneId 템플릿 URL 될 휴대폰 / 파셜 / 전화 detail.html와 불을 지르고 순 탭을 보여줍니다 HTML 페이지를 찾을 수 없음
아제 Beniwal

또한 브라우저에서 지정된 URL로 이동할 때마다 페이지를 찾을 수 없습니다 (예 : /home대신 /). 자신의 사이트에 html5를 활성화 해 보셨습니까?
Andriy Drozdyuk 2012

37
페이지를 올바르게 가져올 수 있도록 서버를 구성해야합니다. 로 이동하려고하면 mysite.com/hello서버에서 해당 페이지를 가져 오려고 합니다. 대신 브라우저가 GET mysite.com하고 angular를 사용하여 브라우저의 위치를 ​​찾고 /hello거기로 이동 하기를 원합니다 . 따라서 mysite.com입력 된 하위 도메인에 관계없이 데이터를 반환하도록 서버를 구성해야합니다 .
Andrew Joslin

18
나머지 API를 넣은 /api다음 / api / *를 제외한 모든 것을 만들어 index.html을 제공합니다.
Andrew Joslin
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.