ملخص مهارات التطبيق الزاوي

تتمثل الفكرة الأساسية لـ Angular في قيادة كل شيء من خلال البيانات ، وكل شيء آخر هو امتداد للبيانات.

لتطبيق فكرة أن كل شيء هو كائن ، يمكن قوله في Angular أن كل شيء هو بيانات.

حول بناء المشروع

(1) متطلبات و yeoman

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

(2) كيفية تنظيم هيكل المشروع

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

كلاهما على ما يرام ، ومن منظور الصيانة ، سيكون الثاني أفضل.

(3) قسم وحدة التحكم والخدمة

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

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

(4) استخدام المكونات والمكتبات الزاوية

من المؤكد أنه من غير الواقعي أن يكون مشروع ما جاهزًا للأشياء عبر الإنترنت ، ولكن من غير الواقعي أن تكتب كل شيء بنفسك. يتم تطوير العديد من المكونات الإضافية في الزاوي بواسطة فريق Angular أو بعض الأشخاص المغطاة بالمكونات الإضافية jQuery. وجهة نظري على المكونات الإضافية بسيطة للغاية. إذا كنت تستخدمها ، فيمكنك استخدامها في أقرب وقت ممكن. إذا لم تتمكن من تلبية الاحتياجات ، فيمكنك كتابتها بنفسك أو تحسينها على المكونات الإضافية الموجودة.

للحصول على المكونات الإضافية التي لا يمكنك التعامل معها لبضع ساعات من تصحيح الأخطاء ، يرجى الاستماع إلى نصيحتي والتخلي عنها. معظم المكونات الإضافية هي المكونات الإضافية ، لذلك ليس عليك متابعة التعقيد. في بعض الأحيان يكون عناصر التحكم في HTML بسيطة أيضًا جمالها البسيط.

إذا واجهت تضاربًا إضافيًا للمكون الإضافي ، وخاصة المكونات الإضافية للاتصالات ، يجب أن تتخلى عن أحدها في معظم الحالات ، مثل Angular-UI والحزام الزاوي.

نصائح الاستخدام

عند إدخال النص الرئيسي أدناه ، سأدرج بعض التقنيات التي استخدمتها في عملية استخدام Angular ، وسأدرجها واحدًا تلو الآخر في شكل مشهد. لن أشرح بعض المفاهيم الأساسية للزاوي هنا. هذه المقالة شيء ماهر ، وليس برنامج تعليمي أساسي.

(1) تعارض القارورة بين "{{}}" في الزاوي والبيثون

في القالب الذي يستخدمه قارورة Python ، يتم تمرير ربط البيانات أيضًا من خلال اثنين من الأقواس "{" ، والتي تتعارض مع ربط بيانات Angular. هناك حلان لهذا. أحدهما هو تعديل علامة الربط الزاوي ، والآخر هو تعديل علامة الربط القارورة. كلا الحلين ممنوعان هنا.

تعديل الزاوي:

$ interpolateprovider.startSymbol ('{[{'). endmolbol ('}]}') ؛

// فقط أضف هذه الجملة لتكوينها ووضعها في وحدة المسار. هنا يمكنك تغيير الزاوية الأصلية {{}} الربط إلى {[{}]} الربط إلى {[{}]} الربط.

تعديل القارورة:

 Class CustomFlask (flask): Jinja_options = flask.jinja_options.copy () jinja_options.update (dict (block_start_string = '{٪' ، block_end_string = '٪}' ، variable_start_string = '{#' COMMENT_END_STRING = '#>' ،)) app = customflask (__ name__ ، easty_path = '/web')

هنا أوصي بتعديل القارورة ، لأنه بعد استخدام Angular ، يتم فصل النهايات الأمامية والخلفية. لم يعد هناك حاجة إلى قالب Flask's Jinjia. في الوقت نفسه ، إذا قمت بتعديل علامة الربط الزاوي ، فستواجه عناصر التحكم والمكتبات الأخرى مشاكل.

(2) قم بإزالة عنوان URL دائمًا الافتراضيات إلى "#"

