Bagaimana cara mengarahkan ulang ke halaman lain menggunakan AngularJS?

171

Saya menggunakan panggilan ajax untuk melakukan fungsionalitas dalam file layanan dan jika responsnya berhasil, saya ingin mengalihkan halaman ke url lain. Saat ini, saya melakukan ini dengan menggunakan js sederhana "window.location = response ['message'];". Tapi saya perlu menggantinya dengan kode angularjs. Saya telah melihat berbagai solusi pada stackoverflow, mereka menggunakan $ location. Tetapi saya baru untuk sudut dan mengalami kesulitan untuk mengimplementasikannya.

$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
        })
Farjad Hasan
sumber
2
Mengapa Anda perlu menggunakan sudut untuk itu? Ada alasan khusus? document.location adalah cara yang tepat dan mungkin lebih efisien daripada cara sudut
casraf

Jawaban:

229

Anda dapat menggunakan Angular $window:

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

Contoh penggunaan dalam contoller:

(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');
            });
        }
    }
})();
Ewald Stieger
sumber
1
Saya telah menggunakan $ window.location.href tetapi ia memberikan kesalahan fungsi $ window.location yang tidak terdefinisi. Apakah saya perlu menyertakan ketergantungan untuk ini?
Farjad Hasan
3
Tidak, tetapi Anda mungkin perlu menyuntikkan $ window ke controller Anda. Lihat jawaban saya yang diedit.
Ewald Stieger
2
Ini window.location.href bukan $ window.location.href
Junaid
3
@ user3623224 - sebenarnya bukan;)
Ben
12
@Junaid window.location.href adalah untuk objek jendela tradisional, $ window.location.href untuk objek window $ AngularJS, di sini: docs.angularjs.org/api/ng/service/$window
Mikel Bitson
122

Anda dapat mengalihkan ke URL baru dengan berbagai cara.

  1. Anda dapat menggunakan $ window yang juga akan menyegarkan halaman
  2. Anda dapat "tetap berada di dalam" aplikasi satu halaman dan menggunakan $ location dalam hal ini Anda dapat memilih di antara $location.path(YOUR_URL);atau $location.url(YOUR_URL);. Jadi perbedaan mendasar antara kedua metode ini adalah yang $location.url()juga memengaruhi parameter get sementara $location.path()tidak.

Saya akan merekomendasikan membaca dokumen $locationdan $windowjadi Anda mendapatkan pemahaman yang lebih baik tentang perbedaan di antara mereka.

Cristi Berceanu
sumber
15

$location.path('/configuration/streaming'); ini akan bekerja ... menyuntikkan layanan lokasi di controller

pengguna2266928
sumber
13

Saya menggunakan kode di bawah ini untuk mengalihkan ke halaman baru

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

dan menyuntikkan objek $ window dalam fungsi controller saya.

Sanchi Girotra
sumber
12

Mungkin membantu Anda !!

Sampel kode 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");
  };
}
Anil Singh
sumber
6

Di AngularJS Anda dapat mengarahkan ulang formulir Anda (saat dikirim) ke halaman lain dengan menggunakan window.location.href='';seperti di bawah ini:

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

Cukup coba ini:

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

Saya menghadapi masalah dalam mengalihkan ke halaman lain di aplikasi sudut juga

Anda dapat menambahkan $windowseperti yang disarankan Ewald dalam jawabannya, atau jika Anda tidak ingin menambahkannya $window, tambahkan saja batas waktu dan itu akan berhasil!

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

Cara sederhana yang saya gunakan adalah

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

Cara yang baik untuk melakukannya adalah menggunakan $ state.go ('nama negara', {params ...}) lebih cepat dan lebih ramah untuk pengalaman pengguna jika Anda tidak perlu memuat ulang dan menghapus seluruh konfigurasi aplikasi dan hal-hal lain

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

});

// rute

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

})();
gsalgadotoledo
sumber
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");
                }
            })
    }
} }());
Ruben.sar
sumber
0

Jika Anda ingin menggunakan tautan maka: di html miliki:

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

dalam file naskah

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

}

Saya harap Anda melihat contoh ini bermanfaat bagi saya bersama dengan jawaban lainnya.

Nour Lababidi
sumber
0

Menggunakan location.href="./index.html"

atau buat scope $window

dan menggunakan $window.location.href="./index.html"

shashank raveendran
sumber