AngularJS $routeProvider：路由不起作用

Question

我创建了一个用于身份验证的登录页面。根据认证结果，重定向到不同的页面。

//controller.js

app.controller("LoginCtrl", ['$scope', '$location', 'loginFactory', function($scope, $location, loginFactory){
    $scope.authenticate = function() {
        loginFactory.login($scope.username, $scope.password)
        .then(function(response) {
            $location.path('/home');
        }, function errorCallBack(response) {
            console.log("Failed auth");
            $location.path('/login');
        });
    }
}]);

应用与路由一起定义在下面的 config.js 中。 //config.js

var app = angular.module('ristoreApp', ['ngRoute']);
app.config(function ($routeProvider, $locationProvider, $httpProvider) {
    $routeProvider
        .when('/', {
            redirectTo: '/home'
        })
        .when('/login', { 
            templateUrl: 'views/login.html', 
            controller: 'LoginCtrl' 
        })
        .when('/home', { 
            templateUrl: 'views/home.html', 
        })
        .otherwise({ 
            redirectTo: '/login' 
        });
});

文件结构：

root/
    js/ -- config.js
        -- authentication/ -- controller.js
    views/ -- home.html
           -- login.html

当我提交登录表单时，它不会重定向到“http://127.0.0.1:8081/views/login”，而是重定向到“http://127.0.0.1:8081/views/login#/login”。加上“http://127.0.0.1:8081/login”返回 404。

我在 root 下启动 node.js。从 Chrome 的“网络”选项卡中，它显示“config.js”已加载。为什么路由不起作用？

Answer 1

如果不想在角度路由中使用#，需要开启Html5模式。

var app = angular.module('ristoreApp', ['ngRoute']);

app.config(function ($routeProvider, $locationProvider, $httpProvider) {
    $routeProvider
        .when('/', {
            redirectTo: '/home'
        })
        .when('/login', { 
            templateUrl: 'views/login.html', 
            controller: 'LoginCtrl' 
        })
        .when('/home', { 
            templateUrl: 'views/home.html', 
        })
        .otherwise({ 
            redirectTo: '/login' 
        });
     $locationProvider.html5Mode(true);
});

如果这不起作用，您可能必须通过将其放在 head 部分来设置页面的基础。

<base href="/">