在angular js中成功登錄后將用戶重定向到儀表板

Question

登錄成功后，我想將用戶重定向到儀表板。我用$location.path嘗試了此操作，但無法實現結果。 登錄成功完成，但沒有將頁面重定向到儀表板。基本布局是具有ng-view的index.html，我想將布局更改為具有帶有鏈接的導航欄菜單的儀表板

下面是script.js

// create the module and name it scotchApp
var app = angular.module('routingApp', ['ngRoute']);

// configure our routes
app.config(function($routeProvider) {
    $routeProvider

            // route for the home page
            .when('/', {
                templateUrl: 'templates/login.html',
                controller: 'loginController'
            })
            // route for the home page
            .when('/dashboard', {
                templateUrl: 'templates/dashboard.html',
                controller: 'dashController'
            })

            // route for the about page
            .when('/about', {
                templateUrl: 'templates/about.html',
                controller: 'aboutController'
            })

            // route for the contact page
            .when('/contact', {
                templateUrl: 'templates/contact.html',
                controller: 'contactController'
            })

            // route for the users listing page
            .when('/users', {
                templateUrl: 'templates/users.html',
                controller: 'userController'
            });
});

// create the controller and inject Angular's $scope
app.controller('loginController', function($scope,$http) {
    // create a message to display in our view
   $scope.user = {};
   $scope.submitData = function (user)
    {
      var data = $.param({
            'user': $scope.user,
            'type': 'login'
        });
      //console.log(data);
      var config = {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
            }
        };
      $http.post('action.php', data, config).success(function(response) {
            if (response.status == 'OK') {
                $scope.messageSuccess(response.msg);
                $location.url("/dashboard");
            } else {
                $scope.messageError(response.msg);
            }
        });
    };
    $scope.messageSuccess = function(msg){
        $('.alert-success > p').html(msg);
        $('.alert-success').show();
        $('.alert-success').delay(5000).slideUp(function(){
            $('.alert-success > p').html('');
        });
    };

    // function to display error message
    $scope.messageError = function(msg){
        $('.alert-danger > p').html(msg);
        $('.alert-danger').show();
        $('.alert-danger').delay(5000).slideUp(function(){
            $('.alert-danger > p').html('');
        });
    };
});
app.controller('dashController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});
app.controller('aboutController', function($scope) {
    $scope.message = 'Look! I am an about page.';
});

app.controller('contactController', function($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});

app.controller("userController",function($scope,$http){
    $scope.users =[]; //defining model for "userController" controller
    $scope.tempUserData ={};
    $scope.getRecords = function(){ //define function to fetch all users
        $http.get('action.php',{
            params:{
                'type':'view'
            }
        }).success(function(response){
           if(response.status == 'OK'){
                $scope.users = response.records;
            } 
        })
    };
    $scope.saveUser = function(type){
        var data = $.param({
            'data':$scope.tempUserData,
            'type':type
        });
        var config = {
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
            }
        };
        $http.post("action.php", data, config).success(function(response){
            if(response.status == 'OK'){
                if(type == 'edit'){

                }else{
                    $scope.users.push({
                        id:response.data.id,
                        name:response.data.name,
                        email:response.data.email,
                        phone:response.data.phone,
                        created:response.data.created
                    });

                }
                $scope.userForm.$setPristine();
                $scope.tempUserData = {};
                $('.formData').slideUp();
                $scope.messageSuccess(response.msg);
            }else{
                $scope.messageError(response.msg);
            }
        });
    };
    // function to add user
    $scope.addUser = function(){ 
        $scope.saveUser('add');
    };

    // function to delete user
    $scope.deleteUser = function(user){
       var conf = confirm("Are you sure to delete user?");
       if(conf == true){
            var data = $.param({
                'id': user.id,
                'type': 'delete'
            });
            var config = {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                }
            };
            $http.post('action.php', data, config).success(function(response){
                if(response.status == 'OK'){
                   var index = $scope.users.indexOf(user);
                   $scope.users.splice(index,1);
                   $scope.messageSuccess(response.msg); 
                }else{
                   $scope.messageError(response.msg); 
                }
            });
       }
    };

    //funtion to maintain user status
    $scope.changeStatus = function(index, user, status){

        var conf = confirm("Are you sure to update user status?");
        if(conf == true){
            var data = $.param({
                'id': user.id,
                'type': 'updateStatus',
                'status': status
            });
            var config = {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                }
            };
            $http.post('action.php', data, config).success(function(response){
                if(response.status == 'OK'){
                    $scope.users[index].status = status;
                    $scope.messageSuccess(response.msg); 
                }else{
                    $scope.messageError(response.msg);
                }
            });
        }
    } ;
    // function to display success message
    $scope.messageSuccess = function(msg){
        $('.alert-success > p').html(msg);
        $('.alert-success').show();
        $('.alert-success').delay(5000).slideUp(function(){
            $('.alert-success > p').html('');
        });
    };

    // function to display error message
    $scope.messageError = function(msg){
        $('.alert-danger > p').html(msg);
        $('.alert-danger').show();
        $('.alert-danger').delay(5000).slideUp(function(){
            $('.alert-danger > p').html('');
        });
    };
})

index.html如下：

<body>

    <div ng-view></div>
</body>

dashboard.html：

<nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">Routing Example</a>
      </div>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
        <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
        <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
        <li><a href="#users"><i class="fa fa-user"></i> Users</a></li>
      </ul>
    </div>
  </nav>

Answer 1

當您在控制器函數中聲明$location時，這將起作用。 我舉一個例子。

app.controller('loginController', function($scope,$http,$location) {}
//You did't define $location in this function. just use it and try.