AngularJS এ ক্যোয়ারী প্যারামিটারগুলি পড়ার সর্বাধিক সংক্ষিপ্ত উপায় কী?

Question

আমি AngularJS ব্যবহার করে URL ক্যোয়ারী প্যারামিটারগুলির মানগুলি পড়তে চাই। আমি নিম্নলিখিত ইউআরএল দিয়ে এইচটিএমএল অ্যাক্সেস করছি:

http://127.0.0.1:8080/test.html?target=bob

যেমন প্রত্যাশিত, location.searchহয় "?target=bob"। টার্গেটের মানটি অ্যাক্সেস করার জন্য , আমি ওয়েবে তালিকাভুক্ত বিভিন্ন উদাহরণ পেয়েছি, তবে এগুলির মধ্যে কোনওটি অ্যাঙ্গুলারজেএস 1.0.0rc10 এ কাজ করে না। বিশেষত, নিম্নলিখিতটি সমস্ত undefined:

• $location.search.target
• $location.search['target']
• $location.search()['target']

কেউ কি জানেন কি কাজ করবে? (আমি $locationআমার নিয়ামকের পরামিতি হিসাবে ব্যবহার করছি )

---

হালনাগাদ:

আমি নীচে একটি সমাধান পোস্ট করেছি, তবে আমি এটির সাথে পুরোপুরি সন্তুষ্ট নই। বিকাশকারী গাইড: ডকুমেন্টেশন : কৌণিক পরিষেবাগুলি: Using অবস্থান ব্যবহার করে নিম্নলিখিত সম্পর্কে জানানো হয় $location:

আমি কখন $ অবস্থান ব্যবহার করব?

আপনার অ্যাপ্লিকেশনটি যে কোনও সময় বর্তমান ইউআরএল পরিবর্তনের জন্য প্রতিক্রিয়া জানাতে বা আপনি ব্রাউজারে বর্তমান ইউআরএল পরিবর্তন করতে চাইলে প্রয়োজন হয়।

আমার দৃশ্যের জন্য, আমার পৃষ্ঠাগুলি একটি ক্যোয়ারী প্যারামিটার সহ বাহ্যিক ওয়েবপৃষ্ঠা থেকে খোলা হবে, তাই আমি প্রতি সেউতে "বর্তমান ইউআরএল পরিবর্তনের প্রতিক্রিয়া করছি না"। সুতরাং সম্ভবত $locationকাজের সঠিক সরঞ্জাম নয় (কুরুচিপূর্ণ বিশদগুলির জন্য, নীচে আমার উত্তরটি দেখুন)। তাই আমি "প্রশ্নের সাথে অ্যাঙ্গুলারজেএসে কোয়েরি প্যারামিটারগুলি কীভাবে পড়ব?" থেকে এই প্রশ্নের শিরোনামটি পরিবর্তন করেছি? "অ্যাঙ্গুলারজেএস-এ কোয়েরি পরামিতিগুলি পড়ার সর্বাধিক সংক্ষিপ্ত উপায় কী?" স্পষ্টতই আমি পার্স করার জন্য জাভাস্ক্রিপ্ট এবং নিয়মিত প্রকাশটি ব্যবহার করতে পারি location.search, তবে এত মৌলিক কোনও কিছুর জন্য নিম্ন-স্তরের দিকে যাওয়া সত্যিই আমার প্রোগ্রামার সংবেদনশীলতাকে আপত্তিজনক।

সুতরাং: $locationআমি আমার উত্তরের চেয়ে আরও ভাল উপায় ব্যবহার করতে পারি, বা একটি সংক্ষিপ্ত বিকল্প আছে?

Comments

। লোকেশন.সার্ক () ['টার্গেট'] কাজ করা উচিত নয়?

— লুঠ করুন

এটি কাজ করে না, কারণ পথের পরে কোনও হ্যাশ নেই। http://127.0.0.1:8080/test.html#?target=bobকাজ করবে, #আগে লক্ষ্য করুন ?। $locationএটি একটি দ্বিতীয় স্তরের রাউটিং পদ্ধতি যা সার্ভারে প্রেরণ হয় না।

