problèmes avec HTML 5 Pushstate dans AngularJS

Question

Je suis assez nouveau sur Angular et je construis actuellement la partie authentification + navigation de l'application.J'ai suivi les idées décrites dans ce entrée github utile.

Lorsque les utilisateurs accèdent à l'application, ils sont redirigés vers <app>/login qui affiche correctement l'écran de connexion.

Mon problème est que dans mon implémentation, contrairement au tutoriel, lorsque l'utilisateur définit l'URL sur <app>/login Je reçois 404 au lieu de la page appropriée (<app>/#/login fonctionne bien).

J'utilise AngularJS v1.2.5, c'est mon fichier de configuration d'application:

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

    }]);

Est-ce que j'ai raté quelque chose ?

Answer 1

Vous aurez besoin de deux choses pour y parvenir.Vous devez d’abord configurer votre serveur Web pour qu’il prenne en charge la réécriture d’URL.

Pour le serveur HTTP Apache ajouter un .htaccess à la racine de votre site Web et incluez cet extrait.Il redirigera toutes les URL vers index.html si le fichier n'existe pas déjà.

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]

Deuxièmement, ce que vous avez déjà, c'est d'ajouter $locationProvider.html5Mode(true) dans la configuration de votre module AngularJS. Document angulaire :$emplacement

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

  $locationProvider.html5Mode(true);

  [...]

}]);