issues with html 5 pushstate in angularjs

Question

I am pretty new to Angular and currently building the authentication + navigation part of the app. I followed the ideas described in this useful github entry.

When users navigate to the app they are redirected to <app>/login which displays the login screen properly.

My problem is that in my implementation, unlike the tutorial, when the user sets the URL to <app>/login I am getting 404 instead of the proper page ( <app>/#/login works well).

I am using AngularJS v1.2.5, This is my application config file:

'use strict';

angular.module('myApp', ['ngCookies', 'ngRoute', 'ngResource'])
    .config(['$routeProvider', '$locationProvider', '$httpProvider',
        function ($routeProvider, $locationProvider, $httpProvider) {

            var access = routingConfig.accessLevels;

            $routeProvider.when('/',
                {
                    templateUrl: 'views/home.html',
                    controller: 'HomeCtrl',
                    access: access.anon
                });

            $routeProvider.when('/login',
                {
                    templateUrl: 'views/login.html',
                    controller: 'HomeCtrl',
                    access: access.anon
                });

            $routeProvider.when('/404',
                {
                    templateUrl: 'views/404.html',
                    access: access.anon
                });
            $routeProvider.otherwise({redirectTo: '/404'});

            $locationProvider.html5Mode(true);


            $httpProvider.interceptors.push(function ($q, $location) {
                return {
                    'responseError': function (response) {
                        if (response.status === 401 || response.status === 403) {
                            $location.path('/login');
                            return $q.reject(response);
                        }
                        else {
                            return $q.reject(response);
                        }
                    }
                }
            });
        }])


    .run(['$rootScope', '$location', '$http', 'Auth', function ($rootScope, $location, $http, Auth) {

        $rootScope.$on("$routeChangeStart", function (event, next, current) {
            $rootScope.error = null;
            if (!Auth.authorize(next.access)) {
                if(Auth.isLoggedIn()) $location.path('/');
                else                  $location.path('/login');
            }
            else {
                angular.element('body').removeClass('naked');
            }
        });

    }]);

Am I missing something?

J.P. Armstrong · Accepted Answer · 2014-01-09 18:42:27Z

2

There are two things you'll need to accomplish this. First you need to set your web server to support URL rewrite.

For Apache HTTP Server add an .htaccess to the root of your website and include this snippet. It will redirect all URLs to index.html if the file does not already exist.

RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

Second, which you already have, is to add $locationProvider.html5Mode(true) in the config of your AngularJS module. Angular Doc: $location

.config(['$routeProvider', '$locationProvider', '$httpProvider',
        function ($routeProvider, $locationProvider, $httpProvider) {

  $locationProvider.html5Mode(true);

  [...]

}]);

edited Jan 9, 2014 at 18:42

answered Jan 9, 2014 at 18:34

J.P. Armstrong

8361 gold badge9 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Luke Over a year ago

Does anyone know how to support URL rewrite for Jetty? Would it just be a filter?

Collectives™ on Stack Overflow

issues with html 5 pushstate in angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related