Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 24 down vote favorite
7

i am trying to implement html5's pushstate instead of the # navigation used by angular.js i have tried searching google for an answer and also tried the angular irc chat room with no luck yet.

this is my 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'
            });
    }])
share|improve this question

1 Answer

up vote 35 down vote accepted

Inject $locationProvider into your config, and set $locationProvider.html5Mode(true).

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

Simple example:

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="/page2">Page 2</a>
share|improve this answer
Could I see a code sample for this when there's already config() for routeProvider? Not sure if I'm supposed to be creating a new config() for this or adding it to the first as an array of configs, and also not sure what the configFn should be (docs.angularjs.org/api/angular.module) – Mike Crittenden Jun 24 '12 at 12:09
Added a simple example. – Andy Joslin Jun 24 '12 at 14:42
I have done the same but when i click /phones/:phoneId the template url become phones/partials/phone-detail.html and firebug net tab shows html page not found – Ajay beniwal Sep 24 '12 at 16:59
13  
You have to configure your server to allow you to pull pages correctly. When you try to navigate to mysite.com/hello, it is trying to GET that page from your server. Instead, you want the browser to GET mysite.com and then use angular to find the browser's location is /hello and go there. So you need to configure your server to give back the mysite.com data no matter which subdomain is entered. – Andy Joslin Dec 27 '12 at 15:30
6  
I'd say put your rest API at /api or something, and then make everything but /api/* give out the index.html. – Andy Joslin Dec 31 '12 at 15:47
show 5 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.