Cách chuyển hướng đến trang khác bằng AngularJS?

Question

Tôi đang sử dụng cuộc gọi ajax để thực hiện chức năng trong tệp dịch vụ và nếu phản hồi thành công, tôi muốn chuyển hướng trang đến một url khác. Hiện tại, tôi đang làm điều này bằng cách sử dụng js đơn giản "window.location = response ['message'];". Nhưng tôi cần phải thay thế nó bằng mã angularjs. Tôi đã xem các giải pháp khác nhau trên stackoverflow, họ đã sử dụng $ location. Nhưng tôi mới đến góc cạnh và gặp khó khăn để thực hiện nó.

$http({ 
      url: RootURL+'app-code/common.service.php', 
      method: "POST", 
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
      dataType: 'json', 
      data:data + '&method=signin' 

     }).success(function (response) { 

      console.log(response); 

      if (response['code'] == '420') { 

       $scope.message = response['message']; 
       $scope.loginPassword = ''; 
      } 
      else if (response['code'] != '200'){ 

       $scope.message = response['message']; 
       $scope.loginPassword = ''; 
      } 
      else { 
       window.location = response['message']; 
      } 
      // $scope.users = data.users; // assign $scope.persons here as promise is resolved here 
     }) 

Answer 1

Bạn có thể sử dụng góc $window:

$window.location.href = '/index.html'; 

Ví dụ sử dụng trong một contoller:

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .controller('LoginCtrl', LoginCtrl); 

    LoginCtrl.$inject = ['$window', 'loginSrv', 'notify']; 

    function LoginCtrl($window, loginSrv, notify) { 
     /* jshint validthis:true */ 
     var vm = this; 
     vm.validateUser = function() { 
      loginSrv.validateLogin(vm.username, vm.password).then(function (data) {   
       if (data.isValidUser) {  
        $window.location.href = '/index.html'; 
       } 
       else 
        alert('Login incorrect'); 
      }); 
     } 
    } 
})(); 

Answer 2

Nó có thể giúp bạn !!

Các AngularJs mã mẫu

var app = angular.module('app', ['ui.router']); 

app.config(function($stateProvider, $urlRouterProvider) { 

    // For any unmatched url, send to /index 
    $urlRouterProvider.otherwise("/login"); 

    $stateProvider 
    .state('login', { 
     url: "/login", 
     templateUrl: "login.html", 
     controller: "LoginCheckController" 
    }) 
    .state('SuccessPage', { 
     url: "/SuccessPage", 
     templateUrl: "SuccessPage.html", 
     //controller: "LoginCheckController" 
    }); 
}); 

app.controller('LoginCheckController', ['$scope', '$location', LoginCheckController]); 

function LoginCheckController($scope, $location) { 

    $scope.users = [{ 
    UserName: 'chandra', 
    Password: 'hello' 
    }, { 
    UserName: 'Harish', 
    Password: 'hi' 
    }, { 
    UserName: 'Chinthu', 
    Password: 'hi' 
    }]; 

    $scope.LoginCheck = function() { 
    $location.path("SuccessPage"); 
    }; 

    $scope.go = function(path) { 
    $location.path("/SuccessPage"); 
    }; 
} 

Answer 3

Bạn có thể chuyển hướng đến một URL mới theo những cách khác nhau.

1. Bạn có thể sử dụng $window mà cũng sẽ làm mới trang
2. Bạn có thể "ở lại bên trong" ứng dụng trang duy nhất và sử dụng $location trong trường hợp mà bạn có thể lựa chọn giữa $location.path(YOUR_URL); hoặc $location.url(YOUR_URL);. Vì vậy, sự khác biệt cơ bản giữa 2 phương pháp là $location.url() cũng ảnh hưởng đến các thông số nhận được trong khi $location.path() thì không.

Tôi khuyên bạn nên đọc tài liệu trên $location và $window để bạn hiểu rõ hơn về sự khác biệt giữa chúng.

Answer 4

$location.path('/configuration/streaming'); này sẽ làm việc ... tiêm dịch vụ vị trí trong bộ điều khiển

