العنوان الأصلي: http://code.angularjs.org/1.0.2/docs/guide/concepts
يكمل. .
1. ملخص
توفر هذه المقالة بشكل أساسي نظرة عامة على المكونات الزاوية وتشرح كيف تعمل. القائمة كما يلي:
2. بدء التشغيل
إليك كيفية بدء تشغيل Angular (انظر المخطط مع المثال التالي):
1. يحمل المتصفح HTML ويحول علامات HTML إلى كائنات DOM ؛
2. المستعرض يحمل البرنامج النصي لـ Angular.JS ؛
3. Angular ينتظر الحدث الذي تم تحميله ؛
4. يبحث الزاوي عن NG-App ، وهو توجيه يستخدم لتحديد نطاق حدود التطبيق ؛
5. إذا كان لـ NG-APP وحدة نمطية محددة (ربما ng-app = "someapp") ، فسيتم استخدامه كحاجن $ التكوين ؛
6. يتم استخدام $ enjector لإنشاء خدمة تجميع $ (الخدمة) و $ Rootscope ؛
7. يتم استخدام خدمة التجميع $ كـ "ترجمة" (نوع من الشبه ، ثم قم بعمل شيء غامض قليلاً) وتوصيله بـ $ rootscope المقابل.
8. ng-init هذا التوجيه ينشئ سمة اسم في النطاق المقابل ويعينها قيمة "كيتي" ؛
9. أدخل قيمة "{{name}}" في التعبير وأخيراً عرض "Hello Kitty!".
<! doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> hello kitty! </title> <style type = "text/css"> .ng-cloak {display: none ؛ } </style> </head> <body> <div ng-init = "name = 'kitty'"> hello {{name}}! </viv> <script src = "../ Angular-1.0.1.js" type = "text/javascript"> </script> </html>كان التقدم بطيئًا لأنني ناقشت شيئًا مع شخص ما الليلة. . . هذه هي الجملة مرة أخرى. . . إنه متأخر من الليل الآن. . . Angular ، أراك بعد الإعلان!
=============================================================
انتهى الإعلان. . . يكمل
3. وقت التشغيل
يصف هذا الرسم البياني والمثال التالي كيف يتفاعل الزاوي من خلال حلقة حدث المتصفح (سيتم ترتيب وظائف المعالجة في جميع الأوقات ، وكذلك الوظائف التي ينفذها المؤقت ، من بنية قائمة الانتظار ، واستخدام حلقة غير محدودة لاستخراج الوظائف باستمرار من قائمة الانتظار. http://wiki.nodejs.tw/nodejs_from_scratch/javascript-yunodejs/2-1-event-loop).
1. ينتظر حلقة الحدث للمتصفح وصول الحدث. تأتي الأحداث من تفاعل المستخدم (أحداث DOM) ، وأحداث المؤقت (SetTimeOut) ، وأحداث الشبكة (استجابة الخادم ، XHR ، إلخ) ؛
2. تبدأ وظيفة رد الاتصال في الحدث في التنفيذ. هنا ندخل سياق JavaScript (السياق). يمكن أن تعدل وظيفة رد الاتصال هذه بنية DOM.
3. عند تنفيذ وظيفة رد الاتصال ، يخرج المتصفح سياق JavaScript ويعيد رسم العرض وفقًا لتغييرات DOM.
يعدل Angular تدفق JavaScript العام عن طريق إنشاء حلقة معالجة الأحداث الخاصة به. هذا يقسم جافا سكريبت إلى سياقات التنفيذ التقليدية والزاوية. أي عمليات يتم إجراؤها في سياق التنفيذ الزاوي لها ربط البيانات الزاوي ، ومعالجة الاستثناءات ، ومشاهدة الممتلكات وغيرها من القدرات. يمكننا إدخال سياق التنفيذ الزاوي باستخدام $ application () في JavaScript. ولكن تذكر أنه في معظم الأماكن (الزاوي) (مثل وحدات التحكم والخدمات) ، فإن التوجيه الذي يتعامل مع الأحداث سوف يتقدم بطلب لك. عادةً ما يتم استدعاء السيناريو الذي يتم تطبيقه يدويًا عند تنفيذ معالج أحداث مخصص أو معالجة عمليات الاسترداد من مكتبات الطرف الثالث.
1. أدخل سياق التنفيذ الزاوي عن طريق الاتصال. $ تطبيق (التحفيز). التحفيز هي وظيفة (بما في ذلك النطاق كوسيطة) أو تعبير قانوني زاوي نريد تنفيذه في سياق التنفيذ الزاوي.
2. Angular ينفذ التحفيز ، والذي يغير عادة حالة التطبيق.
3. الزاوي يدخل حلقة $ Digest. تتكون هذه الحلقة من حلقتين أصغر تتعاملان مع قائمة انتظار $ evalasync وقائمة الساعات $. ستبقي حلقة $ Digest تكرارها قبل أن يكون النموذج مستقرًا ، أي أن قائمة انتظار $ evalasync فارغة ، ولا يتم اكتشاف أي تغييرات بواسطة قائمة المراقبة $.
4. يتم استخدام قائمة انتظار evalasync $ كوسيلة لترتيب أن إطار المكدس الحالي يجب أن يتم القفز من إطار المكدس الحالي (يشير إطار المكدس إلى المنطقة (أو المساحة) المخصصة لوظيفة التشغيل حاليًا في المكدس. المعلمات التي تم تمريرها ، وعنوان الإرجاع (الذي يجب إعادة توجيهه إلى متى تنتهي الوظيفة. ملاحظة الترجمة: هذه هي نقطة الكسر في الوظيفة الرئيسية) تخزينها على المكدس) كلها في إطار المكدس. عادة ما يتم تحقيق ذلك باستخدام setTimeout (0). لكن الطريقة التي سيؤديها SetTimeout (0) إلى بطء ، أو عندما يرسم المتصفح العرض بعد معالجة كل حدث ، سوف تومض العرض (هل حل هذه المشكلة؟ كيفية حلها؟).
5. قائمة مراقبة $ هي مجموعة من التعبيرات التي يمكن تعديلها في أحدث التكرار. في حالة تغيير (النموذج) ، سيتم استدعاء وظيفة ساعة $ لتحقيق هدف إعادة تعيين DOM محددة.
6. بمجرد الانتهاء من حلقة Digest $ الزاوية (الموقف المذكور في الـ 3 السابق) ، بعد مغادرة سياق الزاوي وجافا سكريبت ، سيقوم المتصفح بإعادة رسم DOM استجابةً للتغييرات.
يشرح ما يلي كيف يوضح مثال "Hello Kitty" (-_-!) تأثير ربط البيانات عندما يدخل المستخدم النص في مربع النص.
1. مرحلة التجميع:
أ) تم تحديد مستمعي الأحداث NG-Model و INPUTIVE في <pection>.
ب) {{name}} العنصر الوطني (الاستيفاء ، لا تعرف كيفية الترجمة) (التعبير) قم بتعيين ساعة $ للرد عندما يتغير الاسم.
2. مرحلة وقت التشغيل:
أ) اضغط على زر "X" في عنصر التحكم inut للسماح للمتصفح بإعداد حدث keydown ؛
ب) يلتقط توجيهات الإدخال التغيير في قيمة مربع النص ، ثم يستدعي $ تطبيق ("name = 'x' ؛") ، وتحديث النموذج المطبق في سياق التنفيذ الزاوي.
ج) ينطبق Angluar "name = 'x' ؛" إلى النموذج. (تغير النموذج)
D) $ Digest Loop Start
E) تكتشف قائمة المراقبة $ أنه تم تغيير قيمة الاسم ، ثم تقوم بتحليل التعبير {{name}} مرة أخرى ، ثم يقوم بتحديث DOM.
و) سياق التنفيذ الزاوي (الزاوي) ، ثم الخروج من حدث KeyDown وسياق تنفيذ JavaScript بدوره ؛
ز) يعيد المستعرض عرض العرض ويقوم بتحديث الأحرف.
<! doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> hello kitty! </title> <style type = "text/css"> .ng-cloak {display: none ؛ } </style> </head> <body> <input ng-model = "name"/> <p> hello {{name}}! </p> <script src = "../ Angular 1.0.1.js" type = "text/javascript"> </script> </html>4. النطاق
النطاق مسؤول عن اكتشاف التغييرات في النموذج ويعمل كسياق تنفيذ التعبير. يتداخل النطاق في التسلسل الهرمي المشابه لهيكل DOM (كما تعلمنا سابقًا ، قد يكون التقسيم مرتبطًا بوحدة التحكم). (للحصول على التفاصيل ، تحقق من وثائق التوجيه الفردية لمعرفة التوجيهات التي ستنشئ نطاقًا جديدًا)
يوضح المثال التالي أن قيمة التعبير "الاسم" يتم تحديدها بناءً على النطاق الذي يعتمد عليه (الذي ينتمي إليه) ، ويتضمن أيضًا طريقة البحث عن القيمة (على غرار سلسلة نطاق JS ، إذا لم يكن لديك ، يرجى البحث عن والدي).
<! doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> scope </title> <style type = "text/css"> .ng-cloak {display: none ؛ } </style> </head> <body> <div ng-controller = "controlla"> hello {{name}}! <div ng-controller = "controlerc"> hello {{name}}! ؛ <div ng-controller = "controllerd"> hello {{name}}! ؛ </viv> </viv> </viv> <script src = "../ Angular 1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> function controlera ($ scope) {$ scope.name = 'kitty' ؛ } controllerB (scope $) {$ scope.name = 'lclao' ؛ } وظيفة controlerc (scope $) {$ scope.name = 'jeffrey' ؛ } controllerd (scope $) {} </script> </body> </html>5. وحدة التحكم
<! doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> وحدة تحكم </title> <style type = "text/css"> .ng-cloak {display: none ؛ } </style> </head> <body> <div ng-controller = "controlla"> hello {{name}}! <button ng-click = "doit ()"> doit !! </button> </div> <script src = "../ Angular-1.0.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> controlera ($ scope) {$ scope.name. $ scope.doit = function () {$ scope.name = "handsome" ؛ } ؛ } </script> </body> </html>وحدة التحكم هي الكود وراء العرض (-_-!). مسؤوليتها هي بناء النموذج ودفعه إلى العرض من خلال وظيفة رد الاتصال. العرض هو النطاق الحالي لخريطة القالب (HTML) (ترجمت قليلاً بالكاد ...). النطاق هو الرابط الذي يوجه النموذج إلى العرض ويرسل الحدث إلى وحدة التحكم.
من المهم فصل وحدة التحكم عن العرض لأن:
1. تتم كتابة Controller في JavaScript. جافا سكريبت ضروري. أمر مهم هو وسيلة جيدة لوصف سلوك التطبيق. يجب ألا تحتوي وحدات التحكم على أي معلومات عرض (منطقية) (مراجع DOM أو شظايا HTML)
2. تم كتابة قالب عرض في HTML. HTML هو التصريحي. التصريح (HTML) هو وسيلة جيدة لوصف واجهة المستخدم. يجب ألا تحتوي المشاهدات على أي سلوك.
3. نظرًا لأن وحدة التحكم لا تعرف أي طريقة عرض يحتاج إلى توافق معها ، يمكن لوحدة التحكم (بشكل غير مباشر) استخدام طرق عرض متعددة. هذا أمر مهم لإعادة البيع (استبدال الجلود؟) ، ووجهات النظر الأخرى الخاصة بالجهاز (مثل الهواتف المحمولة وأجهزة الكمبيوتر المكتبية) ، وقابلية قياس الكود.
6. نموذج
يمكن فهم النموذج ككائن بيانات. يتم استخدامه كمجموعة مع القالب لإنتاج وجهات نظر. من أجل كتابة النموذج إلى العرض ، يجب الرجوع إلى النموذج بواسطة النطاق. على عكس العديد من الأطر الأخرى ، لا يوجد لدى Angular قيود أو متطلبات على النموذج. ليست هناك حاجة لإضافة فئة إضافية ، ولا تحتاج إلى الوصول إلى النموذج أو تغييره من خلال أساليب خاصة مميزة. يمكن أن يكون نوع بيانات النموذج نوعًا بدائيًا (سلسلة ، رقم ...) ، كائن قيمة المفاتيح ({A: 1 ، B: 2}) ، أو دالة (دالة () {...}). ببساطة ، يجب أن يكون النموذج الزاوي كائن JavaScript طبيعي.
7. عرض
العرض شيء يمكن للمستخدمين رؤيته. ولد المنظر في القالب. فهو يجمع بين النموذج ويجعله في نهاية المطاف كدوم متصفح. يأخذ Angular طريقة مختلفة تمامًا لتقديم العرض للعديد من أنظمة القالب الأخرى.
محركات النماذج الأخرى: يتم تنفيذ العديد من محركات القالب عن طريق إنشاء سلاسل HTML مع علامات خاصة. عادةً ما تدمر علامات القالب هذه بناء جملة HTML ، مما يعني أنه لا يمكن تحرير الكود من خلال محرر HTML عام (هذا ...). يتم تمرير سلسلة القالب إلى محرك القالب ويتم دمجها مع البيانات. أخيرًا يولد سلسلة HTML. تتم كتابة هذه السلاسل عمومًا إلى DOM في .innerhtml ، مما يدفع المتصفح إلى تقديم محتوى القالب. يجب تكرار هذه العملية مرارًا وتكرارًا عندما تتغير البيانات. تتوافق تفاصيل القالب مع تفاصيل تحديث DOM. مفتاح هذه الحبوب هو أن نظام القالب يعالج السلاسل.
Angular: الفرق بين القوالب الزاوية هو أنه يعتمد على DOM بدلاً من القائمة على السلسلة. لا يزال القالب بحاجة إلى كتابة بعض الأوتار في HTML ، لكنه لا يزال HTML (وليس عن طريق تضمين القالب في الداخل). يحول المتصفح HTML إلى DOM ، ثم يصبح DOM إدخال المترجم (محرك قالب Angular). يبحث المترجم عن التوجيهات وضبط الساعات في النموذج بدوره. والنتيجة هي وجهة نظر تم تحديثها طوال الوقت ، وليس هناك حاجة لإعادة وضع النموذج والقالب. يصبح النموذج المصدر الوحيد للحقيقة للعرض.
8. التوجيهات
التوجيه هو سلوك (على سبيل المثال ، في مثال المقالة السابقة "Hide and Seek") أو تحويل DOM (العلامات المخصصة ، التي تحتوي على مجموعة من DOMs) ، ووضع اسمها في السمة واسم العلامة واسم الفصل يمكن أن يؤدي إلى التوجيه. يتيح لك التوجيه تمديد علامات HTML بطريقة إعلانية.
لا تزال هناك بعض الأسئلة في الأمثلة التالية. هذه هي الطريقة
<! doctype html> <html lang = "zh-cn" ng-app = "myDiRective"> <head> <meta charset = "utf-8"> <title> التوجيه </title> <style type = "text/css"> .ng-cloak {display: none ؛ } </style> </head> <body ng-controller = "myctrl"> <div ng-model = "content" contentIdeDible = "true" src = "../ angular-1.1.1.js" type = "text/javaScript"> </script> <script type = "text/javaScript"> Angular.Module ("myDiRective" ، []). setval () {ngmodel setval () ؛9. المرشحات
تلعب المرشحات دورًا في تحويل البيانات (التنسيق). عادة ما تكون مرتبطة بالمنطقة ، وقد يكون للمناطق المختلفة تنسيقات ناتج مختلفة. إنهم يتابعون روح مرشحات UNIX مع بناء جملة مماثل: | (ماسورة)
<! doctype html> <html lang = "zh-cn" ng-app> <head> <meta charset = "utf-8"> <title> مرشح </title> <style type = "text/css"> .ng-cloak {display: none ؛ } </style> </head> <body> <viv ng -init = "list = ['baidu b' ، 'Sogou S' ، '360' ، '3SB'] ng-model = "myfiltertext" type = "text"/> <br/> {{list | filter: myfiltertext | json}} <br/> </div> <script src = "../ Angular-1.0.1.js10. الوحدات النمطية والحاقن
الحاقن هو محدد موقع الخدمة. سيكون لكل تطبيق زاوي حاقن منفصل. يوفر الحاقن وسيلة للعثور على مثيلات الكائن بالاسم. سيحتفظ الحاقن بجميع مثيلات الكائنات في ذاكرة التخزين المؤقت الداخلية ، لذلك عندما يتم استدعاء نفس الاسم بشكل متكرر ، يتم إرجاع نفس مثيل الكائن. إذا لم يكن الكائن موجودًا ، فسوف يطلب مصنع المثيل إنشاء مثيل جديد.
الوحدة النمطية هي طريقة لتكوين مصنع مثيل لحاقن ، يسمى "مزود".
// إنشاء وحدة Var mymodule = Angular.module ('mymodule' ، []) // قم بتكوين الحاقن mymodule.factory ('servicea' ، function () {return {// بدلاً من {} ، ضع كائنك هنا} ؛}) ؛ // قم بإنشاء حاقن وتكوينه من "mymodule" var $ enjector = Angular.Injector ('mymodule') ؛ // استرجع كائن من الحاقن حسب اسم var servicea = $ enjector.get ('servicea') ؛ // صحيح دائمًا بسبب مثيل Cache $ enjector.get ('servicea') === $ enjector.get ('servicea') ؛ // حقيقيلكن Cool X للحاقن الحقيقي هو أنه يمكن استخدامه لاتصال طرق ونوع "مثيله". هذه الميزة الرائعة هي أنها تتيح الأساليب والأنواع لطلب الموارد التي تعتمد عليها ، بدلاً من البحث عنها.
// تكتب وظائف مثل هذا. وظيفة dosomething (servicea ، serviceb) {// افعل شيئًا هنا. } // يوفر Angular الحاقن لتطبيقك var $ enjector = ... ؛ ///////////////////////////////2222222222070 ///////////////////////////////2222222222070 ///////////////////////////////2222222222070 ///////////////////////////////2222222222070 استدعاء وظيفة dosomething (servicea ، serviceB) ؛ // ما سبق هو الطريقة القديمة التقليدية ~ فيما يلي طريقة الحديث الزاوي عن بقرة خاصة بها X/////////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////////// الطريقة الرائعة للحصول على التبعيات. // سيقوم حاقن $ بتزويد الوسائط بالدالة تلقائيًا $ enjector.invoke (dosomething) ؛ // هذه هي الطريقة التي يتصل بها الإطار وظائفكلاحظ أن الشيء الوحيد الذي نحتاج إلى كتابته هو وظيفتنا ، ويمكننا سرد المورد الذي تعتمد عليه الطريقة في وسيطات الوظيفة! عندما تعمل المكالمات الزاوية ، فإنها ستستخدم طريقة "الاتصال" لملء الوظائف الزراعية تلقائيًا.
لاحظ كيف يتم سرد التبعيات في المُنشئ في المثال أدناه. عندما يقوم NG-Controller بتأسيس وحدة التحكم ، سيتم توفير موارد التبعية تلقائيًا. ليست هناك حاجة لإنشاء أو البحث أو إنشاء مراجع الحاقن إلى موارد التبعية تحميل.
<! doctype html> <html lang = "zh-cn" ng-app = "time example"> <head> <meta charset = "utf-8"> <title> حاقن </title> <style type = "text/css"> .ng-cloak {display: none ؛ } </style> </head> <body> <div ng-controller = "clockCtrl"> الوقت الحالي هو: {time.now}} </div> <script src = "../ angular-1.0.1.js" type = "text/javaScript"> </script> ] /** * * param $ scope * param myClock يتم إدراج MyClock التبعية تلقائيًا هنا! ! * constructor */ function clockCtrl (scope $ ، myClock) {$ scope.time = myClock ؛ } </script> </body> </html>11. مساحة الاسم الزاوي
لمنع تعارضات الاسم ، سيضيف Angular البادئة $ إلى اسم الكائن. يرجى عدم استخدام بادئة $ في الكود الخاص بك لتجنب النزاعات. (-_- !!)
ما سبق هو المعلومات حول مفاهيم AngularJS. سنستمر في إضافة مقالات ذات صلة في المستقبل. شكرا لك على دعمك لهذا الموقع!