— ড্যানিয়েল এফ

@ ড্যানিয়েলএফ @ আরব, আপনি দুজনেই ঠিক আছেন। আধুনিক ব্রাউজারে ডাকা $location.search()['target']হওয়ার পরে কাজ করে $locationProvider.html5Mode(true)।

— ক্রিস্পি

Answer 1

আপনি আপনার নিয়ামকটিতে $ রুটপ্যারামগুলি ( এনজিআরট প্রয়োজন ) ইনজেকশন করতে পারেন । এখানে ডক্স থেকে একটি উদাহরণ দেওয়া হয়েছে:

// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}

সম্পাদনা: আপনি service অবস্থান পরিষেবা (উপলভ্য ng) বিশেষত এর searchপদ্ধতিতে কোয়েরি প্যারামিটারগুলিও পেতে এবং সেট করতে পারেন : $ অবস্থান.search () ।

ler রুটপ্যারামগুলি নিয়ামকের প্রাথমিক লোডের পরে কম দরকারী; $location.search()যে কোনও সময় বলা যেতে পারে।

Comments

পরামর্শ এবং লিঙ্কের জন্য ধন্যবাদ! আমি পৃষ্ঠাটি পড়েছি এবং একটি কাজের নমুনা সেট আপ করার চেষ্টাও করেছি। যাইহোক, পদ্ধতিরটি আমার পক্ষে কার্যকর হবে না, কারণ আমি সত্যিই এই ক্ষেত্রে রাউটিংটি ব্যবহার করতে চাই না। তবুও এটি একটি সহায়ক পরামর্শ ছিল এবং আমার পর্যাপ্ত স্ট্যাকওভারফ্লো প্রতিনিধিত্ব হলে আমি এটিটিকে উজ্জীবিত করব।

— এলিস হোয়াইটহেড

আমি বলব @ পকোজলোস্কি.ওপেনসোর্সের উত্তর এই পরিস্থিতিতে আরও নির্ভুল

— কল

বেশ নয় .. কোয়েরি প্যারামিটারগুলি route রুটপ্যারাম অবজেক্টে সাধারণ রুটের পরামিতিগুলির সাথে অন্তর্ভুক্ত রয়েছে। এবং আপনি সেগুলি পড়তে / সেগুলিকে $ অবস্থান.সন্ধান () সহ সেট করতে পারেন। আমি এটি উত্তরে যুক্ত করব।

— অ্যান্ড্রু জোসলিন

জাকুব ঠিক বলেছেন। তারা বিভিন্ন জিনিস। আপনি যখন কৌণিকতে "অনুসন্ধান" ব্যবহার করেন, এটি কোয়েরিটিকে হ্যাশের সাথে যুক্ত করে (URL এর শেষে)। ইউআরআই-এর জন্য আরএফসি স্পেসে বলা হয়েছে যে ক্যোয়ারী প্যারামগুলিতে হ্যাশটি পুনরায় সংশোধন করা উচিত (সংযোজন নয়)। সুতরাং "অনুসন্ধান" এমন একটি নির্মাণ যা কেবল কৌনিকটি বহির্মুখী এবং ব্যাখ্যা করে। এই কারণেই কেবলমাত্র এইচটিএমএল 5 মোড উপরের সমাধানের জন্য কাজ করবে, কারণ আপনি প্রকৃত ইউআরআই নির্বিশেষে আপনি সমস্ত অনুরোধকে একটি পৃষ্ঠায় (সার্ভার স্তরে) অর্পণ করছেন।

— স্টিভেন পেনা

আপনি কেবল কৌনিক জেএসে রুটটি ব্যবহার করতে চাইলে এটি কেবল কাজ করে!

— উইন্ডমায়াও

Answer 2

ভালো যে আপনি এটি এইচটিএমএল 5 মোডের সাথে কাজ করতে সক্ষম হয়েছেন তবে হ্যাশবাং মোডে এটি কাজ করাও সম্ভব।

