web-dev-qa-db-fra.com

$ window.location.href ne fonctionne pas dans AngularJS

Je construis une page de base AngularJS Login et $ window.location.href ne redirige pas la page vers un nouveau code HTML de mon système hébergé par WAMP. J'ai même essayé de le rediriger vers Google. Rien ne se passe. J'ai essayé toutes les solutions disponibles ici et rien ne semble fonctionner. Des solutions?

JS suivi de HTML 

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';


  $scope.submit = function() {
    if ($scope.username && $scope.password) {
      var user = $scope.username;
      var pass = $scope.password;
      if (pass == "admin" && user == "[email protected]") {
        alert("Login Successful");
        $window.location.href = "http://google.com"; //Re-direction to some page
      } else if (user != "[email protected]") {
        alert("Invalid username");
      } else if (pass != "admin" && user == "[email protected]") {
        alert("Invalid password");
      }
    } else {
      alert("Invalid Login");
    }
  }


});
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="login.js"></script>
  <link rel="stylesheet" href="login.css">
</head>

<body ng-controller="MainCtrl">
  <form>
    <label>Username:</label>
    <input type="email" ng-model="username" class="lab1" />
    </br>
    </br>
    <label></label>Password:</label>
    <input type="password" ng-model="password" class="lab2">
    </br>
    <button type="submit" ng-click="submit()" class="buttonclass">login</button>
  </form>
</body>

</html>

htmlangularjsloginwindow.location
7
Varun Nair

Dans js angulaire, vous pouvez utiliser $location. Injectez-le dans votre contrôleur:

app.controller('MainCtrl', function($scope, $location) { ... }

Et si vous voulez rediriger vers Google, utilisez sa méthode url():

$location.url('http://google.fr');

vous pouvez également utiliser la méthode path() pour l'URL relative:

$location.path('home'); // will redirect you to 'yourDomain.xx/home'

https://docs.angularjs.org/api/ng/service/ $ location

3
Alexandre

Il convient de noter la documentation actuelle pour $location. Plus précisément la citation: 

Quand devrais-je utiliser $ location?

Chaque fois que votre application doit réagir à une modification de l'URL actuelle ou si vous souhaitez modifier l'URL actuelle dans le navigateur.

Qu'est-ce que ça ne fait pas?

Cela ne provoque pas un rechargement complet de la page lorsque l'URL du navigateur est modifiée. Pour recharger la page après avoir modifié l'URL, utilisez l'API de niveau inférieur, $ window.location.href.

Si vous avez besoin de rediriger le navigateur vers une nouvelle page, $ window.location est définitivement recommandé.

3
Jim Grimmett
Try this,

var homeApp = angular.module('HomeApp', []);

homeApp.controller('HomeController', function ($scope, $http, $window) {
    $scope.loginname = "Login To Demo App";
    $scope.login = function () {

        var name = $scope.username;
        var pwd = $scope.password;
        var req = {
            method: 'POST',
            url: '../Account/LoginAccount',
            headers: {
                'Content-Type': undefined
            },
            params: { username: name, password: pwd }
        }

        $http(req).then(function (responce) {

            var url = '';
            if (responce.data == "True") {
                url = '../Account/WelcomePage';
                $window.location.href = url;
            }
            else {
                url = '../Account/Login';
                $window.location.href = url;
            }
        }, function (responce) {

        });
    }
});
1
Ramu Vemula

Vous pouvez utiliser $window.location.href dans AngularJS

app.controller('MainCtrl', function ($scope,$window) {
    $scope.formData = {};
    $scope.submitForm = function (formData){
    $window.location.href = "jobs";
    };
  })
0
Miguel Herreros Cejas

Angular a son propre gestionnaire d'emplacement nommé $location que je préfère utiliser dans l'application angulaire.

app.controller('MainCtrl', function($scope, $location) {

injecter à votre contrôleur et utiliser comme suit; 

$location.path('http://foo.bar')
0
İsmail Şener