في القسم السابق ، يتم تقديم إطار JS الزاوي لفترة وجيزة. في هذا القسم ، ستستمر آليات Bootstrap (bootstrap) والمترجم (التجميع).
1: bootstrap: التهيئة الزاوية
1: الأتمتة الأولية الموصى بها من قبل Angular هي كما يلي:
<! doctype html> <html xmlns: ng = "http://angularjs.org" ng-app> <body> ... <script src = "angular.js"> </body> </html
استخدم NGAPP لتمييز عقدة الجذر حيث تحتاج إلى تشغيل التطبيق تلقائيًا ، وهو عمومًا علامة HTML. عندما يؤدي الحدث الذي تم تحميله في DomContentLoad إلى الزاوية ، فإنه سيجد NGAPP تلقائيًا كعقدة الجذر للتطبيق. إذا تم العثور عليها ، فسيتم تنفيذ العمليات التالية:
1. وحدة التحميل (الوحدة النمطية) التوجيه ذات الصلة (التعليمات).
2. قم بإنشاء حاقن تطبيق (آلية حقن Angular).
3. تجميع ومعالجة NG-APP كتعليمات عقدة الجذر. يتيح لك ذلك تخصيص اختيار عقدة DOM كعقدة جذر التطبيق.
<! doctype html> <html ng-app = "intervinalodulename"> <body> يمكنني إضافة: { +}}.2: التهيئة اليدوية:
إذا كنت ترغب في الحصول على مزيد من التحكم في التهيئة ، فيمكنك استخدام طريقة التمهيد اليدوية المخصصة للتهيئة بدلاً من التهيئة التلقائية الخاصة بـ Angular. على سبيل المثال ، تحتاج إلى القيام بشيء ما قبل تجميع القالب الزاوي ، مثل تغيير محتويات معينة من القالب. ستكون طريقة التمهيد اليدوية على النحو التالي:
<! doctype html> <html xmlns: ng = "http://angularjs.org"> <body> hello {{'world'}}! <script src = "http://code.angularjs.org/angular.js {Angular.Bootstrap (document) ؛}) ؛ </script> </body> </html>1. بعد تحميل كل الرمز الموجود في الصفحة ، ابحث عن عقدة جذر قالب HTML (عنصر المستند النموذجي).
2. استدعاء API/Angular.bootstrap (Angular.bootstrap (العنصر [، وحدات])) لتجميع القالب لجعله قابل للتنفيذ.
الثاني: مترجم: ترجمة Angular
تتيح آلية تجميع Angular للمطورين إضافة بناء جملة HTML جديد إلى المتصفح ، مما يتيح لنا إضافة بعض العقد HTML ، والسمات ، وحتى إنشاء بعض العقد المخصصة والسمات. يقوم Angular بتوسيع هذه السلوكيات إلى توجيهات. يجلب أنجول توجيهات مفيدة ويسمح لنا بإنشاء توجيهات خاصة بالمجال.
1: تنقسم معالجة المترجم إلى خطوتين:
1. تحويل DOM ، وجمع الدالة التوجيه ، وإرجاع رابط (اتصال).
2. دمج التعليمات والنطاق لتوليد رؤية حية. سيتم عكس أي تغييرات في وضع النطاق في العرض وسيتم أيضًا مزامنة تفاعلات المستخدم من العرض مع نموذج النطاق ، والنطاق هو مصدر بيانات واحد.
2: أمر التوجيه
التوجيه هو فعل سيتم معالجته عن طريق تحرير تصميم HTML الخاص. يمكن وضعه على الأسماء أو السمات أو فئة العقدة أو حتى في تعليق HTML. فيما يلي طريقة الكتابة المكافئة لـ Angular NG-Bind:
<span ng-bind = "exp"> </span> <span> </span> <ng-bind> </grown-bind> <!-التوجيه: ng-bind exp>
التوجيه هو مجرد وظيفة سيتم تنفيذها بواسطة Angular في DOM. فيما يلي مثال على السحب والقطرات التي يمكن تطبيقها على سمة Span و Div:
angular.module ('drag' ، []). التوجيه ('draggable' ، function ($ document) {var startx = ، starty = ، x = ، y = ؛ function function (scope ، element ، atter) {element.css ({position: 'relative' ، border: 'px solid red' ، backrodentcolor: Function (startx = event. "px '، اليسار: x +' px '}) ؛العرض التوضيحي
يمكنك السحب والانتقال لي إلى أي مكان!
3: عرض الفهم
تم تصميم العديد من محركات القالب لدمج القوالب والموديلات لإرجاع سلسلة ، ثم إلحاق عقدة DOM باستخدام InnerHTML ، والتي يُعتقد أنه يجب إعادة تشغيل أي تغييرات في البيانات لإنشاء محتوى جديد وإلحاقه بـ DOM. الرقم التالي ينتمي إلى تقنية ربط في اتجاه واحد:
لا يستخدم Angular تعليمات التوجيه بدلاً من السلاسل. قيمة الإرجاع هي وظيفة ارتباط تدمج نموذج البيانات. ربط العرض والنموذج هو تلقائي وشفاف ، ولا يتطلب من المطورين إضافة إجراءات إضافية لتحديث العرض. Angular ليس فقط ربط نموذج البيانات ، ولكن أيضًا مفهوم السلوك. كملزمة في اتجاهين ، يكون الشكل كما يلي:
مادة:
1. الموقع الرسمي angular: http://angularjs.org/
2. تنزيل الكود: https://github.com/angular/angular.js
ما ورد أعلاه هو آليات bootstrap الزاوية والترسبات التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!