আপনি কেবল ব্যবহার করতে পারেন:

$location.search().target

'টার্গেট' অনুসন্ধান প্যারামে অ্যাক্সেস পেতে।

রেফারেন্সের জন্য, এখানে কাজ করছে jsFood: http://web.archive.org/web/20130317065234/http://jsfiddle.net/PHnLb/7/

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

function MyCtrl($scope, $location) {

    $scope.location = $location;
    $scope.$watch('location.search()', function() {
        $scope.target = ($location.search()).target;
    }, true);

    $scope.changeTarget = function(name) {
        $location.search('target', name);
    }
}

<div ng-controller="MyCtrl">

    <a href="#!/test/?target=Bob">Bob</a>
    <a href="#!/test/?target=Paul">Paul</a>
    
    <hr/>    
    URL 'target' param getter: {{target}}<br>
    Full url: {{location.absUrl()}}
    <hr/>
    
    <button ng-click="changeTarget('Pawel')">target=Pawel</button>
    
</div>

Comments

আপনার কি around লোকেশন.সার্চ () এর আশেপাশে প্রথম বন্ধনীর দরকার?

— ম্যাগনে

@Magne: হ্যাঁ, আপনি প্রথম বন্ধনী প্রয়োজন, $ location.search একটি পদ্ধতি docs.angularjs.org/api/ng/service/$location

— নন্দী

ভুলে যাবেন না আপনি যদি ব্যবহার না করেন HTML5Mode(true)তবে # / এর পরে কেবল প্যারামগুলি পাওয়া যায় বা শুরুতে # / দিয়ে url এ যুক্ত হন।

— সেবাস্তিয়ান

@nandin: না, আপনি কি না প্রথম বন্ধনী প্রয়োজন প্রায় $location.search() । আমি নিশ্চিত নই কেন এই উত্তরটি তাদের সেখানে রেখে দিয়েছে।

— ড্যান তাও

@ নন্দীন "আপনার কি প্রথম বন্ধনী প্রয়োজন" প্রশ্নটি ভুল বুঝেছে বলে মনে হচ্ছে। আপনি কি অনুসন্ধানের পরে প্রথম বন্ধনী, কিন্তু না সম্পূর্ণতা প্রায় বেশী প্রয়োজন $location.search()।

— কে। কার্পেন্টার

Answer 3

আমার নিজের আংশিক উত্তর দেওয়ার জন্য, এইচটিএমএল 5 ব্রাউজারগুলির জন্য একটি কার্যকারী নমুনা রয়েছে:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
  <script>
    angular.module('myApp', [], function($locationProvider) {
      $locationProvider.html5Mode(true);
    });
    function QueryCntl($scope, $location) {
      $scope.target = $location.search()['target'];
    }
  </script>
</head>
<body ng-controller="QueryCntl">

Target: {{target}}<br/>

</body>
</html>

কীটি $locationProvider.html5Mode(true);উপরের মত কল করা ছিল । এটি এখন খোলার সময় কাজ করে http://127.0.0.1:8080/test.html?target=bob। এটি পুরানো ব্রাউজারগুলিতে কাজ করবে না সে সম্পর্কে আমি সন্তুষ্ট নই, তবে আমি এই পদ্ধতিকে যাইহোক ব্যবহার করতে পারি।

পুরানো ব্রাউজারগুলির সাথে কাজ করবে এমন একটি বিকল্প হ'ল html5mode(true)কলটি বাদ দেওয়া এবং পরিবর্তে হ্যাশ + স্ল্যাশ সহ নিম্নলিখিত ঠিকানাটি ব্যবহার করা:

http://127.0.0.1:8080/test.html#/?target=bob

প্রাসঙ্গিক ডকুমেন্টেশন বিকাশকারী গাইড: কৌণিক পরিষেবাগুলি: $ অবস্থান ব্যবহার করে (আমার গুগল অনুসন্ধান এটির সন্ধান পায় না আজব ...) at

Comments

