قبل الحديث عن وحدة AngularJS ، دعنا أولاً نقدم بعض نقاط المعرفة من الزاوي:
AngularJS هي تقنية عميل نقي ، مكتوبة بالكامل في JavaScript. ويستخدم التقنيات التقليدية لتطوير الويب (HTML ، CSS ، JavaScript) لجعل تطوير تطبيقات الويب أسهل وأسهل.
يقوم AngularJS بتبسيط تطوير التطبيق هو حزم بعض عمليات التطوير المنخفضة المستوى المشتركة لتزويدها بالمطورين. سوف AngularJS تعامل تلقائيا هذه العمليات منخفضة المستوى. تشمل:
1. العملية
2. إعداد الاستماع للأحداث
3. التحقق من الإدخال ، نظرًا لأن AngularJS سوف يتعامل مع معظم هذه العمليات ، يمكن للمطورين التركيز أكثر على منطق أعمال التطبيق وكتابة كود أقل تكرارًا ومعرضًا للخطأ.
على الرغم من أن AngularJS تبسيط التطور ، إلا أنه يجلب أيضًا بعض التقنيات الرائعة للعميل ، بما في ذلك:
1. الفصل بين البيانات ومنطق الأعمال والآراء
2. الربط التلقائي للبيانات والطرق
3. الخدمات العامة
4. حقن التبعية (يستخدم بشكل رئيسي لخدمات التجميع)
5. مترجم HTML القابل للتمديد (كتبه تمامًا بواسطة JavaScript)
6. من السهل الاختبار
7. لقد كان طلب العميل على هذه التقنيات موجودًا بالفعل لفترة طويلة.
في الوقت نفسه ، يمكنك أيضًا استخدام AngularJS لتطوير تطبيقات من صفحة واحدة أو متعددة الصفحات ، ولكن يتم استخدامها بشكل أساسي لتطوير تطبيقات صفحة واحدة. يدعم AngularJS عمليات تاريخ المتصفح ، وأزرار الأمام والخلفية ، والعمليات المفضلة في التطبيقات ذات الصفحات الواحدة.
بعد ذلك ، دعنا نوضح بالتفصيل وحدة AngularJs.
تحتوي معظم التطبيقات على طريقة رئيسية لتشكيل التطبيقات وتنظيمها وإطلاقها. لا تحتوي تطبيقات AngularJS على طريقة رئيسية ، ولكن استخدام الوحدات النمطية لإعلان كيفية بدء التطبيق. هذه الطريقة لها المزايا التالية:
1. عملية بدء التشغيل تعريفية ، لذلك من الأسهل فهمها.
2. في اختبار الوحدة ، ليست هناك حاجة لتحميل جميع الوحدات ، لذلك تساعد هذه الطريقة في كتابة اختبارات الوحدة.
3. يمكن إضافة وحدات إضافية إلى الاختبارات في مواقف محددة. يمكن لهذه الوحدات تغيير التكوينات ويمكن أن تساعد في الاختبار الشامل.
4. يمكن تعبئة رمز الطرف الثالث في وحدات قابلة لإعادة الاستخدام.
5. يمكن تحميل الوحدات النمطية بأي ترتيب للتسلسل أو التوازي (لأن تنفيذ الوحدة نفسها قد تأخر).
على سبيل المثال:
<! doctype html> <html ng-app = "myapp"> <head> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </script> var myappmodule = nbular.module ('myapp' ، []) ؛ // تكوين الوحدة النمطية. // في هذا المثال ، سنقوم بإنشاء مرشح تحية myappmodule.filter ('Greet' ، function () {return function (name) {return 'hello ،' + name + '! ؛} ؛}) ؛ </script> </head> <body> <viv> {{'World' | تحية}} </div> </body> </html>في المثال أعلاه ، نستخدم وحدة MyApp لبدء التطبيق من خلال تحديده في <html ng-app = "myapp">.
المثال أعلاه بسيط للغاية في الكتابة ، لكنه غير مناسب لكتابة التطبيقات الكبيرة بنفس الطريقة. توصيتنا هي تقسيم التطبيق الخاص بك إلى الوحدات النمطية التالية:
1. وحدة خدمة تستخدم لإيصال إعلانات الخدمة.
2. وحدة تعليمات تستخدم لإيصال تعليمات.
3. وحدة مرشح تستخدم لإصدار إعلانات المرشح.
4. وحدة مستوى التطبيق التي تعتمد على الوحدات أعلاه ، والتي تحتوي على رمز التهيئة.
على سبيل المثال:
<! doctype html> <html ng-app = "xmpl"> <head> <script src = "http://code.angularjs.org/angular-1.0.2.min.js"> </cript> <script src = ng-controller = "xmplcontroller"> {{Greeting}}! </viv> </body> </html> [/code] script.js: [code] Angular.Module ('xmpl.service' ، []). // قيمة وحدة الخدمة ('Greeter' ، {// Salting Custom Greeter Object: 'Hello' ، الترجمة: function (الترجمة) {this.saltarty.salization.saltarty ؛} ، Greet: function (name) {return this.saltarty + '' + '!' ؛}}). value ('user' ، {// custom user object load: function (name) {this.name = name ؛}}) ؛ angular.module ('xmpl.dircive' ، []) ؛ // وحدة التعليمات Angular.Module ('xmpl.filter' ، []) ؛ // وحدة التصفية Angular.Module ('xmpl' ، ['xmpl.service' ، 'xmpl.directive' ، 'xmpl.filter']). // الوحدة النمطية يعتمد XMPL على تشغيل الوحدة النمطية (وظيفة (تحية ، مستخدم) في الصفيف {// تهيئة الكود. عندما يبدأ التطبيق ، تحية. Greeter.greet (user.name) ؛}سبب هذا الانقسام هو أنك تحتاج غالبًا إلى تجاهل رمز التهيئة في الاختبارات الخاصة بك ، لأن هذه الرموز أكثر صعوبة في الاختبار. عن طريق تقسيمه ، يمكن تجاهله بسهولة في الاختبار. يمكن أن يكون الاختبار أيضًا أكثر تحديداً عن طريق تحميل الوحدات النمطية المتعلقة بالاختبار الحالي فقط. ما سبق هو مجرد اقتراح ، يمكنك أن تطمئن إلى ضبطه وفقًا لموقفك المحدد.
الوحدة النمطية عبارة عن مجموعة من سلسلة من التكوينات وكتل التعليمات البرمجية المرفقة بالتطبيق في مرحلة بدء التشغيل. تتكون وحدة أبسط من مجموعتين من كتل التعليمات البرمجية:
كتلة رمز التكوين - تنفيذ خلال مرحلة حقن وتكوين مزود الحقن. يمكن حقن مزود الحقن والثوابت فقط في كتلة التكوين. هذا لمنع تهيئة الخدمة مقدمًا قبل تكوينها.
تشغيل رمز التشغيل - تنفيذ بعد إنشاء الحاقن واستخدامه لبدء التطبيق. يمكن حقن الحالات والثوابت فقط في كتلة التشغيل. هذا هو منع تكوين النظام من الحدوث بعد العملية.
تنفيذ الكود:
angular.module ('mymodule' ، []). config (function (enjectables) {// provider injector code block // هذا مثال على كتلة التكوين. // يمكنك الحصول على أكبر عدد من هذه الأشياء. Run (function (enjectables) {// confer code code code // هذا مثال على كتلة التشغيل. // يمكنك الحصول على أكبر عدد من هذه الأشياء.تحتوي الوحدات أيضًا على بعض الطرق السهلة لتكوينها ، واستخدامها يعادل استخدام كتل التعليمات البرمجية. على سبيل المثال:
angular.module ('mymodule' ، []). القيمة ('a' ، 123). المصنع ('a' ، function () {return 123 ؛}). التوجيه ('Direcivename' ، ...). Filter ('filtername' ، ...) ؛ // هو نفسه asangular.module ('mymodule' ، []). config (function ($ proved ، $ compileProvider ، $ filterProvider) {$ provel.value ('a' ، 123) $ suver.factory ('a' ، function () {return 123 ؛}) $ compileprovider.directive ('direcivename' ، ...). $ filterpidider.register ('filtername' ، ...) ؛سيتم تطبيق كتل التكوين بترتيب التسجيل في توفير $ ، و $ compileprovider ، و $ filterprovider ، و $ filterprovider. الاستثناء الوحيد هو تعريف الثوابت ، والذي يجب وضعه دائمًا في بداية كتلة التكوين.
تشغيل الكتل هي الأكثر تشبه الطريقة الرئيسية في AngularJS. كتلة التشغيل عبارة عن قطعة رمز تستخدم لبدء التطبيق. يتم تنفيذها بعد تكوين جميع الخدمات وإنشاء جميع الحقن. عادةً ما تحتوي الكتل على بعض التعليمات البرمجية التي يصعب اختبارها ، لذلك يجب كتابتها في وحدات منفصلة بحيث يمكن تجاهلها أثناء اختبار الوحدة.
يمكن للوحدة أن تدرج الوحدات الأخرى كتبعيات لها. "تعتمد على وحدة معينة" تعني أنه يجب تحميل الوحدة التابعة قبل الوحدة النمطية. بمعنى آخر ، سيتم تنفيذ كتلة التكوين للوحدة التابعة قبل كتلة التكوين في هذه الوحدة. الشيء نفسه ينطبق على تشغيل الكتل. لا يمكن تحميل أي وحدة إلا مرة واحدة ، حتى لو كانت تعتمد على وحدات متعددة.
الوحدة النمطية هي طريقة تستخدم لإدارة تكوين $ enjector وليس لها أي علاقة بتحميل البرنامج النصي. هناك العديد من المكتبات لتحميل وحدات التحكم على الإنترنت ، والتي يمكن استخدامها مع AngularJs. لأن الوحدات النمطية لا تفعل شيئًا أثناء التحميل ، يمكن تحميلها بأي ترتيب أو بالتوازي