عند إعداد المسار ، تمكين وضع HTML5.

 Angular.Module ('Router' ، ['ngroute']). config (['$ routeprovider' ، '$ locationprovider' ، function ($ routeprovider ، $ locationprovider) {$ locationprovider.html5mode (true) ؛ // adence}]) ؛

(3) ng-click = "التعبير" والتعليمات المماثلة ، كيف تكتب تعبيرات متعددة في التعبير؟

على سبيل المثال ، إذا كنت أرغب في تعيين قيم إلى متغيرين في نقرة NG ، فيمكنني تقسيمها من خلال "؛" Semicolon:

<a ng click = "obja = 1 ؛ objb = 2"> </a>

(4) ساعة $ ليس لها أي تأثير أو تسري مفعولها مرة واحدة فقط

بشكل عام ، سيظهر هذا الموقف عند الاستماع إلى سلسلة أو رقم ، نطاق $. watch ("name" ، function () {}). لا يسري مفعوله أو يسري مرة واحدة فقط. يتمثل الحل في أن Watch $ تستمع إلى كائن قدر الإمكان ، وإرفاق القيمة التي تريد الاستماع إليها في كائن.

عند استخدام Modal في Angular-Ui ، يكون هذا أكثر وضوحًا. السبب المحدد هو بسبب ميراث نطاق $. نظرًا لأن الوسائط مكافئة لإنشاء نطاق آخر في وحدة التحكم في الصفحة الحالية ، فمن المستحيل استرداد وتتبع سلسلة النموذج الأولي للحرفية. إذا كنت ترغب في حلها ، فيجب أن يكون لديك كائن لتحقيق ارتباط تحديث البيانات عبر نطاق الوالدين والطفل من خلال سلسلة النموذج الأولي.

(5) آمل أن يتم عرض محتوى NG-View على الصفحة بأكملها

عادةً ما يكون للصفحة ثابتة من القائم على أعلى أو الشريط الجانبي ، مثل هذه الأجزاء الثابتة ، ثم يغير كل مسار قالب عرض NG-View. إذا أرادت صفحة ما أن تعرض الصفحة بأكملها نفسها تمامًا ، فإنها لا تتضمن أجزاء ثابتة مثل Top-Menu.

هنا عادةً ما يكون قالبًا. html يتم عرضه بواسطة index.html و NG-View. يوجد أعلى القائمون والشريط الجانبي في index.html. يتم إخفاء شاشة العرض عن طريق ربط متغير بـ NG-IF.

إذا احتاجت صفحة ما إلى عرضها بشكل كامل ولم يتم عرض الشريط الجانبي ، فسيتم إرسال رسالة في وحدة التحكم الخاصة بها من خلال نطاق $. بمجرد سماع الرسالة ، يتم تغيير المتغيرات التي تتحكم في الشريط الجانبي المرئي والمخفي.

يمكنك أيضًا استخدام الخدمة للتحكم في متغير عالمي ، ولا تزال التوصيات الشخصية من خلال بث الرسائل.

(6) تذكر استخدام NG-IF بدلاً من NG-Show

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

خذ قائمة. على سبيل المثال ، يوصي Angular عادة بعدم وجود ما يزيد عن 2000 بيانات. إذا كانت هناك صفحة تربط مباشرة 2000 نموذج ، ثم تقوم بتحميلها ، فستجد أنها عالقة للغاية. إذا قمت بتعيين كل 100 طراز على NG-Show ، فهذا لا يتم عرضه افتراضيًا ، فستجد أنه لا يزال عالقًا للغاية.

ثم يمكنك استبدال جميع NG-Show بـ NG-IF ، وستجد أن الأداء سريع على الفور مثل تطبيقين. والسبب هو أن NG-Show سيظل ينفذ جميع الارتباطات ، وسيقوم NG-If بتنفيذ الارتباطات عندما يكون مساوياً للصواب ، أي أنه سيقوم بتنفيذ الروابط عند عرضه. هذا سوف يحسن بشكل كبير الأداء. لقد استخدمت هذا التعديل البسيط من قبل ، وتم تحميل الصفحة أسرع حوالي 10 مرات.

لذلك عندما يمكنك استخدام NG-IF ، استخدمه بدلاً من كل NG-Show و NG-Hide.

(7) حول NG-bind-HTML

عادةً ما ترتبط البيانات بعناصر HTML ، و NG-bind كافية ، ولكن في بعض الحالات ، ما يجب ربطه ليس بيانات عادية ، ولكن HTML. ثم ng-bind لا يكفي. تحتاج إلى استخدام NG-Bind-HTML ، والذي سيؤدي إلى إخراج المحتوى كتنسيق HTML. على سبيل المثال ، إذا كنت ترغب في إخراج HTML مع الفصل ، فاستخدم NG-Bind-HTML ، ويكون تعاون NgSanitize مطلوبًا ، ويجب تقديم الملف المقابل.

(8) الحصول على النتيجة بعد تصفية بيانات التكرار NG

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

واحد مكتوب في HTML NG-Repeat مثل هذا:

ng-repeat = "food in foodcategory._displayfoods = (foodcategory.foods | filter: {'name': searchobj.foodfilter} | orderby: food.sort_order)"

وبهذه الطريقة ، _displayfoods هي نتيجة العرض النهائي بعد المرشح. هناك طريقة أخرى تتمثل في استخدام مجموعتين من البيانات ، يتم كتابة مجموعة واحدة في وحدة التحكم ، ثم يتم تشغيل Filter و Orderby في وحدة التحكم. يتم استخدام النتيجة النهائية لتكرار NG.

الطريقة الأولى أكثر ملاءمة ، في حين أن الطريقة الثانية أفضل والأداء جيد.

(9) تخصيص قيم NG-Class و NG من خلال الحكم

تحديد ما إذا كان سيتم تطبيق فئة معينة وأنماط مختلفة بناءً على قيمة المتغير.

ng-class = "{'State-error' :!

ng-style = "{color: i.color == '' || i.name == 'live'؟ '' الافتراضي": '#ffff'} "

(10) التحقق من النموذج يأخذ المدخلات كمثال

يمكن فحص النموذج الزاوي من خلال سمة HTML5 للإدخال. هنا ، يتم قفلها بشكل رئيسي من خلال سمات الاسم والاسم الإدخال. FormName.InputName. $ صالح يشير إلى ما إذا كانت المساحة التي يكون فيها الاسم يمرر اسم التحقق من السمة الخاصة به.

(11) وعد $ لمورد $ و http $

 $ Q.all ([Resource.query (). $ promise ، resource2.query (). $ promise]). foodfactory.food.get ({id: result.id}). $ promise.then (دالة (بيانات) {}) ؛}) ؛

