javascript - كيفية الحصول على معلمات url باستخدام AngularJS




routeparams (3)

أعلم أن هذا سؤال قديم ، ولكن الأمر استغرق مني بعض الوقت لفرز هذا الأمر نظرًا إلى الوثائق الزاوية المتفرقة. الطريق RouteProvider و routeParams هو الطريق للذهاب. يوجه المسار عنوان URL إلى وحدة التحكم / العرض ويمكن تمرير المسار إلى وحدة التحكم.

تحقق من مشروع البذور الزاوي . ضمن app.js ستجد مثالاً لموفر المسار. لاستخدام المعلمات ببساطة إلحاقها بهذه الطريقة:

$routeProvider.when('/view1/:param1/:param2', {
    templateUrl: 'partials/partial1.html',    
    controller: 'MyCtrl1'
});

ثم في وحدة التحكم الخاصة بك حقن $ routeParams:

.controller('MyCtrl1', ['$scope','$routeParams', function($scope, $routeParams) {
  var param1 = $routeParams.param1;
  var param2 = $routeParams.param2;
  ...
}]);

كود مصدر HTML

<div ng-app="">
    <div ng-controller="test">
      <div ng-address-bar browser="html5"></div>
      <br><br>
      $location.url() = {{$location.url()}}<br>
      $location.search() = {{$location.search('keyword')}}<br>
      $location.hash() = {{$location.hash()}}<br>     
      keyword valus is={{loc}} and ={{loc1}}
  </div>
</div>

AngularJS شفرة المصدر

<script>
function test($scope, $location) {
  $scope.$location = $location;
  $scope.ur = $scope.$location.url('www.html.com/x.html?keyword=test#/x/u');
  $scope.loc1 = $scope.$location.search().keyword ;    
    if($location.url().indexOf('keyword') > -1){    
        $scope.loc= $location.url().split('=')[1];
        $scope.loc = $scope.loc.split("#")[0]        
    }
  }
 </script>

هنا ، loc1 كل من المتغيرين loc و loc1 كلاهما نتيجة لعنوان URL أعلاه. هل هذه هي الطريقة الصحيحة؟



على الرغم من أن التوجيه يمثل حلاً جيدًا لتحليل عناوين URL على مستوى التطبيق ، فقد ترغب في استخدام خدمة $location ذات المستوى المنخفض ، كما يتم إدخالها في الخدمة أو وحدة التحكم الخاصة بك:

var paramValue = $location.search().myParam; 

سيعمل بناء الجملة البسيط هذا على http://example.com/path?myParam=paramValue . ومع ذلك ، فقط إذا قمت بتكوين $locationProvider في وضع HTML 5 قبل:

$locationProvider.html5Mode(true);

وبخلاف ذلك ، يمكنك إلقاء نظرة على بنية http://example.com/#!/path?myParam=someValue "Hashbang" وهي أكثر تعقيدًا بعض الشيء ، ولكن الاستفادة من العمل على المتصفحات القديمة (غير متوافق مع HTML 5) حسنا.





routeparams