العنصر templateUrl
 

العنصر templateUrl
لنقم الآن بتحليل تطبيقنا البسيط إلى مكوناته الأولية. كما قمنا سابقًا مع التوجيهات بجعل شيفراتنا البرمجية أكثر قابلية للإدارة عن طريق استخراج قوالبنا (حتى الصغيرة منها) إلى ملفاتٍ مستقلة، فسيكون علينا للقيام بذلك فقط استبدال العناصر template في إعداداتنا بالعناصر templateUrl.

angular.module('app')
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'LocationController',
templateUrl: '/views/index.html'
})
.when('/about', {
controller: 'LocationController',
templateUrl: '/views/about.html'
});
});
دون تغييرٍ على صفحة About التي سنضعها في مجلد views.

<div class="well well-sm" ng-bind="location"></div>
<a href="/">Home</a>
<h4>About</h4>
سنتكلّم في الفقرات التالية عن فكرة التعامل مع روابط URL غير الصالحة، لذا لنقم بإضافة واحدٍ منها الآن.

<div class="well well-sm" ng-bind="location"></div>
<a href="/about">About</a> |
<a href="/bad-path">Bad path</a>
<h4>Home</h4>
جرّب النقر على Bad path في المثال السابق، ستنتهي التّسلية للأسف، وستضطر لإعادة إنعاش الصفحة لاستعادتها.

التابع otherwise
ما الذي يمكننا فعله لتجنب النهايات الحزينة كما حدث قبل قليل؟ قد يكون أحد الإجابات هو تجنب تقديم روابط غير صالحة، ولكن في التطبيقات الحقيقيّة لا يمكننا إيقاف المستخدم عن الكتابة في شريط التنقل. يُمكننا أن نُعِدّ المُخدّم ليقوم بإعادة توجيهٍ للروابط غير الصالحة إلى رابط الجذر لتطبيق Angular، ولكن هذا يعني إعادة تحميل الصفحة من جديد، مما يعني إعادة تشغيل التطبيق من البداية. كيف يُمكننا بناء تطبيقٍ من طرف المستخدم ليقوم بإعادة توجيهٍ للروابط غير الصالحة؟

لو افترضنا بأننا نريد أن نُعلم المستخدم بأن الرابط غير صالح قبل أن نقوم بإعادة التوجيه، فالأمر الأول الذي نحتاجه هو الواجهة التي ستظهر لأي رابط غير صالح. سنسُمّي هذا القالب 404 ليتناسب مع معناه، وطبعًا يمكنك تسميته بأي اسمٍ آخر.

<div class="well well-sm" ng-bind="location"></div>
<a href="/">Home</a>
<h4 class="text-danger">404 - Not Found</h4>
كلّ ما نحتاجه الآن هو عبارة when أخرى لإضافة المسار 404/. ثم لربط أي رابط غير متوافق مع الروابط الموجودة بالمسار 404/، وسنقوم بذلك بإضافة استدعاءٍ للتابع otherwise الذي يقوم بإضافة المسار إلى العنصر redirectTo فيه. في المثال التالي، سيتم تشغيل الاستدعاء للتابع config إضافةً إلى كل الإعدادات السابقة. (يُمكنك تسجيل عددٍ غير محدودٍ من الاستدعاءات الخلفية (callbacks) للتابع config في المزوِّد (provider))

angular.module('app')
.config(function($routeProvider) {
$routeProvider
.when('/404', {
controller: 'LocationController',
templateUrl: '/views/404.html'

})
.otherwise({
redirectTo: '/404'
});
});
جّرب النقر الآن على Bad path. صحيحٌ أنّ بيئة الأمثلة لا تسمح لك بإدخال مسارٍ عشوائيّ في شريط التصفح، إلّا أنّه يمكنك تعديل "href="/bad-path في القالب السابق إلى أيّ قيمة تريدها لترى كيف سيتم التعامل معها. ربما يجب عليك دومًا إضافة معالجٍ (handler) ليتعامل مع كل الاحتمالات الباقية في إعدادات التوجيه الخاصة بك.

