web-dev-qa-db-fra.com

Comment rediriger vers une autre page en utilisant AngularJS?

J'utilise un appel ajax pour exécuter une fonctionnalité dans un fichier de service et si la réponse est réussie, je souhaite rediriger la page vers une autre URL. Actuellement, je le fais en utilisant un simple js "window.location = response ['message'];". Mais je dois le remplacer par du code angularjs. J'ai examiné diverses solutions sur stackoverflow, elles utilisaient $ location. Mais je suis nouveau sur 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
        })
javascriptangularjs
159
Farjad Hasan

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

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 dans" l'application de page simple et utiliser $ location , auquel cas vous pouvez choisir entre $location.path(YOUR_URL); ou $location.url(YOUR_URL);. Ainsi, la différence fondamentale entre les 2 méthodes est que $location.url() affecte également les paramètres d'obtention, contrairement à $location.path().

Je recommanderais de lire la documentation sur $location et $window afin de mieux comprendre les différences qui les séparent.

118
Cristi Berceanu

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

14
user2266928

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.

11
Sanchi Girotra

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");
  };
}
11
Anil Singh

Dans Angular Js vous pouvez rediriger votre formulaire (sur submit) vers une autre page en utilisant windos.location.href = '';

comme ça:

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/";
4
Rizo

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

Vous pouvez ajouter le $window comme l'a suggéré Ewald 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);
3
Vignesh Subramanian

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

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

})();
2
gsalgadotoledo

La façon simple que j'utilise est

app.controller("Back2Square1Controller", function($scope, $location) {
    window.location.assign(basePath + "/index.html");
});
2
raghavsood33
 (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");
                }
            })
    }
} }());
0
Ruben.sar

Si vous voulez utiliser un lien, alors: dans le HTML, avoir:

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

dans le fichier TypeScript

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 trouverez cet exemple utile, comme ce fut le cas pour moi, avec les autres réponses.

0
Nour Lababidi