في الواقع ، لا أعرف من الذي يجب أن يستهدف أو مكان البدء في الكتابة ، لذلك سأبدأ الكتابة وفقًا لفكرة بسيطة.
1.Agular.Element
2.angular.bootstrap
نحن واضحون جدًا أن تطبيق NG-APP يتم تطبيقه على العقد ، ويساعدك Angular تلقائيًا على التهيئة. تنقسم عملية التهيئة إلى الخطوات التالية
1. ستتم تهيئة angular تلقائيًا عند تحميل المستند ، والأول ، سيتم العثور على العقدة المحددة بواسطة توجيه NG-APP.
2. التعليمات المتعلقة بالوحدة النمطية
3. إنشاء حاقن متعلق بالتطبيق (مدير التبعية)
4. ابدأ في تجميع DOM مع تطبيق NG-APP المعمول به كعقدة الجذر
الآن نهيئها بأنفسنا ونجعل شيئًا مكافئًا لتوجيه NG-APP. Angular.Element هذا هو الغلاف ، لف عنصر DOM الأصلي أو سلسلة HTML كعنصر jQuery. Angular.Bootstrap يمكنه تهيئة البرنامج النصي يدويًا ، نستخدم هذين لتهيئة هذا البرنامج النصي
نسخة الكود كما يلي:
<! doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "utf-8">
<title> bootstrap-manual </title>
<type type = "text/css">
.ng-cloak {
العرض: لا شيء ؛
}
</style>
</head>
<body>
هنا هو الخارج من ng-app ~~ {{1+2}}
<div id = "widuu"> هذا في ng-app ~~~ {{1+2}} </div>
<script src = "Angular.min.js" type = "text/javaScript"> </script>
<script type = "text/javaScript">
Angular.Element (document) .Ready (function () {
Angular.Bootstrap (Angular.Element (document.getElementById ("widuu"))) ؛
}) ؛
</script>
</body>
</html>
2. Compiler
نرى بوضوح أن وثيقة AngularJS الرسمية مليئة بتسميات الإبل ، مثل NGAPP و NGMODULE و NGBIND ، وما إلى ذلك ، هي التعليمات ذات الصلة. من بينها ، يسمح لنا برنامج التحويل البرمجي HTML بتحديد سمات العناصر والعلامات من قبل أنفسنا. الزاوي يدعو هذه التوجيهات السلوكيات الإضافية.
توضح الوثائق الرسمية المترجم مثل هذا
نسخة الكود كما يلي:
المترجم
برنامج التحويل البرمجي هو خدمة زاوية تعبر DOM تبحث عن سمات. تحدث عملية التجميع في مرحلتين.
ترجمة: اجتياز دوم وجمع جميع التوجيهات. والنتيجة هي وظيفة الارتباط.
الرابط: الجمع بين التوجيهات مع نطاق وإنتاج عرض مباشر. تنعكس أي تغييرات في نموذج النطاق في العرض ، وينعكس أي تفاعلات مستخدم مع العرض في نموذج النطاق. هذا يجعل نموذج النطاق المصدر الوحيد للحقيقة.
بعض التوجيهات مثل عناصر NG-Repeat Clone DOM مرة واحدة لكل عنصر في مجموعة. إن وجود مرحلة ترجمة وربط يحسن الأداء لأن القالب المستنسخ يحتاج فقط إلى تجميعه مرة واحدة ، ثم ربطه مرة واحدة لكل مثيل استنساخ.
برنامج التحويل البرمجي هو خدمة زاوية ، مسؤولة عن اجتياز عقد DOM وإيجاد خصائص. يتم تقسيم التجميع إلى مرحلتين:
1. التجميع: اجتياز العقد وجمع جميع التوجيهات ، وإرجاع وظيفة الارتباط
2. الرابط: ربط التوجيهات في نطاق وإنشاء عرض مباشر. سوف تنعكس أي تغييرات في النطاق في العرض (تحديث العرض) ؛ سوف ينعكس أي نشاط (تغيير) لأي مستخدم إلى القالب في نموذج النطاق (الربط ثنائي الاتجاه). هذا يسمح لنموذج النطاق لتعكس القيمة الصحيحة.
بعض التوجيهات ، مثل NG-Repeat ، نسخ عنصرًا محددًا (مجموعة) مرة واحدة لكل عنصر في المجموعة. التجميع والربط هما مرحلتان لتحسين الأداء. نظرًا لأن القالب المستنسخ يحتاج فقط إلى تجميعه مرة واحدة ، ثم ربط العناصر في كل مجموعة مرة واحدة (على غرار ذاكرة التخزين المؤقت للقالب).
3. قم بإنشاء توجيهاتك الخطوة بخطوة
1. فهم التوجيه
بادئ ذي بدء ، نحن نفهم أن التوجيه يعتمد على تسمية الإبل ، مثل NgModule. عند التجميع ، فإن المباراة مثل هذا ، على سبيل المثال:
نسخة الكود كما يلي:
<input ng-model = "foo">
<بيانات الإدخال NG: Model = "Foo">
يمكن للتوجيه استخدام X- أو البيانات- كبادئة ، ويمكنه استخدام: ،- ، أو _ إلخ.
نسخة الكود كما يلي:
<span ng-bind = "name"> </span> <br/>
<span ng: bind = "name"> </span> <br/>
<span ng_bind = "name"> </span> <br/>
<span data-ng-bind = "name"> </span> <br/>
<span x-ng-bind = "name"> </span> <br/>
بشكل عام ، نستخدم ng-bind لتتوافق مع ngbind ، هذا التنسيق
يمكن أن يتطابق ترجم $ على التوجيه بناءً على اسم العنصر ، السمة ، اسم الفصل والتعليق
نسخة الكود كما يلي:
<-dir> </my-dir>
<span my-dir = "exp"> </span>
<!-التوجيه: my-dir exp->
<span> </span>
أثناء عملية التجميع ، يطابق برنامج التحويل البرمجي النص مع تعبيرات مضمنة في السمات (مثل {{something}}) من خلال خدمة interpolate $. سيتم تسجيل هذه التعبيرات كساعات وسيتم تحديثها معًا كجزء من دورة Digest. هنا استيفاء بسيط:
<img src = "img/{{username}}. jpg"/> hello {{username}}!
2. خطوات التجميع
ثلاث خطوات لـ "تجميع" HTML:
1. أولاً ، قم بتحويل HTML إلى كائنات DOM من خلال واجهة برمجة تطبيقات المتصفح القياسية. هذه خطوة مهمة للغاية. لأن القالب يجب أن يكون قابلاً للتطبيق (متوافق مع المواصفات). يمكن مقارنة ذلك مع معظم أنظمة القالب ، والتي تعتمد بشكل عام على سلاسل ، وليس عناصر DOM.
2. يتم تجميع DOM عن طريق استدعاء طريقة $ comple (). تعبر هذه الطريقة DOM وتتطابق مع التوجيه. إذا نجحت المباراة ، فسيتم إضافتها إلى قائمة التوجيه مع DOM المقابلة. طالما تم تحديد جميع التوجيهات المرتبطة بـ DOM المحددة ، سيتم فرزها في الأولوية وتنفيذ وظيفة الترجم () بهذا الترتيب. تتمتع وظيفة التوجيه التوجيهية بفرصة لتعديل بنية DOM وهي مسؤولة عن توليد وظيفة LINK (). تقوم طريقة $ compile () بإرجاع وظيفة الارتباط المشتركة ، وهي مجموعة من الوظائف المرتبطة التي يتم إرجاعها بواسطة وظيفة ترجمة التوجيه نفسه.
3. قم بتوصيل القالب بالنطاق من خلال وظيفة الارتباط التي تم إرجاعها في الخطوة السابقة. وهذا بدوره يستدعي وظيفة الارتباط الخاصة التوجيهية ، مما يسمح لهم بتسجيل بعض المستمعين على العنصر ، وإنشاء بعض الساعات ذات النطاق. والنتيجة في هذا هو الارتباط في اتجاهين ، فوري بين النطاق و DOM. عندما يتغير النطاق ، سيحصل DOM على الاستجابة المقابلة.
نسخة الكود كما يلي:
var $ compile = ... ؛ // حقن في الكود الخاص بك
VAR SCOPE = ... ؛
var html = '<div ng-bind =' exp '> </viv>' ؛
// الخطوة 1: تحليل HTML في عنصر DOM
قالب var = Angular.Element (HTML) ؛
// الخطوة 2: تجميع القالب
var linkfn = $ compile (template) ؛
// الخطوة 3: ربط القالب المترجم بالنطاق.
Linkfn (النطاق) ؛
نغاتر سمة الربط
نسخة الكود كما يلي:
<svg>
<circle ng-attr-cx = "{{cx}}"> </cird>
</svg>
هذا كل شيء اليوم ، وابدأ في الكتابة لإنشاء توجيه غدًا ~~~ لا ينبغي أن يكون طول التحكم طويلًا جدًا ، فهناك العديد من المفاهيم الرئيسية في هذا الفصل ~~~