جمع أسئلة مقابلة AngularJS

ما هي الاختلافات بين NG-IF و NG-Show/Hide؟

الفرق الأول هو أنه يتم إنشاء NG-IF فقط عندما يكون التعبير بعد عقدة DOM صحيحًا ، ويتم إنشاء NG-Show في البداية ، والعرض: Block and Display: لا يتم استخدام أي شيء للتحكم في العرض وعدم العرض.

الفرق الثاني هو أن NG-IF سوف ينتج (ضمنيًا) نطاقًا جديدًا ، وينطبق الشيء نفسه على NG-switch ، ng-in-include ، وما إلى ذلك لإنشاء واجهة ديناميكيًا.

سيؤدي ذلك إلى ارتباط نموذج NG بالمتغير الأساسي في NG-IF وربط هذا النموذج إلى منطقة عرض أخرى في DIV الخارجي. عندما تتغير الطبقة الداخلية ، لن تتغير الطبقة الخارجية بشكل متزامن لأن هناك بالفعل متغيرين.

 <p> {{name}} </p> <div ng-if = "true"> <input type = "text" ng-model = "name"> </viv>

لا يملك NG-Show هذه المشكلة لأنها لا تأتي مع نطاقها الخاص على المستوى الأول.

تتمثل طريقة تجنب هذا النوع من المشكلات في ربط العناصر دائمًا في الصفحة بخصائص الكائن (data.x) بدلاً من الربط مباشرة بالمتغير الأساسي (x).

انظر النطاق في AngularJS للحصول على التفاصيل

عندما يتكرر NG-Repeat على صفيف ، إذا كانت هناك نفس القيم في الصفيف ، فما هي المشكلات الموجودة وكيفية حلها؟

لا يُسمح بالتكرارات في مكرر. يمكن إضافة المسار على $ index حله. بالطبع ، يمكنك أيضًا تتبع أي قيمة عادية ، طالما يمكنك تحديد كل عنصر بشكل فريد في الصفيف (قم بإنشاء الارتباط بين DOM والبيانات).

هل يمكن أن يستخدم التعبير المكتوب في النقر ng الأساليب على الكائنات الأصلية JS؟

ليس فقط التعبيرات في NG-Click ، ولكن فقط أساليب JS الأصلية لا يمكن تسميتها مباشرة طالما أنها في الصفحة ، لأن هذه لا توجد في نطاق وحدة التحكم المقابلة للصفحة.

خذ كستناء:

<p> {{parseint (55.66)}} <p>

ستجد أنه لا يوجد شيء معروض.

ولكن إذا أضفت هذه الوظيفة في نطاق $:

 $ scope.parseint = function (x) {return parseint (x) ؛}

بالطبع لا توجد مشكلة مثل هذا.

لهذا النوع من المتطلبات ، قد يكون استخدام مرشح اختيارًا جيدًا:

 <p> {{13.14 | ParseIntFilter}} </p> app.filter ('parseintfilter' ، function () {function function (item) {return parseint (item) ؛}})

