AngularJS का उपयोग करके किसी अन्य पृष्ठ पर पुनर्निर्देशित कैसे करें?

171

मैं एक सेवा फ़ाइल में कार्यक्षमता प्रदर्शन करने के लिए ajax कॉल का उपयोग कर रहा हूं और यदि प्रतिक्रिया सफल होती है, तो मैं पृष्ठ को दूसरे url पर पुनर्निर्देशित करना चाहता हूं। वर्तमान में, मैं सरल js "window.location = response ['message"] का उपयोग करके ऐसा कर रहा हूं। " लेकिन मुझे इसे कोणीयज कोड के साथ बदलने की आवश्यकता है। मैंने स्टैकओवरफ़्लो पर विभिन्न समाधानों को देखा है, उन्होंने $ स्थान का उपयोग किया है। लेकिन मैं कोणीय के लिए नया हूं और इसे लागू करने में परेशानी हो रही है।

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

javascript angularjs

— फरजाद हसन
स्रोत

2

आपको इसके लिए कोणीय का उपयोग करने की आवश्यकता क्यों है? कोई खास वजह? document.location उचित तरीका है और शायद कोणीय तरीके से अधिक कुशल है

— casraf

229

आप कोणीय का उपयोग कर सकते हैं $window:

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

एक कॉनोलर में उदाहरण का उपयोग:

(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

मैंने $ window.location.href का उपयोग किया है लेकिन यह अपरिभाषित फ़ंक्शन $ window.location की त्रुटि देता है। क्या मुझे इसके लिए कोई निर्भरता शामिल करने की आवश्यकता है?

— फरजाद हसन

3

नहीं, लेकिन आपको अपने कंट्रोलर में $ विंडो इंजेक्ट करने की आवश्यकता हो सकती है। मेरा संपादित उत्तर देखें।

— एवाल्ड स्टीलर

2

इसकी window.location.href नहीं $ window.location.href

— जुनैद

3

@ user3623224 - यह वास्तव में नहीं है;)

— बेन

12

: @Junaid window.location.href पारंपरिक विंडो ऑब्जेक्ट के लिए है, $ window.location.href AngularJS $ खिड़की वस्तु है, यहाँ के लिए है docs.angularjs.org/api/ng/service/$window

— मिकेल Bitson

122

आप विभिन्न तरीकों से एक नए URL पर पुनर्निर्देशित कर सकते हैं।

आप $ विंडो का उपयोग कर सकते हैं जो पेज को रिफ्रेश भी करेगी
आप सिंगल पेज ऐप पर "अंदर रह सकते हैं" और $ स्थान का उपयोग कर सकते हैं, जिस स्थिति में आप $location.path(YOUR_URL);या के बीच चयन कर सकते हैं $location.url(YOUR_URL);। तो 2 विधियों के बीच मूल अंतर $location.url()यह है कि प्रभावित होने वाले मापदंडों को भी प्रभावित करता है जबकि $location.path()ऐसा नहीं होता है।

मैं डॉक्स को पढ़ने की सलाह दूंगा $locationऔर $windowइसलिए आप उन दोनों के बीच अंतर पर बेहतर समझ प्राप्त कर सकते हैं।

— क्रिस्टी बर्सेनू
स्रोत

15

$location.path('/configuration/streaming'); यह काम करेगा ... नियंत्रक में स्थान सेवा इंजेक्षन

— user2266928
स्रोत

13

मैंने नए पृष्ठ पर पुनर्निर्देशित करने के लिए नीचे दिए गए कोड का उपयोग किया

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

और मेरे नियंत्रक फ़ंक्शन में $ विंडो ऑब्जेक्ट इंजेक्ट किया गया।

— सांची गिरोत्रा
स्रोत

12

यह आपकी मदद कर सकता है !!

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

AngularJS में आप नीचे दिए गए तरीके से अपने फॉर्म को (पेज पर) दूसरे पेज पर रीडायरेक्ट कर सकते window.location.href='';हैं:

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

— Rizo
स्रोत

4

मुझे एक कोणीय ऐप में एक अलग पेज पर रीडायरेक्ट करने में भी समस्याओं का सामना करना पड़ा

आप $windowअपने उत्तर में सुझाए अनुसार इवाल्ड जोड़ सकते हैं , या यदि आप जोड़ना नहीं चाहते हैं $window, तो बस एक टाइमआउट जोड़ें और यह काम करेगा!

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

— विग्नेश सुब्रमण्यन
स्रोत

2

मेरे द्वारा उपयोग किया जाने वाला सरल तरीका है

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

— raghavsood33
स्रोत

2

ऐसा करने का एक अच्छा तरीका $ State.go ('स्टेटेनम', {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
   }

})();

— gsalgadotoledo
स्रोत

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
स्रोत

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

}

मुझे आशा है कि आप इस उदाहरण को सहायक देखेंगे क्योंकि यह मेरे लिए अन्य उत्तरों के साथ था।

— नूर लाबिदी
स्रोत

0

का उपयोग करते हुए location.href="./index.html"

या बनाएँ scope $window

और का उपयोग कर $window.location.href="./index.html"

— शशांक रवींद्रन
स्रोत