এর জন্য ধন্যবাদ. আমি ক্যোয়ারী প্যারামগুলিতে পড়ার চেষ্টা করে আমার চুলগুলি টানছি। আপনি উপরে উল্লিখিত হিসাবে 'অপরিবর্তিত' রাখা হয়েছে। এইচটিএমএল 5 এ মোড সেট করার কাজ হয়েছে।

— sthomps

ng-controllerবৈশিষ্ট্যটি <body>সেট করা উচিত নয় MyApp?

— জাগো

এইচটিএমএল 5 মড ব্যবহার করার জন্য আপনাকে কৌনিক 1.3 দিয়ে শুরু করার মতো মনে হচ্ছে আপনারও হয় <base href="https://stackoverflow.com/" />ট্যাগ যুক্ত করতে হবে বা requireBase: falseএইচটিএমএল 5 মডে কলটিতে অন্য একটি প্যারামিটার হিসাবে যুক্ত করতে হবে। বিশদ এখানে

— dae721

Answer 4

এটি দুটি উপায়ে করা যেতে পারে:

1. ব্যবহার $routeParams

$routeParamsআপনার নিয়ামকটি ব্যবহার করা সর্বোত্তম এবং প্রস্তাবিত সমাধান । এটি ngRouteমডিউল ইনস্টল করা প্রয়োজন।

   function MyController($scope, $routeParams) {
      // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
      // Route: /Chapter/:chapterId/Section/:sectionId
      // $routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
      var search = $routeParams.search;
  }

2. ব্যবহার $location.search()।

