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

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

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.


15

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


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.


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

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

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

2

Cara sederhana yang saya gunakan adalah

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

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
   }

})();

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

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.


0

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

atau buat scope $window

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.