الأحداث (Events)
تُقدّم Angular تطبيقًا للرسائل من نمط (publish-subscribe) لأحداث التطبيق، وهي تعتمد على ثلاث توابع: emit$ وbroadcast$ وon$، حيث يقوم التابع emit$ و broadcast$ بتفعيل نشر أحداثٍ مخصصة، أما التابع on$ فيقوم بتسجيل معالجات (handlers) للأحداث التي تقوم بنشرها الوحدة ngRoute. فمثلًا، عندما يتمّ تغيير المسار بنجاح سينتج عن ذلك نشر الأحداث التالية:

routeChangeStart$
locationChangeStart$
locationChangeSuccess$
routeChangeSuccess$
هذه الأحداث مرتبةٌ في القائمة بنفس ترتيب ظهورها أثناء دورة حياة عملية تغيير المسار، لنقُم بإثبات ذلك.

تسجيل معالج للحدث (event handler)
لنستخدم التابع on$ لتسجيل معالجٍ بسيط لأحداث المسار، حيث سيقوم هذا المعالج بجمع أسماء الأحداث في مصفوفة، ثم سنقوم لاحقًا بطباعة أسماء الأحداث في الصفحة بنفس الترتيب الذي حُفظت به.

angular.module('app')
.value('eventsLog', [])
.factory('logEvent', function(eventsLog) {
return function(event) {
eventsLog.push(event.name);
};
});
في هذا المثال، سنقوم بتسجيل الأحداث أثناء انتقالنا من مسار الجذر (والمسؤول عنه هو المتحكم HomeController) إلى المسار events/ (والمسؤول عنه المتحكم EventsController). سنقوم أيضًا بجعل المتحكّم يضيف اسمه إلى القائمة أيضًا لنعرف وقت استدعاء هذا المتحكم.

angular.module('app')
.controller('HomeController', function($scope, $location, $rootScope, eventsLog, logEvent) {
$scope.location = $location.absUrl();
$scope.link = {path: '/events', title: 'Events'};
eventsLog.push("HomeController: " + $location.path());

$rootScope.$on('$routeChangeStart', logEvent);
$rootScope.$on('$locationChangeStart', logEvent);
$rootScope.$on('$locationChangeSuccess', logEvent);
$rootScope.$on('$routeChangeSuccess', logEvent);

$scope.eventsLog = eventsLog;
});
يقوم المتحكم EventsController بإضافة اسمه إلى المصفوفة eventsLog ثم يقوم بكشف (expose) السجل للمجال بحيث يمكننا رؤيته في الصفحة.

angular.module('app')
.controller('EventsController', function($scope, eventsLog, $location) {
$scope.location = $location.absUrl();
$scope.link = {path: '/', title: 'Home'};

eventsLog.push("EventsController: " + $location.path());
$scope.eventsLog = eventsLog;
});
نفس الواجهة ستعمل في كلا المتحكّمين. وسيتم عرض شريط انتقالٍ متغيّر إضافةً إلى محتويات السجل باستخدام التوجيه ng-repeat.

<div class="well well-sm" ng-bind="location"></div>
<a ng-href="{{link.path}}">{{link.title}}</a>
<ol>
<li ng-repeat="event in eventsLog track by $index">
{{event}}
</li>
</ol>
كملاحظةٍ جانبية، يُعدّ المرشح json المبني في Angular مفيدًا في التنقيح وإنشاء السجلات، فإن أردنا رؤية ما هو أكثر من اسم الحدث، فيُمكننا استخدامه لعرض كامل المحتويات لكائن الحدث.

سيكون علينا لإتمام المثال أن نكتب إعداداتٍ مباشرةً للمسارين.

angular.module('app')
.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: '/views/events/index.html'
})
.when('/events', {
controller: 'EventsController',
templateUrl: '/views/events/index.html'
});
});