التحكم بالتوجيه (Routing) في AngularJS

لإنشاء تطبيقات ذات صفحات متعددة دون إعادة تحميل الصفحة، يُستخدم التوجيه. AngularJS يتيح لك تغيير محتوى الصفحة ديناميكياً عبر موجهات تُعرف داخل الموديول.

يتم استدعاء مكتبة التوجيه من خلال إضافة ngRoute:

html
CopyEdit
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js">script>

ثم تضمينها في التطبيق:

javascript
CopyEdit
var app = angular.module('myApp', ['ngRoute']);

تحديد مسارات التوجيه:

javascript
CopyEdit
app.config(function($routeProvider) {
    $routeProvider
    .when("/home", {
        templateUrl : "home.html",
        controller : "homeCtrl"
    })
    .when("/about", {
        templateUrl : "about.html",
        controller : "aboutCtrl"
    })
    .otherwise({redirectTo: '/home'});
});

هذا يسمح للتطبيق بالتنقل بين الصفحات الداخلية دون إعادة تحميل كاملة.

الفلاتر (Filters) في AngularJS

الفلاتر تُستخدم لتعديل وتنسيق البيانات المعروضة، مثل تحويل النصوص إلى حروف كبيرة أو صغيرة، تنسيق التواريخ، أو ترتيب القوائم.

أمثلة على الفلاتر:

• uppercase لتحويل النص إلى حروف كبيرة.

• lowercase لتحويل النص إلى حروف صغيرة.

• date لتنسيق التواريخ.

• currency لعرض القيم المالية بشكل منسق.

مثال:

html
CopyEdit
<p>{{ birthday | date:"fullDate" }}p>

الخدمات (Services) في AngularJS

الخدمات هي مكونات تُستخدم لتجميع وظائف معينة يتم إعادة استخدامها في أجزاء مختلفة من التطبيق، مثل استدعاء بيانات من الخادم، تخزين بيانات مؤقتة، أو تنفيذ عمليات رياضية.

أنواع الخدمات الشائعة:

• $http: للتعامل مع طلبات HTTP لجلب أو إرسال البيانات.

• $timeout: لتنفيذ وظيفة بعد فترة زمنية محددة.

• $interval: لتنفيذ وظيفة متكررة بفاصل زمني.

مثال على استخدام $http لجلب بيانات من API:

javascript
CopyEdit
app.controller('myCtrl', function($scope, $http) {
    $http.get("https://api.example.com/data")
    .then(function(response) {
        $scope.data = response.data;
    });
});

المكونات المتقدمة في AngularJS

التوجيه المخصص (Custom Directives)

يمكن للمطورين إنشاء موجهاتهم الخاصة لتخصيص سلوك معين لعناصر HTML. هذا يعزز إعادة الاستخدام والتنظيم في الكود.

مثال:

javascript
CopyEdit
app.directive('myDirective', function() {
    return {
        template: '
هذا هو التوجيه الخاص بي
'
    };
});

الفلاتر المخصصة (Custom Filters)

تُمكن من إنشاء فلاتر جديدة لمعالجة البيانات بما يتناسب مع متطلبات التطبيق.

مثال:

javascript
CopyEdit
app.filter('reverse', function() {
    return function(input) {
        return input.split('').reverse().join('');
    };
});

الفوائد الأساسية لاستخدام AngularJS

• تبسيط التطوير: من خلال الربط الثنائي وتوجيه البيانات، يصبح الكود أبسط وأقل تكراراً.

• فصل المنطق عن العرض: يسهل صيانة وتطوير التطبيقات.

• دعم التوجيه الداخلي: يسمح بإنشاء تطبيقات متعددة الصفحات ذات تجربة مستخدم سلسة.

• مجتمع كبير ودعم قوي: بفضل دعم Google وشعبية AngularJS، تتوفر مكتبات وأدوات كثيرة.

• توافق مع RESTful APIs: يمكن استهلاك خدمات الويب بسهولة.

• مرونة عالية: من خلال الموجهات والخدمات والفلاتر المخصصة.

مقارنة سريعة بين AngularJS والإصدارات الحديثة (Angular 2+)

AngularJS هو الإصدار الأولي لإطار العمل Angular، ويختلف عن الإصدارات الحديثة التي تستخدم TypeScript وتأتي ببنية مختلفة. رغم ذلك، لا يزال AngularJS مستخدماً في كثير من المشاريع القديمة أو ذات البنية البسيطة.

الإصدارات الحديثة تقدم تحسينات كبيرة في الأداء والأمان وسهولة الصيانة، لكن AngularJS يظل مفضلاً في بعض الحالات لأسباب مثل بساطة التعلم والتطبيق السريع.

جدول يوضح الفرق بين AngularJS وAngular 2+

أفضل الممارسات عند استخدام AngularJS

• استخدام نمط الكود الموحد والالتزام بمعايير التسمية.

• تقسيم التطبيق إلى موديولات صغيرة لتسهيل الصيانة.

• الاستفادة من الخدمات لجعل الكود نظيفاً وقابل لإعادة الاستخدام.

• استخدام الموجهات بدلاً من التعامل المباشر مع DOM.

• تحسين الأداء عبر تقليل استخدام الفلاتر الثقيلة داخل حلقات ng-repeat.

• تحديث إلى الإصدارات الحديثة من Angular إذا أمكن لتحسين الأمان والأداء.

الخلاصة

AngularJS هو إطار عمل قوي ومرن لبناء تطبيقات الويب التفاعلية التي تعتمد على JavaScript. بفضل بنيته التي تعتمد على الربط الثنائي للبيانات، ونظام التوجيه، والموجهات، والخدمات، يوفر AngularJS بيئة مثالية لتطوير تطبيقات ويب حديثة ذات واجهات مستخدم ديناميكية. كما أنه يوفر أدوات قوية تسهل عملية التطوير والصيانة، مما يجعله خياراً مفضلاً لدى المطورين في بناء تطبيقات ويب متقدمة.

بالرغم من ظهور إصدارات أحدث من Angular، لا يزال AngularJS يحظى بشعبية كبيرة في العديد من المشاريع، ويستحق التعلم لمن يرغب في فهم أُسس بناء تطبيقات الويب الحديثة.

المصادر

• وثائق AngularJS الرسمية

• كتاب “AngularJS: Up and Running” تأليف Brad Green و Shyam Seshadri

هذا المقال يقدم نظرة عميقة ومفصلة حول أساسيات AngularJS، ويعد مرجعاً شاملاً للمطورين والمهتمين بفهم هذا الإطار والتعامل معه بكفاءة.