Comment rediriger vers une autre page en utilisant AngularJS?

J'utilise un appel ajax pour exécuter des fonctionnalités dans un fichier de service et si la réponse est réussie, je souhaite rediriger la page vers une autre URL. Actuellement, je fais cela en utilisant de simples js "window.location = response ['message'];". Mais je dois le remplacer par du code angularjs. J'ai cherché diverses solutions sur stackoverflow, ils ont utilisé $ location. Mais je suis nouveau dans angular et j'ai du mal à le mettre en œuvre.

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

Vous pouvez utiliser Angular $window:

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

Exemple d'utilisation dans un contrôleur:

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

Vous pouvez rediriger vers une nouvelle URL de différentes manières.

1. Vous pouvez utiliser $ window qui actualisera également la page
2. Vous pouvez "rester à l'intérieur" de l'application d'une seule page et utiliser $ location, auquel cas vous pouvez choisir entre $location.path(YOUR_URL);ou $location.url(YOUR_URL);. Donc, la différence fondamentale entre les 2 méthodes est que cela $location.url()affecte également les paramètres d'obtention, alors que ce $location.path()n'est pas le cas.

Je recommanderais de lire les documents $locationet $windowainsi vous aurez une meilleure compréhension des différences entre eux.

$location.path('/configuration/streaming'); cela fonctionnera ... injectez le service de localisation dans le contrôleur

J'ai utilisé le code ci-dessous pour rediriger vers une nouvelle page

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

et injecté l'objet $ window dans ma fonction de contrôleur.

Cela pourrait vous aider !!

L'échantillon de code 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");
  };
}

Dans AngularJS, vous pouvez rediriger votre formulaire (lors de la soumission) vers une autre page en utilisant window.location.href='';comme ci-dessous:

postData(email){
    if (email=='undefined') {
      this.Utils.showToast('Invalid Email');
    } else {
      var origin = 'Dubai';
      this.download.postEmail(email, origin).then(data => { 
           ...
      });
      window.location.href = "https://www.thesoftdesign.com/";      
    }
  }

Essayez simplement ceci:

window.location.href = "https://www.thesoftdesign.com/"; 

J'ai également rencontré des problèmes de redirection vers une page différente dans une application angulaire

Vous pouvez ajouter le $windowcomme Ewald l'a suggéré dans sa réponse, ou si vous ne voulez pas ajouter le $window, ajoutez simplement un délai d'attente et cela fonctionnera!

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

La façon simple que j'utilise est

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

Un bon moyen de le faire est d'utiliser $ state.go ('statename', {params ...}) est plus rapide et plus convivial pour l'expérience utilisateur dans les cas où vous n'avez pas à recharger et à démarrer toute la configuration de l'application, etc.

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

});

// itinéraires

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

})();

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

Si vous souhaitez utiliser un lien, alors: dans le html, avez:

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

dans le fichier dactylographié

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

}

J'espère que vous voyez cet exemple utile car il a été pour moi avec les autres réponses.

En utilisant location.href="./index.html"

ou créer scope $window

et en utilisant $window.location.href="./index.html"