এখানে একটি সতর্কতা আছে। এটি কেবল এইচটিএমএল 5 মোডের সাথে কাজ করবে। ডিফল্টরূপে, এটি ইউআরএলটির জন্য কাজ করে না যার এতে হ্যাশ ( #) নেইhttp://localhost/test?param1=abc&param2=def

আপনি এটি #/URL এ যুক্ত করে কাজ করতে পারেন workhttp://localhost/test#/?param1=abc&param2=def

$location.search() যেমন একটি বস্তু ফিরে:

{
  param1: 'abc',
  param2: 'def'
}

Comments

আপনার পরামর্শের জন্য ধন্যবাদ # /

— yonexbat

Answer 5

। অবস্থান.search () কেবলমাত্র HTML5 মোড চালু এবং শুধুমাত্র সমর্থনকারী ব্রাউজারে কাজ করবে।

এটি সর্বদা কাজ করবে:

$ window.location.search

Answer 6

শুধু সংক্ষেপে।

যদি আপনার অ্যাপ্লিকেশনটি বাহ্যিক লিঙ্কগুলি থেকে বোঝা হচ্ছে তবে কৌনিকটি এটি কোনও ইউআরএল পরিবর্তন হিসাবে সনাক্ত করতে পারে যাতে action loaction.search () আপনাকে একটি খালি বস্তু দেয়। এটি সমাধানের জন্য আপনাকে নিজের অ্যাপ্লিকেশন কনফিগারেশনে (app.js) এ নিম্নলিখিত সেট করতে হবে

.config(['$routeProvider', '$locationProvider', function ($routeProvider,     $locationProvider) 
{
   $routeProvider
      .when('/', {
         templateUrl: 'views/main.html',
         controller: 'MainCtrl'
      })
      .otherwise({
         redirectTo: '/'
      });

      $locationProvider.html5Mode(true);
 }]);

Comments

হাঁ। এটি খুঁজে বেদনা ছিল। মন্তব্যের জন্য ধন্যবাদ.

— মাইকবার্গ

Answer 7

এলিস হোয়াইটহেডের উত্তরের যথার্থতা। ট্যাগের $locationProvider.html5Mode(true);সাথে অ্যাপ্লিকেশনটির জন্য বেস URL টি নির্দিষ্ট না করে <base href="">বা প্যারামিটারটি নির্ধারণ না করে Angularjs এর নতুন সংস্করণে কাজ করবে নাrequireBase করারfalse

ডক থেকে :

আপনি যদি html5Mode (ইতিহাস.pushState) ব্যবহার করার জন্য $ অবস্থানটি কনফিগার করেন তবে আপনার প্রয়োজনের ভিত্তিতে একটি সংজ্ঞা বস্তুটি পাস করে কোনও বেস ট্যাগের প্রয়োজন নেই এমন ট্যাগের সাথে অ্যাপ্লিকেশনটির জন্য বেস URL টি নির্দিষ্ট করতে হবে বা $ অবস্থানপ্রসাদটি প্রস্তুত করতে হবে: মিথ্যা থেকে P লোকেশনপ্রভাইডার। html5Mode ():

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

Answer 8

আপনি $ অবস্থান। use অনুসন্ধান.আপনারপ্রেমিটারও ব্যবহার করতে পারেন

Comments

$$searchএকটি অভ্যন্তরীণ পরিবর্তনশীল, যা ব্যবহার যেমন একটি ভাল ধারণা নয়।

— কুমারহর্স

Answer 9

এটি আপনাকে সাহায্য করতে পারে

AngularJS এ ক্যোয়ারী প্যারামিটারগুলি পড়ার সর্বাধিক সংক্ষিপ্ত উপায় What's

// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:1, sectionId:2, search:'moby'}

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
  <script>
    angular.module('myApp', [], function($locationProvider) {
      $locationProvider.html5Mode(true);
    });
    function QueryCntl($scope, $location) {
      $scope.target = $location.search()['target'];
    }
  </script>
</head>
<body ng-controller="QueryCntl">

Target: {{target}}<br/>

</body>
</html>

($location.search()).target

Answer 10

আমি দেখতে পেয়েছি যে একটি এসপিএ এইচটিএমএল 5 মডেলের জন্য প্রচুর 404 ত্রুটি সমস্যা দেখা দেয় এবং এই ক্ষেত্রে $ লোকেশন.সন্ধান কাজ করা প্রয়োজন হয় না। আমার ক্ষেত্রে আমি যখন কোনও ব্যবহারকারী আমার সাইটে উপস্থিত হয় তখন একটি URL কোয়েরি স্ট্রিং প্যারামিটার ক্যাপচার করতে চাই, তারা প্রথমে কোন "পৃষ্ঠা" এর সাথে লিঙ্ক করে, এবং লগইন করার পরে তাদের সেই পৃষ্ঠায় প্রেরণ করতে সক্ষম হতে পারে, তাই আমি কেবল সমস্ত ক্যাপচার করি app.run এ জিনিস

$rootScope.$on('$stateChangeStart', function (e, toState, toParams, fromState, fromParams) {
    if (fromState.name === "") {
        e.preventDefault();
        $rootScope.initialPage = toState.name;
        $rootScope.initialParams = toParams;
        return;
    }
    if ($location.search().hasOwnProperty('role')) {
        $rootScope.roleParameter = $location.search()['role'];
    }
    ...
}

তারপরে লগইন করার পরে পরে আমি বলতে পারি $ state.go ($ rootScope.initialPage, $ rootScope.initialParams)

Answer 11

কিছুটা দেরি হয়ে গেছে তবে আমি মনে করি আপনার সমস্যাটি আপনার URL ছিল। পরিবর্তে যদি

http://127.0.0.1:8080/test.html?target=bob

তোমার ছিল

http://127.0.0.1:8080/test.html#/?target=bob

আমি নিশ্চিত যে এটি কাজ করবে। কৌনিকটি তার # / সম্পর্কে সত্যই পিক

Comments

এটি কেবলমাত্র যদি আপনি এইচটিএমএল 5 মোড সক্ষম না করে থাকেন। # / সর্বদা কৌণিক url- তে থাকে না।

— লোকালপিসিগুয়ে

এটি যদি আপনি একটি এসপিএ তৈরি করে থাকেন। আমার সমস্ত url গুলিতে একটি # আছে। এবং এইচটিএমএল 5 মডেলের অর্থ 1) পৃষ্ঠা রিফ্রেশে 404 এবং 2) সরাসরি ইউআরএলগুলি কাজ করবে না। দাম দেওয়ার মতো মনে হয় price

— নিউমান্ডার