في هذا الفصل ، سنناقش كيفية إعداد مكتبة AngularJS لاستخدامها في تطوير تطبيقات الويب. سنقوم أيضًا بفحص بنية الدليل ومحتوياته.
عندما تفتح الرابط https://angularjs.org/ ، سترى أن هناك خياران لتنزيل مكتبة AngularJS:
GitHub Download - انقر فوق هذا الزر للانتقال إلى Github واحصل على أحدث البرامج النصية.
تنزيل - أو انقر فوق هذا الزر وسترى:
تعطي هذه الشاشة خيارات مختلفة لاستخدام زاوية JS على النحو التالي:
تنزيل ملفات المحلية
هناك خياران مختلفان: قديم وأحدث. الاسم نفسه هو التوسيع الذاتي. الإصدار القديم أقل بالفعل من الإصدار 1.2.x والأحدث هو الإصدار 1.3.x.
يمكننا أيضًا استخدام إصدارات مصغرة أو غير مضغوطة أو مضغوطة.
وصول CDN: يمكنك أيضًا استخدام CDN. سيتيح CDN الوصول إلى العالم ، وفي هذه الحالة تستضيف Google مراكز البيانات الإقليمية. هذا يعني استخدام CDN إلى مسؤولية مضيف الهاتف المحمول عن الملفات من خادمه الخاص إلى مجموعة من العوامل الخارجية. يوفر هذا أيضًا ميزة أنه إذا قام الزائر بتنزيل نسخة من AngularJS من نفس CDN ، فلا يجب إعادة تنزيلها.
استخدم مكتبة إصدار CDN في هذا البرنامج التعليمي.
مثال
الآن دعنا نكتب مثالًا بسيطًا باستخدام مكتبة AngularJS. قم بإنشاء ملف HTML myFirstExampe.html على النحو التالي:
<! doctype html> <html> <head> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"> </sprip ng-controller = "hellocontroller"> <h2> مرحبًا {{helloto.title}} لعالم yiibai! </h2> </viv> <script> Angular.Module ("myapp" ، []). $ scope.helloto.title = "AngularJS" ؛ </script> </body> </html>يصف الفصل التالي الرمز أعلاه بالتفصيل:
بما في ذلك AngularJS
قمنا بالفعل بتضمين صفحة HTML في ملف JavaScript من AngularJS ، حتى نتمكن من استخدام AngularJS:
<head> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"> </script> </head>
تحقق من أحدث إصدار من AngularJS على موقعها الرسمي.
أشر إلى تطبيق AngularJS
بعد ذلك ، دعنا نخبرني أن الجزء من HTML يحتوي على تطبيقات AngularJS. يمكن القيام بذلك عن طريق وضع سمة NG-APP في عنصر HTML في جذر تطبيق AngularJS. يمكن إضافته إلى عنصر HTML أو عنصر الجسم على النحو التالي:
<body ng-app = "myapp"> </body>
منظر
هذا الجزء من العرض:
<div ng-controller = "hellocontroller"> <h2> مرحبًا {{helloto.title}}يخبر NG-Controller AngularJS ما هي وحدات التحكم والآراء. يخبر Helloto.title AngularJS بكتابة قيمة "نموذج" HTML المسمى Helloto.title في هذا الموقف.
وحدة تحكم
جزء وحدة التحكم هو:
<script> Angular.module ("myapp" ، []) .Controller ("HelloconTroller" ، function ($ scope) {$ scope.helloto = {} ؛ $ scope.helloto.title = "angularjs" ؛}) ؛ </script>يسجل هذا الرمز أولاً وظيفة وحدة تحكم وحدة زاوية MyApp في HelloconTroller. سوف نتعلم المزيد عن الوحدات النمطية ووحدات التحكم في فصولهم. يتم تسجيل وظيفة وحدة التحكم في الزاوية عبر angular.module (...). وحدة التحكم (...) استدعاء وظيفة.
تم تمرير نموذج المعلمة SCOPE $ إلى وظيفة وحدة التحكم. تضيف وظيفة وحدة التحكم كائن JavaScript من Helloto ، والذي يحتوي على حقل عنوان إضافي إليه.
ينفذ
احفظ الرمز أعلاه مثل myfirstexample.htmlll افتحه في أي متصفح. سترى الإخراج التالي:
عندما يتم تحميل الصفحة في المتصفح ، يحدث الحدث التالي:
يتم تحميل مستندات HTML في المتصفح وتحسبها المتصفح. يتم تحميل ملف AngularJS JavaScript وإنشاء كائنات زاوية عالمية. بعد ذلك ، يتم تنفيذ وظيفة وحدة تحكم التسجيل في JavaScript.
يقوم AngularJS بمسح عبر HTML للعثور على تطبيقات AngularJS ووجهات النظر. بمجرد العثور على العرض ، يربط العرض بوظيفة وحدة التحكم المقابلة.
بعد ذلك ، ينفذ AngularJS وظيفة التحكم. ثم يجعل عرض البيانات مع نموذج وحدة التحكم المأهولة بالسكان. الصفحة جاهزة الآن.