{{الآن | "yyyy-mm-dd '}} في هذا التعبير ، كيف يمكن تخصيص الخطوط الرأسية والمعلمات اللاحقة؟

تصفية ، تنسيقات البيانات ، يتلقى إدخال ، يعالجها وفقا لقاعدة معينة ، وإرجاع نتيجة المعالجة.

مرشح مدمج

هناك تسعة أنواع من المرشحات المدمجة:

التاريخ (التاريخ)

عملة

limitto (حدود صفيف أو طول السلسلة)

Orderby (فرز)

أحرف صغيرة (صغيرة)

أحرف كبيرة (قبعات)

الرقم (تنسيق الرقم ، وأضف ألف فاصل ، واستقبل المعلمات للحد من عدد الأماكن العشرية)

تصفية (قم بمعالجة مجموعة وتصفية عناصر تحتوي على فرعية)

JSON (تنسيق كائن JSON)

هناك طريقتان لاستخدام المرشح ، واحد هو مباشرة على الصفحة:

<p> {{الآن | التاريخ: 'yyyy-mm-dd'}} </p>

واحد آخر هو استخدامه في JS:

// $ filter ('filter name') (الكائنات التي يجب ترشيحها ، المعلمة 1 ، المعلمة 2 ، ...)

$ filter ('date') (الآن ، 'Yyyy-MM-DD HH: mm: ss') ؛

مرشح مخصص

 // form app.filter ('filter name' ، function () {function function (الكائن الذي يجب ترشيحه ، معلمة التصفية 1 ، معلمة التصفية 2 ، ...) {// ... افعل شيئًا لإرجاع الكائن بعد المعالجة ؛}}) ؛ // Chestnut app.filter ('timesfilter' ، function () {function function (item ، times) {var result = '' ؛ for (var i = 0 ؛ i <times ؛ i ++) {result+= item ؛} return return ؛}})

ما هي العلاقة بين المصنع والخدمة والمزود؟

مصنع

ضع طريقة الخدمة والبيانات في كائن وأرجع هذا الكائن

 app.factory ('foOservice' ، function () {return {target: 'factory' ، sayhello: function () {return 'hello' + this.target ؛}}}) ؛

خدمة

قم بإنشاء خدمة من خلال طريقة مُنشئ وإرجاع كائن تم تأسيسه

 App.Service ('fooservice' ، function () {var self = this ؛ this.target = 'service' ؛ this.sayhello = function () {return 'hello' + self.target ؛}}) ؛

مزود

إنشاء خدمة يمكن تكوينها من خلال التكوين. يتم إرجاع $ GET هو استخدام المصنع لإنشاء محتوى الخدمة

 app.provider ('fooservice' ، function () {this.configdata = 'init data' ؛ this.setConfigData = function (data) {if (data) {this.configdata = data ؛}} this. $ get = function () this.target ؛

من منظور التنفيذ الأساسي ، يقوم الخدمة باستدعاء المصنع وإرجاع حالته ؛ مزود مكالمات المصنع ، وإعادة المحتوى المحدد في GET $. تتشابه وظائف المصنع والخدمة ، باستثناء أن المصنع هو وظيفة طبيعية يمكنها إرجاع أي شيء (يمكن الوصول إلى الإرجاع ، لذا كيفية كتابة تلك المتغيرات الخاصة ، كما تعلمون) ؛ الخدمة عبارة عن مُنشئ لا يمكن إرجاعه (يمكن الوصول إلى تلك المرتبطة بهذا) ؛ المزود هو مصنع محسّن ، والذي يعيد مصنعًا قابل للتكوين.

انظر AngularJS Factory vs Service vs Provider

ما هي الآلية المستخدمة لربط البيانات الزاوي؟ وصف مفصل للمبدأ

آلية التفتيش القذرة.

ربط البيانات ثنائية الاتجاه هو واحد من الآليات الأساسية لـ AngularJs. عندما يكون هناك أي تغيير بيانات في العرض ، سيتم تحديثه إلى النموذج. عندما يكون هناك أي تغيير بيانات في النموذج ، سيتم أيضًا تحديث العرض في وقت واحد. من الواضح أن هذا يتطلب مراقبة.

المبدأ هو أن Angular يقوم بإعداد قائمة انتظار استماع على نموذج النطاق للاستماع إلى تغييرات البيانات وتحديث العرض. في كل مرة يرتبط فيها كائن ما ، سيقوم AngularJS بإدخال ساعة $ في قائمة انتظار $ watch لاكتشاف ما إذا كانت هناك أي تغييرات في النموذج الذي يراقبه. عندما يتلقى المتصفح حدثًا يمكن معالجته بواسطة Context Angular ، سيتم تشغيل حلقة $ Digest ، مع اجتياز جميع ساعات $ وأخيراً تحديث DOM.

إعطاء الكستناء

<button ng click = "val = val+1"> قم بزيادة 1 </button>

عند النقر ، سيتم إنشاء عملية تحديث (يتم تشغيل حلقتين على الأقل من $ Digest)

اضغط على الزر

يتلقى المتصفح حدثًا ويدخل السياق الزاوي

تبدأ حلقة $ Digest في التنفيذ ، والاستعلام عما إذا كانت كل ساعة تتغير

منذ مراقبة $ مراقبة نطاق $.

لم يتم اكتشاف أي تغييرات في حلقة $ digest الجديدة

يستعيد المستعرض وحدة التحكم وتحديث DOM المقابلة للقيمة الجديدة لـ $ scope.val

يبلغ الحد الأعلى لحلقة $ Digest 10 مرات (يتم طرح استثناء بعد أكثر من 10 مرات لمنع حلقات لا حصر لها).

انظر البيانات ملزمة لـ AngularJS

اثنين من الواجهة الأفقية كتل A و B. إذا تم تشغيل حدث ما ، فما هي الطرق التي يمكن أن تعرفها؟ وصف مفصل للمبدأ

بمعنى آخر ، هذه المشكلة هي كيفية التواصل بين وحدات الواجهة الأفقية. هناك طريقتان ، إحداهما هي مشاركة الخدمات والآخر يعتمد على الأحداث.

الخدمات المشتركة

في Angular ، يمكن إنشاء كائن Singleton من خلال المصنع ، ويمكن حقن هذا الكائن في الوحدات النمطية A و B التي تحتاج إلى اتصال.

بناء على الأحداث

هناك طريقتان للقيام بذلك

الأول هو استخدام وحدة التحكم الأصل. في وحدة تحكم الطفل ، قم بإعداد حدث ($ EMIT) إلى وحدة تحكم الوالدين ، ثم استمع لأحداث ($ ON) في وحدة التحكم الأصل ، ثم البث (البث $) إلى وحدة تحكم الطفل. وبهذه الطريقة ، من خلال المعلمات التي يحملها الحدث ، يتم نشر البيانات من خلال وحدة تحكم الأصل وبين وحدات التحكم ذات المستوى نفسه.

النوع الثاني هو استخدام $ rootscope. كل تطبيق زاوي لديه نطاق الجذر $ rootscope بشكل افتراضي. نطاق الجذر في المستوى العلوي ، وهناك نطاقات على جميع المستويات معلقة منه. لذلك ، إذا كان Subcontroller يستخدم Rootscope $ مباشرة للبث وتلقي الأحداث ، فيمكن تحقيق التواصل بين أقرانهم.

انظر التواصل بين وحدات التحكم في AngularJS

كيف يجب أن يكون التطبيق الزاوي جيدًا؟

تقسيم بنية الدليل

للمشاريع الصغيرة ، يمكنك تنظيمها حسب نوع الملف ، مثل:

 CSSJS Controllers Models Filters Services

ومع ذلك ، بالنسبة للمشاريع الكبيرة ، من الأفضل تقسيمها وفقًا للوحدات النمطية التجارية ، مثل:

 CSSMODULES ACTORT Controllers Models Services Filters Templates Disk Controllers Models Filters Services Services Filters

من الأفضل أن يكون لديك دليل مشترك تحت وحدات لتخزين الأشياء العامة.

تقسيم الكود المنطقي

كإطار MVVM ، يجب تقسيم التطبيقات الزاوية وفقًا للنموذج ، ونموذج العرض (وحدة التحكم) ، ووجهات النظر.

يشير تقسيم رمز المنطق هنا بشكل أساسي إلى محاولة جعل طبقة وحدة التحكم رقيقة قدر الإمكان. استخراج المنطق المشترك في الخدمة (مثل طلبات بيانات الخلفية ، ومشاركة البيانات وذاكرة التخزين المؤقت ، والاتصالات بين الوحدات القائمة على الحدث ، وما إلى ذلك) ، واستخراج عمليات الواجهة المشتركة في التوجيه (مثل اختيار تاريخ التخطيط ، والترحيل ، وما إلى ذلك في المكونات ، وما إلى ذلك) ، استخراج عمليات التنسيق المشترك في مرشح ، وما إلى ذلك ، إلخ.

في التطبيقات المعقدة ، يمكن أيضًا إنشاء منشئات المقابلة للكيانات ، مثل وحدة القرص الثابت (القرص) ، والتي قد تحتوي على عدة طرق عرض مثل القائمة ، والإنشاء الجديد ، والتفاصيل ، ووحدات التحكم المقابلة على التوالي. بعد ذلك ، يمكن إنشاء مُنشئ القرص لإكمال عمليات الإضافة والحذف والتعديل والتحقق. إذا كان هناك وحدة تحكم متعلقة بالقرص ، يتم حقن مُنشئ القرص في مُنشئ القرص ويتم إنشاء مثيل. يحتوي هذا المثيل على طرق إضافة وحذف وتعديل والتحقق. هذا ليس لديه طبقات واضحة فحسب ، بل يدرك أيضًا إعادة الاستخدام (مما يجعل طبقة وحدة التحكم أرق).

ارجع إلى الممارسة المتعمقة لـ AngularJs في مركز السحابة

ما هي مكتبات التوجيه التي تستخدم عادة للتطبيقات الزاوية وما هي خلافاتها؟

يتم استخدام ngroute و ui.router بشكل شائع في Angular1.x ، وهناك أيضًا جهاز توجيه جديد (موجه نحو المكون) مصمم لـ Angular2. لم يتم استخدام المشروع الذي يتخلف عن المشروع الفعلي ، لذلك لن أتحدث عنه.

سواء كان ngroute أو ui.router ، كميزة إضافية إضافية للإطار ، يجب إدخالها في شكل تبعيات الوحدة النمطية.

الفرق

وحدة Ngroute هي وحدة توجيه زاوي ، في حين أن وحدة UI.Router هي وحدة طرف ثالث تم تطويرها على أساس وحدة Ngroute.

تعتمد ui.router على الحالة (الحالة) ، ويستند ngroute على عنوان URL ، ووحدة ui.router لها وظائف أكثر قوة ، تنعكس بشكل أساسي في جوانب التعشيش للآراء.

استخدم ui.Router لتحديد الطرق ذات العلاقات الودية والطفل الواضحة ، وإدراج قوالب توجيه الطفل في <Div U-View> </div> لقالب توجيه الوالدين من خلال توجيهات عرض واجهة المستخدم ، وبالتالي تحقيق التعشيش. لا يمكن تعريف هذا في ngroute. إذا تم استخدام <div ng-view> </viv> في عرض الوالدين والطفل في نفس الوقت ، فسوف يقع في حلقة ميتة.

مثال

ngroute

 var app = Angular.module ('ngrouteapp' ، ['ngroute']) ؛ app.config (function ($ routeprovider) {$ routeprovider. when ('/main' ، {templateurl: "main.html" ، controller: 'mainctrl'}).

ui.router

 var app = Angular.module ("uirouteapp" ، ["ui.router"]) ؛ app.config (وظيفة ($ urlrouterprovider ، $ stateProvider) {$ urlrouterprovider.OldIwERIS ("/index") ؛ $ stateProvider .State ("main" ، {url: "main" 'mainctrl'})

إذا كنت تخطط لنظام المكونات بالكامل من خلال التوجيه الزاوي ، فما هي التحديات التي قد تواجهها؟

لم أقم مطلقًا بمجموعة كاملة من المكونات بتوجيه بنفسي ، لذلك لا يمكنني شرح ذلك.

شيء واحد يمكن التفكير فيه هو كيفية تفاعل المكونات مع العالم الخارجي وكيف يمكن استخدامها من خلال التكوين البسيط.

التطبيقات الزاوية التي طورتها فرق مختلفة. إذا كنت ترغب في دمجها ، فما هي المشكلات التي يمكن مواجهتها وكيفية حلها؟

يمكن مواجهة الصراعات بين الوحدات المختلفة.

على سبيل المثال ، يتم تنفيذ جميع تطورات فريق واحد تحت Modulea ، بينما يتم تنفيذ الكود الذي تم تطويره من قبل فريق آخر بموجب ModuleB

 angular.module ('myapp.modulea' ، []).

سيؤدي ذلك إلى كتابة Servicea تحت وحدتين.

يبدو أنه لا يوجد حل جيد في Angular1.x ، لذلك من الأفضل إجراء تخطيط موحد في المرحلة المبكرة ، وإبرام الاتفاقات ، والتطور بشكل صارم وفقًا للاتفاقية. كل مطور يكتب فقط رمز كتلة محدد.

ما هي عيوب الزاوي؟

قيود قوية

هذا يؤدي إلى ارتفاع تكاليف التعلم وهو غير ودي في الواجهة الأمامية.

ولكن عند اتباع اتفاقيات AngularJS ، ستكون الإنتاجية عالية وصديقة للمبرمجين Java.

لا يفضي إلى كبار المسئولين الاقتصاديين

نظرًا لأن جميع المحتوى يتم الحصول عليه ديناميكيًا وتقديمه ، فإن محركات البحث لا يمكنها الزحف.

أحد الحلول هو أنه من أجل الوصول إلى المستخدم العادي ، يستجيب الخادم لمحتوى تطبيق AngularJS ؛ للوصول إلى محرك البحث ، يستجيب لصفحات HTML خصيصًا لكبار المسئولين الاقتصاديين.

قضايا الأداء

نظرًا لأن إطار عمل MVVM ، لأنه يتم تنفيذ الربط ثنائي الاتجاه للبيانات ، ستكون هناك مشاكل في الأداء للمصفوفات الكبيرة والكائنات المعقدة.

الطرق التي يمكن استخدامها لتحسين أداء التطبيقات الزاوية:

تقليل عناصر المراقبة (مثل الربط في اتجاه واحد للبيانات التي لا تتغير)

قم بتعيين الفهرس بنشاط (حدد المسار بواسطة ، الأنواع البسيطة ، تستخدم نفسها كفهرس افتراضيًا ، وتستخدم الكائنات $$ Hashkey افتراضيًا ، على سبيل المثال ، التغيير إلى تتبعه بواسطة item.id)

قلل من كمية البيانات المقدمة (مثل الترحيل ، أو جلب جزء صغير من البيانات في كل مرة ، واستردادها حسب الحاجة)

تسطيح البيانات (على سبيل المثال ، بالنسبة لهياكل الأشجار ، استخدم هياكل التسطيح لإنشاء بيانات خريطة وشجرة. عند التشغيل على الشجرة ، نظرًا لأن نفس مرجع البيانات المسطحة ، سيتم مزامنة بيانات الشجرة مع البيانات المسطحة الأصلية)

بالإضافة إلى ذلك ، بالنسبة لـ Angular1.x ، هناك مشاكل في التحقق القذر وآلية الوحدة النمطية.

متحرك

يمكن تجربة الأيوني ، لكنها ليست مثالية.

كيف يمكن عرض وجهة نظر بيتر بول كوخ على Angular في يناير 2015؟

كيف يمكنك عرض وحدة التحكم على أنها بناء جملة تم إدخالها في Angular 1.2؟

فائدة أساسية

قبل Angular 1.2 ، كان أي ارتباط على العرض مرتبطًا مباشرة بنطاق $

 وظيفة myctrl ($ scope) {$ scope.a = 'aaa' ؛ $ scope.foo = function () {...}}

باستخدام وحدة التحكم ، لا حاجة لحقن نطاق $ مرة أخرى ، تصبح وحدة التحكم كائن JavaScript بسيط للغاية (POJO) ، عرض ViewModel أكثر نقية.

 وظيفة myctrl () {// استخدم VM لالتقاط هذا لتجنب الوظائف الداخلية التي تسبب السياق لتغيير عند استخدام هذا var vm = this ؛ vm.a = 'aaa' ؛}

مبدأ

من وجهة نظر تنفيذ التعليمات البرمجية المصدر ، يقوم Syntax ControlerAs فقط بإنشاء سمة على نطاق $ مع AS الاسم المستعار على سبيل المثال لكائن وحدة التحكم.

 if (Areadive.controlleras) {السكان المحليون. $ SCOPE

ومع ذلك ، بالإضافة إلى جعل وحدة التحكم أكثر من Pojo المذكورة أعلاه ، يمكنك أيضًا تجنب مواجهة حفرة تتعلق بنطاق AngularJS (أي ، الحفرة التي يولد فيها ng-if نطاق المستوى الأول ، والذي يعد في الواقع حفرة في وراثة من الوسيلة التي لا يمكن أن تكون هناك ما يشير إلى الجاهمة ، مما لا يتجهاة إلى العصر ، لا يمكن أن يكون هناك ما يشير إلى الجاهمة. موجود).

 <div ng-controller = "testctrl as vm"> <p> {{name}} </p> <div ng-if = "vm.name"> <input type = "text" ng-model = "vm.name"> </viv>

سؤال

إحدى المشكلات التي ستواجهها مع وحدة التحكم هي أنه نظرًا لعدم استخدام نطاق $ ، لا يمكن استخدام الأساليب تحت $ EMIT ، البث $ ، $ ON ، $ WATCH ، وما إلى ذلك. يمكن تغليف هذه العمليات المتعلقة بالحدث والتعامل معها بشكل موحد ، أو يتم تقديم نطاق $ في وحدة تحكم واحدة للعلاج الخاص.

وحدة التحكم الزاوي المرجعية كناء على النطاق

تفاصيل "حقن التبعية" لـ Angular

كستناء

حقن التبعية هو نمط لتصميم البرامج يهدف إلى التعامل مع التبعيات بين الرموز وتقليل الاقتران بين المكونات.

على سبيل المثال ، إذا كنت لا تستخدم AngularJS ، فقد تحتاج إلى القيام بذلك إذا كنت ترغب في الاستعلام عن البيانات من الخلفية وعرضها في الواجهة الأمامية:

 var animalbox = document.queryselector ('. animal-box') ؛ var httprequest = {get: function (url ، callback) {console.log (url + 'requested') ؛ var leimations = ['cat' ، 'Dog' ، 'Rabbit'] ؛ رد الاتصال (الحيوانات) ؛ }} var render = function (el ، http) {http.get ('/api/eleusts' ، function (eleuts) {el.innerhtml = elevents ؛})} render (httprequest ، AnimalBox) ؛

ومع ذلك ، إذا لم يتم تمرير المعلمات عند استدعاء العرض ، مثل ما يلي ، سيتم الإبلاغ عن خطأ لأنه لا يمكن العثور على EL و HTTP (يتم تعريف التبعية ، ولن يتم العثور على التبعية تلقائيًا عند التشغيل)

يجعل()؛

// typeerror: لا يمكن قراءة خاصية "الحصول على" غير محدد

واستخدام AngularJS ، يمكنك القيام بذلك مباشرة

 وظيفة myctrl = ($ scope ، $ http) {$ http.get ('/api/eleuts').

بمعنى آخر ، عندما يتم تشغيل التطبيق Angular ، يتم استدعاء MyCtrl ويتم حقن اثنين من التبعيات ، و $ Scope و $ HTTP.

مبدأ

يقوم AngularJS بإصدار اسم خدمة التبعية من خلال اسم المعلمة للمُنشئ ، ويستخدم ToString () للعثور على السلسلة المقابلة المقابلة لهذه الوظيفة المحددة ، ثم يتم تحليلها للمعلمات (التبعيات) في الانتظام ، ثم يحصل على التبعية المقابلة في خريطة التبعية ، وتنقلها وتمرر.

لتبسيطها ، ربما يكون مثل هذا:

 var enject = {// تخزين تخزين التبعية تخزين العلاقة: {} ، // قم بتسجيل سجل التبعية: الدالة (الاسم ، المورد) {this.storage [name] = Resource ؛ } ، // تحليل التبعية وحل المكالمات: الدالة (الهدف) {var self = this ؛ var fn_args =/^function/s*[^/(]*/(/s*([^/)]*)/)/m ؛ var strip_comments = /((/////.* $)|(//// BUDAD/S/S/201***؟/*///) /)/mg ؛ fntext = target.toString (). استبدال (Strip_comments ، '') ؛ ArgDecl = fntext.match (fn_args) [1] .Split (/،؟/g) ؛ var args = [] ؛ ArgDecl.foreach (function (arg) {if (self.storage [arg]) {args.push (self.storage [arg]) ؛}}) الإرجاع () {target.apply ({} ، args) ؛ }}}

باستخدام هذا الحاقن ، يمكن استدعاء الكستناء السابق الذي لا يستخدم AngularJs بعد تعديله.

 enject.register ('el' ، AnimalBox) ؛ enject.register ('ajax' ، httprequest) ؛ reender = enject.Resolve (render) ؛ reender () ؛

سؤال

نظرًا لأن حاقن AngularJS يفترض أن اسم المعلمة للوظيفة هو اسم التبعية ، ثم البحث عن التبعية ، إذا تم حقن التبعية كما في الكستناء السابق ، بعد ضغط الكود (تتم إعادة تسمية المعلمات) ، لا يمكن العثور على التبعية.

 // function myctrl = ($ scope ، $ http) {...} // function myctrl = (a ، b) {...}

لذلك ، عادة ما يتم استخدام الطريقتين التاليتين لحقن التبعيات (هناك متطلبات للترتيب الذي تتم فيه إضافة التبعيات).

طريقة شرح الصفيف

 myapp.controller ('myctrl' ، ['$ scope' ، '$ http' ، function ($ scope ، $ http) {...}])

حقن $ صريح

 myapp.controller ('myctrl' ، myctrl) ؛ function myctrl = ($ scope ، $ http) {...} myctrl. $ enject = ['$ scope' ، '$ http'] ؛

تجديد

بالنسبة لحاوية DI ، يجب تضمين ثلاثة عناصر: تسجيل التبعيات ، وإعلان التبعيات ، واكتساب الأشياء.

في AngularJS ، يمكن لكل من الوحدة النمطية و $ توفير تسجيل التبعيات ؛ يمكن للحقن المدمج الحصول على كائنات (حقن التبعية تلقائيًا) ؛ إعلان التبعيات كما هو مذكور في السؤال السابق.

هنا الكستناء

 // للوحدة النمطية ، يتم تمرير أكثر من معلمة واحدة ، مما يعني إنشاء وحدة جديدة ، ومصفوفة فارغة تعني عدم الاعتماد على وحدات أخرى // هناك معلمة واحدة فقط (اسم الوحدة النمطية) ، مما يعني الحصول على الوحدة النمطية // تحديد myapp ، إضافة myapp.services كخدمة الاعتماد على module. angular.module ('myapp.services' ، []) // $ مزود لديه مصنع ، خدمة ، مزود ، قيمة ، ثابت // تحديد httpservicangular.module ('myapp.services').

الرجوع إلى

[AngularJS] تنفيذ حقن تبعية بسيط بنفسك

فهم الوحدات والحاقن في الزاوي ، أي حقن التبعية

حقن التبعية سيناريو التطبيق العملي في AngularJS

كيفية عرض Angular2

بالمقارنة مع Angular1.x ، قام Angular2 بتغييرات رائعة وهو تقريبًا إطارًا جديدًا.

استنادًا إلى TypeScript (والتي يمكن تطويرها باستخدام TypeScript) ، تكون أنواع اللغات القوية أكثر فائدة عندما تتعاون فرق المشروع على نطاق واسع.

تخصيص المكونات يحسن كفاءة التنمية والصيانة.

هناك أيضًا وحدات تدعم التحميل الديناميكي ، وأجهزة التوجيه الجديدة ، والدعم الأصلي للوعود ، إلخ.

إنه يلبي المعايير المستقبلية ويمتص مزايا الأطر الأخرى ، والتي تستحق التطلع إليها ، ولكن هناك أيضًا المزيد من الأشياء التي يجب تعلمها (ES Next ، TS ، RX ، إلخ).

ما سبق هو تجميع المعلومات لأسئلة مقابلة AngularJS. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لدعمكم لهذا الموقع!