如何使用AngularJS重定向到另一个页面？

Question

我正在使用ajax调用来执行服务文件中的功能，如果响应成功，我想将页面重定向到另一个URL。目前，我通过使用简单的js＆＃34; window.location = response [＆＃39; message＆＃39;];＆＃34;来完成此操作。但我需要用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

您可以使用Angular $window：

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

控制器中的示例用法：

答案 1 :(得分：116)

您可以通过不同方式重定向到新网址。

1. 您可以使用$window来刷新页面
2. 您可以“留在”单页应用中并使用$location，在这种情况下，您可以选择$location.path(YOUR_URL);或$location.url(YOUR_URL);。因此，两种方法之间的基本区别在于$location.url()也会影响获取参数，而$location.path()则不会。

我建议您阅读$location和$window上的文档，以便更好地了解它们之间的差异。

答案 2 :(得分：14)

$location.path('/configuration/streaming'); 这会工作...... 在控制器中注入位置服务

答案 3 :(得分：11)

它可能对你有所帮助!!

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

答案 4 :(得分：9)

我使用以下代码重定向到新页面

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

并在我的控制器函数中注入了$ window对象。

答案 5 :(得分：4)

在 Angular Js 中，您可以使用windos.location.href =＆＃39 将表单重定向（提交）到其他页面;＆＃39 ;;

像这样：

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/";      
    }
  }

试试这个：

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

答案 6 :(得分：3)

我使用的简单方法是

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

答案 7 :(得分：3)

我在角度应用程序中重定向到另一个页面时遇到了问题

您可以在Ewald的回答中添加$window，或者如果您不想添加$window，只需添加超时即可！

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

答案 8 :(得分：2)

这样做的好方法是使用$ state.go（'statename'，{params ...}）对于用户体验更快，更友好的情况下，您无需重新加载和整理应用程序配置和东西

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

})();

答案 9 :(得分：0)

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

答案 10 :(得分：0)

如果你想使用链接，那么：在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);

}

我希望你看到这个例子对我和其他答案都有帮助。

答案 11 :(得分：0)

使用 location.href="./index.html"

或创建 scope $window

并使用 $window.location.href="./index.html"

Answer 2

您可以通过不同方式重定向到新网址。

1. 您可以使用$window来刷新页面
2. 您可以“留在”单页应用中并使用$location，在这种情况下，您可以选择$location.path(YOUR_URL);或$location.url(YOUR_URL);。因此，两种方法之间的基本区别在于$location.url()也会影响获取参数，而$location.path()则不会。

我建议您阅读$location和$window上的文档，以便更好地了解它们之间的差异。

Answer 3

$location.path('/configuration/streaming'); 这会工作...... 在控制器中注入位置服务

Answer 4

它可能对你有所帮助!!

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 5

我使用以下代码重定向到新页面

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

并在我的控制器函数中注入了$ window对象。

Answer 6

在 Angular Js 中，您可以使用windos.location.href =＆＃39 将表单重定向（提交）到其他页面;＆＃39 ;;

像这样：

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/";      
    }
  }

试试这个：

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

Answer 7

我使用的简单方法是

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

Answer 8

我在角度应用程序中重定向到另一个页面时遇到了问题

您可以在Ewald的回答中添加$window，或者如果您不想添加$window，只需添加超时即可！

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

Answer 9

这样做的好方法是使用$ state.go（'statename'，{params ...}）对于用户体验更快，更友好的情况下，您无需重新加载和整理应用程序配置和东西

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

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

如果你想使用链接，那么：在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 12

使用 location.href="./index.html"

或创建 scope $window

并使用 $window.location.href="./index.html"