منتديات رحيل لكل العرب

منتديات رحيل لكل العرب (https://r7il.com/vb/)
-   قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress (https://r7il.com/vb/f20/)
-   -   استخدام البادئة الخاصّة لتعريف متغيّراتٍ ذات أسماءٍ متغيرّه الخاصة بنا (https://r7il.com/vb/t1539/)

مهرة النجدية 01-03-2019 10:39 AM

استخدام البادئة الخاصّة لتعريف متغيّراتٍ ذات أسماءٍ متغيرّه الخاصة بنا
 
يُمكنك أن ترى في شريط الموضع في المثال السابق، فالمجموعة items يتم عرضها في المسار items/. ومهما كان عدد المرات التي تنقر بها على الرابط Home، فلن تتمكن من الانتقال إلى المسار الجذر / وسيتم دومًا إعادة توجيهك إلى المسار items/. هذا استخدامٌ بسيط للخيار redirectTo. إن كنت تريد تطبيق بعض العمليات على إعادة التوجيه، فيُمكنك توفير تابعٍ بدلًا من مسارٍ نصّيّ.

التابع search
كما ناقشنا في بداية هذا الفصل، تقدّم روابط URL النصّية تمثيلًا لحالة التطبيق (مثل عملية ترشيحٍ للموارد) يُمكن أن يتم حفظها ومشاركتها بسهولة. كيف يُمكننا معالجة نصّ طلب (query) يطلب فقط الحصول على العناصر التي تكون قيمة العنصر color فيها هو لونًا معيّنًا؟

angular.module('app')
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'LocationController',
template: '<div class="well well-sm" ng-bind="location"></div>\
<a ng-href="/items?color=red">Red items</a>'
})
.when('/items', {
controller: 'ItemsController',
templateUrl: '/views/items/index.html'
});
});
في هذا المثال، تحتوي واجهة مسار الجذر الخاص بالتطبيق على رابط التّنقّل الحاوي على نصّ الطلب color=red. يُمكننا جلب قيمة هذا الوسيط بسهولةٍ باستخدام التابع search للخدمة location$.

angular.module('app')
.controller('ItemsController', function($scope, $location, Item) {
$scope.location = $location.absUrl();
$scope.items = Item.query({color: $location.search().color});
});
عند النّقر على الرابط Red items في المثال السابق، سترى كيف استخدم التابع query (الذي قُمنا بتعريفه سابقًا في الخدمة items) المُرشّح filter للقيام بعملية جلبٍ حسب المثال.

الخدمة routeParams$
يعتمد أسلوب REST نموذجيًّا على إلحاق معرّف المورد الفريد في نهاية المسار بدلًا من وضعه في نصّ الطلب. كيف يُمكننا القيام بمعالجةٍ صحيحة للمسار بحيث يحوي المعرّف الفريد؟ أو بعبارةٍ أدقّ، كيف يُمكننا استخراج المعرّف الفريد 3 من المسار items/3/ على سبيل المثال؟

لنقم بتحديث واجهة المجموعة لتتضمّن هذا الأسلوب من رابط التّنقّل لكلّ مورد مفرد على حدة.

<div class="well well-sm" ng-bind="location"></div>
<p class="lead">Items</p>
<ol>
<li ng-repeat="item in items">
<a ng-href="/items/{{item.id}}">
{{item.name}}
</a>
</li>
</ol>
تُقدّم الخدمة routeParams$ وصولًا ملائمًا للعناصر في المسار، حيث يقوم بكشفها (expose) كعناصر مُسمّاة. يُمثّل القسم الأخير من المسار المعرّف الفريد لموردٍ وحيد يتبع أسلوب REST. فمثلًا، يجب أن يعيد المسار items/3/ تمثيلًا للمورد Item بالمعرّف الفريد 3.

في إعدادات التوجي استخدام البادئة الخاصّة : لتعريف متغيّراتٍ ذات أسماءٍ متغيرّه الخاصة بنا، يُمكنناة قابلةٍ للاستخراج من المسار. تمّ الاتّفاق على تسمية الوسيط المعرّف للمورد بالاسم id:، لذا سيكون نصّ المسار هو items/:id/.

angular.module('app')
.config(function($routeProvider) {
$routeProvider
.when('/', {
redirectTo: '/items'
})
.when('/items', {
controller: 'ItemsController',
templateUrl: '/views/items/linked-index.html'
})
.when('/items/:id', {
controller: 'ItemController',
templateUrl: '/views/items/show.html'
});
});
تقوم الوحدة بوضع الوسطاء المستخرجة من المسار في الخدمة routeParams$ التي يجب أن نقوم بحقنها في المتحكّم ItemController جنبًا إلى جنبٍ مع الخدمة Item التي أنشأناها.

angular.module('app')
.controller('ItemController', function($scope, $location, Item, $routeParams) {
$scope.location = $location.absUrl();
$scope.item = Item.get({id: $routeParams.id});
});


الساعة الآن 03:22 AM

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO ©2010, Crawlability, Inc. TranZ By Almuhajir

Security team