Answer 5

tôi đã sử dụng mã dưới đây để chuyển hướng đến trang mới

$window.location.href = '/foldername/page.html'; 

và tiêm $ cửa sổ đối tượng trong chức năng điều khiển của tôi.

Answer 6

(function() { 
"use strict"; 
angular.module("myApp") 
     .controller("LoginCtrl", LoginCtrl); 

function LoginCtrl($scope, $log, loginSrv, notify) { 

    $scope.validateUser = function() { 
     loginSrv.validateLogin($scope.username, $scope.password) 
      .then(function (data) { 
       if (data.isValidUser) { 
        window.location.href = '/index.html'; 
       } 
       else { 
        $log.error("error handler message"); 
       } 
      }) 
    } 
} }()); 

Answer 7

Cách đơn giản tôi sử dụng là

app.controller("Back2Square1Controller", function($scope, $location) { 
    window.location.assign(basePath + "/index.html"); 
}); 

Answer 8

Cách tốt nhất để làm điều này là sử dụng $ state.go ('statename', {params ...}) Là nhanh hơn và thân thiện cho người dùng kinh nghiệm trong các trường hợp khi bạn không cần phải tải lại và bootsraping toàn bộ cấu hình ứng dụng và các công cụ

(function() { 
    'use strict'; 

    angular 
     .module('app.appcode') 
     .controller('YourController', YourController); 

    YourController.$inject = ['rootURL', '$scope', '$state', '$http']; 

    function YourController(rootURL, $scope, $state, $http) { 

     $http({ 
       url: rootURL + 'app-code/common.service.php', 
       method: "POST", 
       headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
       dataType: 'json', 
       data:data + '&method=signin' 

      }).success(function (response) { 
       if (response['code'] == '420') { 

        $scope.message = response['message']; 
        $scope.loginPassword = ''; 
       } else if (response['code'] != '200') { 

        $scope.message = response['message']; 
        $scope.loginPassword = ''; 
       } else { 
        // $state.go('home'); // select here the route that you want to redirect 
        $state.go(response['state']); // response['state'] should be a route on your app.routes 
       } 
      }) 
    } 

}); 

// tuyến

(function() { 
    'use strict'; 

    angular 
     .module('app') 
     .config(routes); 

    routes.$inject = [ 
     '$stateProvider', 
     '$urlRouterProvider' 
    ]; 

    function routes($stateProvider, $urlRouterProvider) { 
     /** 
     * Default path for any unmatched url 
     */ 
     $urlRouterProvider.otherwise('/'); 

     $stateProvider 
      .state('home', { 
       url: '/', 
       templateUrl: '/app/home/home.html', 
       controller: 'Home' 
      }) 
      .state('login', { 
       url: '/login', 
       templateUrl: '/app/login/login.html', 
       controller: 'YourController' 
      }) 
      // ... more routes .state 
    } 

})(); 

Answer 9

Nếu bạn muốn sử dụng một liên kết sau đó: trong html có:

<button type="button" id="btnOpenLine" class="btn btn-default btn-sm" ng-click="orderMaster.openLineItems()">Order Line Items</button> 

trong file nguyên cảo

public openLineItems() { 
if (this.$stateParams.id == 0) { 
    this.Flash.create('warning', "Need to save order!", 3000); 
    return 
} 
this.$window.open('#/orderLineitems/' + this.$stateParams.id); 

}

Tôi hy vọng bạn thấy ví dụ này hữu ích vì nó là dành cho tôi cùng với các câu trả lời khác.

Answer 10

tôi phải đối mặt với các vấn đề trong chuyển hướng đến một trang khác trong một ứng dụng góc cũng

Bạn có thể thêm $window như Ewald đã gợi ý trong câu trả lời của mình, hoặc nếu bạn không muốn thêm $window, chỉ cần thêm một thời gian chờ và nó sẽ hoạt động!

setTimeout(function() { 
     window.location.href = "http://whereeveryouwant.com"; 
    }, 500);