تطبيق AngularJS
لقد حان الوقت الآن لإنشاء تطبيق ويب واحد حقيقي لـ AngularJS (SPA).
مثال تطبيق AngularJS
لقد تعلمت ما يكفي عن AngularJS والآن يمكنك البدء في إنشاء تطبيق AngularJS الأول:
عدد الكلمات المتبقية: 100
شرح التطبيق
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "mynotectrl"> <h2> ملاحظاتي </h2> <textarea ng-model = "message" cols = "40" rows = "10"> </textarea> <p> <button ng click = "save ()" ng-bind = "left ()"> </pan> </p> <script src = "mynoteapp.js"> </script> <script src = "mynotectrl.js"> </script> </body> </html>
نتائج التشغيل:
عدد الكلمات المتبقية: 100
ملف التطبيق "mynoteapp.js":
var app = Angular.module ("myNoteApp" ، []) ؛
ملف وحدة التحكم "myNotectrl.js":
app.controller ("myNotectrl" ، function ($ scope) {$ scope.message = "" ؛ $ scope.left = function () {return 100 - $ scope.message.length ؛} ؛ $ scope.clear = function () {$ scope.message = "؛ أنقذ")؛}؛})؛عنصر <html> هو الحاوية لتطبيق AngularJS: ng-app = "mynoteapp":
<html ng-app = "mynoteapp">
<viv> هو نطاق وحدة التحكم في صفحة HTML: NG-Controller = "myNotectrl":
<div ng-controller = "mynotectrl">
يربط توجيه NG-Model <TextArea> برسالة متغير وحدة التحكم:
<textarea ng-model = "message" cols = "40" rows = "10"> </textarea>
اثنين من الأحداث النقر النقر نانوغرام اتصل بوظائف وحدة التحكم clear () و Save ():
<button ng click = "save ()"> حفظ </button> <button ng click = "clear ()"> clear </utton>
يربط توجيه NG-bind وظيفة وحدة التحكم اليسرى () إلى <span> لعرض الأحرف المتبقية:
عدد الأحرف المتبقية: <span ng-bind = "left ()"> </span>
يجب تحميل ملف مكتبة التطبيق بعد تنفيذ AngularJS:
<script src = "mynoteapp.js"> </script> <script src = "myNotectrl.js"> </script>
angularjs العمارة التطبيق
المثال أعلاه هو تطبيق Web Single Complete AngularJS (SPA).
يحتوي عنصر <HTML> على تطبيق AngularJS (NG-APP =).
يحدد العنصر <viv> نطاق وحدة تحكم AngularJS (NG-Controller =).
في تطبيق واحد ، يمكن أن يتكون من العديد من وحدات التحكم.
يحدد ملف التطبيق (my ... app.js) رمز طراز التطبيق.
واحد أو أكثر من ملفات وحدة تحكم (بلدي ... ctrl.js) تحديد رمز وحدة التحكم.
ملخص - كيف يعمل؟
يقع توجيه NG-APP ضمن عنصر الجذر للتطبيق.
بالنسبة لتطبيق ويب صفحة واحدة (SPA) ، يكون جذر التطبيق عادةً عنصر <html>.
تحدد توجيهات NG-Controller واحدة أو أكثر من وحدة التحكم في التطبيق. كل وحدة تحكم لها نطاقها الخاص :: عناصر HTML المحددة.
يبدأ AngularJS تلقائيًا في حدث HTML DomContentLoaded. إذا تم العثور على توجيه NG-APP ، فإن AngularJS يقوم بتحميل الوحدة النمطية في التوجيه وتجمع NG-APP كجذر للتطبيق.
يمكن أن يكون جذر التطبيق هو الصفحة بأكملها ، أو جزء صغير من الصفحة ، وإذا كان جزءًا صغيرًا ، فسيتم تجميعه وتنفيذه بشكل أسرع.
ما سبق هو شرح مفصل للتطبيق البسيط لـ AngularJs. آمل أن يساعد في برمجة AngularJS.