CODEWITHSUNDEEP
javascriptangularjsurl-routingpushstate
special0ne
special0ne

Reputation: 6263

issues with html 5 pushstate in angularjs

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?

Upvotes: 0

Views: 1364

Answers (1)

J.P. Armstrong
J.P. Armstrong

Reputation: 836

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);

  [...]

}]);

Upvotes: 2

Related Questions