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

如果不起作用，你可能需要在页面上设置你的基础。

<base href="/">

AngularJS $ routeProvider：路由不起作用

1 个答案: