ملخص
يسمح برنامج التحويل البرمجي HTML من AngularJS للمتصفح بالتعرف على بناء جملة HTML الجديد. يسمح لك بربط السلوكيات بعناصر أو سمات HTML ، وحتى يتيح لك إنشاء عناصر جديدة ذات سلوكيات مخصصة. يدعو AngularJS هذا السلوك إلى "تعليمات"
لدى HTML العديد من الهياكل التعريفية للتحكم في التنسيق عند كتابة صفحات ثابتة. على سبيل المثال ، إذا كنت ترغب في مركز محتوى ، فلا يتعين عليك إخبار المتصفح بـ "العثور على نقطة منتصف النافذة ودمجها مع منتصف المحتوى". تحتاج فقط إلى إضافة سمة محاذاة = "مركز" للعنصر الذي يجب تركز عليه. هذه هي قوة اللغة التعريفية.
لكن اللغات التصريحية لديها أيضًا شيء لا يمكن تحقيقه ، وأحد الأسباب هو أنه لا يمكنك استخدامه لتمكين المتصفحات من التعرف على بناء الجملة الجديد. على سبيل المثال ، إذا لم تقم بتوسيط المحتوى ، ولكن إلى 1/3 من اليسار ، فلن يكون قادرًا على القيام بذلك. لذلك نحن بحاجة إلى وسيلة لتمكين المتصفح من تعلم بناء جملة HTML جديد.
يأتي طلاب AngularJS من بعض التعليمات المفيدة للغاية لإنشاء التطبيقات. نأمل أيضًا أن تتمكن من إنشاء بعض الإرشادات المفيدة لتطبيقاتك الخاصة. هذه التعليمات الممتدة هي "لغة محددة المجال" التي تقوم بإنشائها التطبيق.
ستحدث عملية التجميع على جانب المتصفح ؛ لن يشارك جانب الخادم في أي خطوات ، ولن يكون مسبقًا.
كدم
المترجم هو خدمة توفرها AngularJS. يبحث عن الخصائص المتعلقة بها عن طريق اجتياز DOM. تنقسم عملية التجميع بأكملها إلى مرحلتين.
1. التجميع: اجتياز DOM وجمع جميع الإرشادات ذات الصلة لإنشاء وظيفة ارتباط.
2. الرابط: ربط نطاقًا للتوجيه وإنشاء طريقة عرض ديناميكية. ستنعكس أي تغييرات على نموذج النطاق في العرض ، وسيتم انعكاس أي إجراءات مستخدم في العرض على نموذج النطاق. هذا يجعل نموذج النطاق هو الشيء الوحيد الذي تحتاج إلى الاهتمام به في منطق عملك.
هناك بعض الإرشادات ، مثل NG-Repeat ، والتي تستنسخ كل عنصر DOM في مجموعة البيانات مرة واحدة. إن ممارسة تقسيم عملية التجميع بأكملها إلى مرحلتين: التجميع والربط يحسن الأداء الكلي ، لأن القالب المستنسخ يحتاج فقط إلى تجميعه مرة واحدة في المجموع ، ثم مرتبطًا بمثيلات النموذج الخاصة بهما.
تعليمات
يشير التوجيه إلى "الإجراء الذي يجب تنفيذه عندما يدخل بنية HTML المرتبطة في مرحلة التجميع". يمكن كتابة التوجيهات باسم العنصر ، في السمة ، في اسم فئة CSS ، وفي التعليقات. فيما يلي عدة أمثلة على استخدام توجيه NG-Bind مع نفس الوظيفة.
نسخة الكود كما يلي:
<span ng-bind = "exp"> </span>
<span> </span>
<ng-bind> </ng-bind>
<!-التوجيه: NG-bind exp->
التوجيهات هي في الأساس وظائف فقط تحتاج إلى تنفيذها عندما يقوم المترجم بتجميع DOM ذات الصلة. يمكنك العثور على معلومات أكثر تفصيلاً حول التوجيهات في وثائق API التوجيهية.
فيما يلي أمر يجعل العناصر قابلة للسحب. لاحظ السمة القابلة للسحب في عنصر <span>.
index.html:
نسخة الكود كما يلي:
<! doctype html>
<html ng-app = "drag">
<head>
<script src = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<script src = "script.js"> </script>
</head>
<body>
<span draggable> اسحبني </span>
</body>
</html>
script.js:
نسخة الكود كما يلي:
Angular.Module ('السحب' ، []).
التوجيه ('draggable' ، وظيفة (مستند $) {
var startx = 0 ، starty = 0 ، x = 0 ، y = 0 ؛
وظيفة الإرجاع (النطاق ، العنصر ، attr) {
element.css ({
الموقف: "قريب" ،
الحدود: "1 بكسل الصلب الأحمر" ،
BackgroundColor: "Lightgrey" ،
المؤشر: "مؤشر"
}) ؛
element.bind ('mousedown' ، function (event) {
startx = event.screenx - x ؛
starty = event.screeny - y ؛
$ document.bind ('mousemove' ، mousemove) ؛
$ document.bind ('mouseup' ، mouseup) ؛
}) ؛
وظيفة mousemove (الحدث) {
y = event.screeny - Starty ؛
x = event.screenx - startx ؛
element.css ({
أعلى: y + 'px' ،
اليسار: x + 'px'
}) ؛
}
وظيفة mouseup () {
$ document.unbind ('mousemove' ، mousemove) ؛
$ document.unbind ('mouseup' ، mouseup) ؛
}
}
}) ؛
يمكن تحقيق هذا السلوك الجديد عن طريق إضافة السمة القابلة للسحب. جمال تحسننا هو أننا نعطي المتصفح قدرات جديدة. لقد استخدمنا طريقة طبيعية لتوسيع قدرة المتصفح على فهم السلوكيات الجديدة وبناء الجملة الجديدة طالما أن المطور على دراية بقواعد HTML.
فهم الرأي
هناك العديد من أنظمة القالب عبر الإنترنت. معظمهم "يربط قوالب الأحرف الثابتة والبيانات ، وإنشاء أحرف جديدة ، وإدخالها في عناصر الصفحة من خلال InnerHTML".
هذا يعني أن أي تغييرات في البيانات ستؤدي إلى إعادة تجميع البيانات باستخدام القالب لإنشاء أحرف جديدة ثم إدراجها في DOM. تتضمن المشكلات التي تنشأ: يجب أن تتم قراءة إدخال المستخدم ودمجها مع بيانات النموذج ، ويجب كتابة إدخال المستخدم ، ويجب إدارة عملية التحديث بأكملها يدويًا ، وعدم وجود تعبيرات غنية.
AngularJS مختلف. يستخدم برنامج التحويل البرمجي AngularJS DOM مع التعليمات ، بدلاً من قوالب السلسلة. يرجع وظيفة الارتباط ، والتي تجمع بين نموذج النطاق لإنشاء طريقة عرض ديناميكية. عملية الربط لهذا العرض والنموذج "شفاف". لا يحتاج المطور إلى فعل أي شيء بشأن تحديث العرض. ولا يستخدم التطبيق innerhtml ، لذلك لا يتعين علينا كتابة مدخلات المستخدم. وعلى الأخص ، لا يمكن لتوجيهات Angular استخدام ربط السلسلة فحسب ، بل تستخدم أيضًا بعض الهياكل التي تشير إلى السلوك.
سوف تجميع AngularJS يولد "DOM مستقر". هذا يعني أن حالات عناصر DOM المرتبطة بنموذج البيانات لن تتغير خلال دورة حياة الربط. هذا يعني أيضًا أن الكود يمكن أن يحصل على مراجع مثيل لعناصر DOM وتسجيل الأحداث ، دون القلق من فقدان هذا المرجع عند الجمع بين القالب والبيانات.