Как перенаправить на другую страницу с помощью AngularJS?

Question

Я использую вызов ajax для выполнения функций в служебном файле, и если ответ удался, я хочу перенаправить страницу на другой URL-адрес. В настоящее время я делаю это, используя простой js "window.location = response ['message'];". Но мне нужно заменить его кодом angularjs. Я смотрел различные решения в stackoverflow, они использовали $ location. Но я новичок в угловатых и испытываю трудности с его внедрением.

$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

Вы можете использовать угловые $window:

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

Пример использование в регуляторе,:

(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

Это может помочь вам !!

AngularJs пример кода

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

Вы можете перенаправить на новый URL-адрес по-разному.

1. Вы можете использовать $window, который будет также обновить страницу
2. Вы можете «оставаться внутри» единого приложения страницы и использовать $location в этом случае вы можете выбрать между $location.path(YOUR_URL); или $location.url(YOUR_URL);. Таким образом, основная разница между двумя методами заключается в том, что $location.url() также влияет на параметры получения, тогда как $location.path() этого не делает.

Я рекомендую прочитать документацию на $location и $window так что вы получите лучшее представление о различиях между ними.

Answer 4

$location.path('/configuration/streaming'); это будет работать ... впрыскивать услугу определения местоположения контроллера

Answer 5

Я использовал следующий код для перенаправления на новую страницу

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

и вводил $ объекта окна в моей функции контроллера.

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

Простой способ я использую

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

Answer 8

Хороший способ сделать это с помощью $ state.go ('StateName', {Params ...}) Является более быстрым и более дружественным для работы пользователей в тех случаях, когда вам не придется перезагружать и bootsraping целое приложение конфигурации и вещи

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

}); 

// маршруты

(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

Если вы хотите использовать ссылка затем: в HTML есть:

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

в файле транскрипта

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

}

Я надеюсь, что этот пример полезен, как и для меня, а также для других ответов.

Answer 10

я столкнулся с проблемами в перенаправлении на другую страницу в угловом приложении, а

Вы можете добавить $window, как Эвальд предложил в своем ответе, или если вы не хотите, чтобы добавить $window, просто добавьте тайм-аут, и он будет работать!

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