角度路由无法正常工作答案

【问题标题】：Angular routing is not working properly角度路由无法正常工作
【发布时间】：2016-10-24 15:57:38
【问题描述】：

我正在构建一个登录页面，其中用户有 2 个角色，即学生或图书管理员。当用户输入他的凭据并单击提交时，将调用验证函数。

现在，

我面临的问题是：

路由不起作用，即控件到达警报（“登录成功”）；并进入 if ($scope.roles[i].role === "student") { 但不会将页面定向到 $location.path('/home/student');

登录页面地址如下：

http://localhost:63342/LabguideExamples/Assignment/Day4/Login.html?_ijt=oa5emr702cenehrs4oosarmg0d

登录成功后的url如下。

http://localhost:63342/LabguideExamples/Assignment/Day4/Login.html?_ijt=oa5emr702cenehrs4oosarmg0d#/home/student

根据 app.js，该 url 仍然有 Login.html，并且没有被“ViewBooks_Student.html”替换。

非常感谢任何帮助。

谢谢

controller.js

var Controllers = angular.module('Controllers', ['ngRoute']);
Controllers.controller('LoginCtrl', ['$scope','$http','$location',
function ($scope,$http,$location) {
    $scope.validate=function()
    {
        $http.get('data/roles.json').success(function(data) {
            $scope.roles = data;

        var count=0;
            for (var i = 0, len = $scope.roles.length; i < len; i++) {
if ($scope.username === $scope.roles[i].username && $scope.password === $scope.roles[i].password) {
                    alert("login successful");
                    count = count + 1;
                    if ($scope.roles[i].role === "student") {
                        $location.path('/home/student');
                        break;
                    }
                    else {
                        $location.path('/home/librarian');
                        break;
                    }

                }
            }

        if(count!=1)
        {
            alert("Please provide valid login credentials");
            $location.path( "/main" )
        }
        });
    }

}]);

app.js

var bookApp = angular.module('bookApp',[
'Controllers','ngRoute'
]);
bookApp.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.
    when('/main', {
        templateUrl: 'Login',
        controller: 'LoginCtrl'
    }).
    when('/home/student', {
        templateUrl: 'ViewBooks_Student.html',
        controller: 'BookListCtrl_Student'
    }).
    when('/home/librarian', {
        templateUrl: 'ViewBooks_Librarian.html',
        controller: 'BookListCtrl_Librarian'
    }).
    when('/issue/:bookId', {
        templateUrl: 'IssueBook.html',
        controller: 'IssueBookCtrl'
    }).
    when('/return/:bookId', {
        templateUrl: 'ReturnBook.html',
        controller: 'ReturnBookCtrl'
    }).
    otherwise({
        redirectTo: '/main'
    });
}]);

【问题讨论】：

$scope.role 未在任何地方设置，因此其值为undefined
感谢 GillesC，我将其替换为 role.role，但路由仍然无法正常工作。
您的$http.get() 是一个异步调用，因此代码将在$scope.roles 被填充之前进入您的angular.forEach() 行。您可能必须将所有这些内容移到您的 $http.get() 调用的成功函数中。

标签： javascript angularjs

【解决方案1】：

这是一个深层次的问题。据我了解，登录后您需要重定向到基于用户角色的页面。所以你在控制器上写的这个特殊逻辑你需要写到 Angular Run 块中

angular.module('myapp').run([],function(){})

基本上 Angular 有一个优先执行系统运行块在控制器之前执行。有关更多详细信息，请查看 Angular 文档。 https://docs.angularjs.org/guide/module 。

【讨论】：