مكتبة MVC لـ AngularJS مقدمة إلى AngularJS

إعداد بيئة AngularJS

هذا الفصل يشرح كيفية إعداد مكتبة AngularJS لتنمية تطبيقات الويب. كما يقدم أيضًا وصفًا مختصرًا للتركيب و محتوياته.

عند فتح رابط https://angularjs.org/، سترى خيارين لتحميل مكتبة AngularJS

عرض على GitHub − اضغط على هذا الزر، ستنتقل إلى GitHub وستحصل على جميع السكربتات الأحدث.
تحميل AngularJS 1 − اضغط على هذا الزر، سترى شاشة تظهر

يقدم هذا الشاشة خيارات متنوعة لاستخدام Angular JS

تحميل وتخزين الملفات محليًا

هناك خياران مختلفان: "قديم" و "أحدث". اسمه واضح. الإصدار القديم أقل من 1.2.x، بينما الإصدار الأحدث هو 1.7.x.
يمكننا أيضًا استخدام إصدارات مصغرة، غير مصغرة أو مصغرة.

وصول CDN− يمكنك أيضًا زيارة CDN. CDN يتيح لك الوصول إلى مراكز البيانات الإقليمية. في هذه الحالة، يتم إدارة CDN بواسطة Google. يتحمل CDN مسؤولية التخزين من خلال خادمك الخاص وينقلها إلى سلسلة من الخوادم الخارجية. إنه يوفر أيضًا ميزة، إذا كان زوار صفحاتك قد قاموا بتحميل نسخة من AngularJS من نفس CDN، فإنه لا يتطلب إعادة التحميل.

في هذا الدرس، كنا نستخدم إصدار CDN من المكتبة.

مثال عبر الإنترنت

الآن، دعونا نكتب مثالاً بيانياً باستخدام مكتبة AngularJS. دعونا ننشئ ملف HTMLmyfirstexample.html، كما يلي -

مثال

<!doctype html>
<html>
　　　<head>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.5.2/angular.min.js"></script>
　　　</head>
　　　
　　　<body ng-app="myapp">
　　　　　　<div ng-controller="HelloController">
　　　　　　　　　<h2>Welcome {{helloTo.title}} to the world of w3codebox!</h2>
　　　　　　</div>
　　　　　　
　　　　　　<script>
　　　　　　　　　angular.module("myapp", [])
　　　　　　　　　
　　　　　　　　　.controller("HelloController", function($scope) {
　　　　　　　　　　　　$scope.helloTo = {};
　　　　　　　　　　　　$scope.helloTo.title = "AngularJS";
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>

اختبار لرؤية </>",

دعونا نقرأ الكود أعلاه بشكل دقيق-

تضمين AngularJS

نحن نضيف ملف JavaScript لـ AngularJS في صفحة HTML، حتى نتمكن من استخدامها-

<head>
　　　<script src="https://cdn.staticfile.org/angular.js/1.4.8/angular.min.js"></script>
　　　</script>
</head>

يمكنك مشاهدة الإصدار الأحدث من AngularJS على موقعها الرسمي.

يؤشر إلى تطبيق AngularJS

في هذا الجزء من HTML يحتوي على تطبيق AngularJS. يمكنك القيام بذلك عن طريق إضافة خاصية ng-app إلى عنصر HTML الجذر للتطبيق AngularJS. يمكنك إضافتها إلى عنصر html أو عنصر body، كما هو موضح أدناه-

<body ng-app="myapp">
</body>

النموذج

النموذج هو هذا الجزء-

<div ng-controller="HelloController">
　　　<h2>Welcome {{helloTo.title}} to the world of w3codebox!</h2>
</div>

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في مكون التحكم من نوع angle module تم تسجيل الدالة الوظيفية المسماة HelloController. سنقوم بدراسة مفصل للجزء والمكون في الفصول المختلفة. يتم تسجيل دالة التحكم من خلال استدعاء angle.module (...)، وظيفة controller (...) لتسجيل angle.

$scope يُنقل نموذجًا إلى دالة المحكم. تقوم دالة المحكم بإضافة object helloTo، وتضيف حقل عنوان في هذا العنصر.

تنفيذ

احفظ الكود أعلاه باسمmyfirstexample.html، وفي أي متصفحفيسيفتح. ستشاهد الخروج التالي -

مرحبًا AngularJS بالعالم من w3codebox!

ماذا يحدث عند تحميل الصفحة في المتصفح؟ دعونا نرى -

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