لم يتم شرح هذا ، فقط اقرأه مباشرة. لاحظ أن وعد $ HTTP يحتاج إلى إرجاع يدويًا ، لذلك بشكل عام ، يمرر مورد $.

(12) خاصية واحدة فقط في ساعة $ تستمع إلى

قم بتعيين المعلمة الثالثة لـ $ watch إلى True to Deep Watch. ومع ذلك ، في بعض الأحيان لا تريد أو تحتاج إلى الاستماع إلى جميع خصائص المجموعة. ما عليك سوى مراقبة واحد أو العديد منهم ، على الرغم من أنه يمكنك حلقة $ من خلال حلقة For ، فمن الواضح أنها محبطة للغاية.

من خلال طريقة الكتابة التالية ، يمكنك مراقبة خاصية كائن واحد لمجموعة.

 $ scope.people = [{"groupname": "g1" ، "perfions": [{"{id": 1 ، "name": "bill"} ، {"id": 2 ، "name": "bill4"}]}] $ scope. $ watch (function ($ scope) {return $ scope.people.map (function (obj) {return obj.persions.map (function (g) {return g.name}) ؛} ، function (newval) {$ scope.count ++ ؛ حقيقي)؛

(13) Debounce علاج مكافحة الانتعاش

هذا مفيد للغاية لمعالجة المغادرة المتكررة وهو مناسب لبعض السيناريوهات مثل NG-Change و $ Watch. على سبيل المثال ، عند إلغاء البحث عن الكلمات الرئيسية ، يتم تغليف Debounce $ كخدمة ، ويتم استدعاء الواجهة مباشرة. الكود: http://jsfiddle.net/warspawn/6k7kd/

(14) تحديد موقع بسرعة إلى موقع

بشكل عام ، يمكن دمج الصفحة مع رمز JS لتحقيق المواقع السريعة من خلال النموذج <a id = "bottom"> </a>. في Angular ، يتم تنفيذها أيضًا من خلال مبادئ مماثلة ، والرمز كما يلي:

 var old = $ location.hash () ؛ $ location.hash ('batchmenu-bottom') ؛ $ ancorscroll () ؛ $ location.hash (old) ؛

وذلك لأن الموقع المباشر. سوف يتسبب Hash في تغييرات URL وتقفز الصفحات ، لذلك تتم إضافة رمز لمنع القفز.

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

ما سبق هو ملخص لمهارات التطبيق الزاوي. سنستمر في إضافة وتنظيم المقالات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!