ملخص تقنيات Angular التطبيقية

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

تطبيق فكرة أن كل شيء في Javascript هو عنصر، يمكن القول في angular أن كل شيء هو بيانات.

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

　　　 (1) requirejs و Yeoman

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

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

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

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

　　　 (3) تقسيم controller و service

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

　　　 فيما يتعلق بالخدمات، ما إذا كان يجب تقسيمها بناءً على الوظيفة والم模块، هذا يعتمد على المشروع.

　　　 (4) استخدام إضافات Angular و المكتبات

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

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

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

　 استخدام المهارات

　　　 دعنا ننتقل إلى النص الأساسي، سأقوم بشرح بعض المهارات التي استخدمتها أثناء استخدام angular، وسأقوم بشرحها على شكل سيناريوهات متتالية. هنا لن أشرح المفاهيم الأساسية لـ Angular، لأن هذا المقال يتناول أمورًا تقنية وليس تعليمية.

　　　 (1) تعارض "{{}}" في angular مع Python flask

　　　 في نماذج flask المستخدمة بلغة Python، يتم الترابط البياني من خلال زوجين من البكوتب العظيمة "{"، مما يتعارض مع الترابط البياني لـ angular. هناك طريقتان لحل هذه المشكلة، الأولى هي تعديل علامات الترابط في angular، والثانية هي تعديل علامات الترابط في flask، ويتم تقديم كلا الطريقتين هنا.

　　　 تعديل angular:

$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
// أضف هذا السطر في config،في module الخاص بالroute. هنا قمت بتعديل binding في angular الأصلي {{ }} إلى binding عبر {[{ }]}.　　　

　　　 تعديل flask:

class CustomFlask(Flask):
  jinja_options = Flask.jinja_options.copy()
  jinja_options.update(dict(
    block_start_string='{%',
    block_end_string='%}',
    variable_start_string='{#',
    variable_end_string='#}',
    comment_start_string='<#',
    comment_end_string='#>',
  ))
app = CustomFlask(__name__, instance_path='/web')

　　　 أوصي بتعديل flask،بما أنك تستخدم angular،فإنك قد قمت بفصل الأمام والخلف.جافا سكريبت لـ flask لا يعد مجرد احتياجًا،وإذا قمت بتعديل علامات التوصيل في Angular،قد يكون هناك مشاكل في التحكمات والكتبات الأخرى.

　　　 (2) إزالة "#" الموجود دائمًا في url

　　　 عند تعيين route،افتح نمط HTML5.

angular.module('router', ['ngRoute'])
.config(['$routeProvider', '$locationProvider',
 function($routeProvider, $locationProvider) {
  
 }
]
  

　　　 (3) كيفية كتابة العديد من التعبيرات في expression في ng-click="expression" و التعليمات الشبيهة?

　　　 على سبيل المثال،إذا كنت أريد في ng-click تخصيص قيمتين،من خلال استخدام فاصلة التسمية المثبتة ";".

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

　　　 (4) لم يكن $watch يعمل أو يعمل مرة واحدة فقط

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

　　　 عند استخدام modal في angular-ui، هذا واضح جدًا. السبب في ذلك هو الوراثة في $scope، لأن modal يقوم بإنشاء scope جديد في controller الحالي، لذا لا يمكن استرجاع القيم من السلسلة الأصلية، وللحصول على حل يجب وجود عنصر، يمكنه الوصول إلى البيانات عبر السلسلة الأصلية للتحقق من البيانات عبر الارتباطات بين scope الابن والأب.

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

　　　 عادة ما تكون هناك أجزاء ثابتة مثل top-menu أو sidebar في الصفحة، هذه الأجزاء الثابتة لا تتغير، وعند تغيير route، يتم تغيير template في ng-view، إذا كان هناك حاجة إلى عرض الصفحة بأكملها، دون أجزاء ثابتة مثل top-menu.

　　　 عادة ما يكون هناك index.html و template.html الذي يتم عرضه من خلال ng-view، ويتموضع top-menu و sidebar في index.html، ويتم التحكم في العرض والاختفاء من خلال ng-if وربط المتغير.

　　　 إذا كان هناك حاجة إلى عرض الصفحة بشكل كامل، دون عرض sidebar أو أي شيء آخر، يجب على controller من خلال $scope.$emit إرسال رسالة، ثم يجب على controller في صفحة index الاستماع إلى هذه الرسالة، وتبدأ في تغيير المتغير الذي يتحكم في عرض sidebar.

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

　　　 (6) تأكد من استخدام ng-if بدلاً من ng-show

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

　　　 لنأخذ مثالًا، على سبيل المثال، يُنصح angular بعدم تجاوز 2000 ارتباط بيانات لكل صفحة، إذا كان لديك صفحة تحتوي على 2000 model مرتبط مباشرة، عند تحميلها ستجد أنها بطيئة بشكل كبير. إذا قمت بتعيين كل 100 model إلى ng-show، بشكل افتراضي لا يتم عرضها، ستجد أن الأداء لا يزال بطيئًا.

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

　　　 لذا، في الحالات التي يمكن استخدام ng-if فيها، استخدمه بدلاً من ng-show و ng-hide.　　　

　　　 (7) حول ng-bind-html

　　　 عادةً يتم ربط البيانات مع عناصر HTML باستخدام ng-bind، ولكن في بعض الحالات، قد تحتاج إلى ربط غير البيانات العادية، بل HTML. في هذه الحالة، لا يكفي ng-bind، ويجب استخدام ng-bind-html، حيث سيتم عرض المحتوى كـ HTML. على سبيل المثال، إذا كنت ترغب في عرض HTML يحتوي على class، فعليك استخدام ng-bind-html، ويجب أيضًا استخدام ngSanitize، حيث يجب إدخال الملفات المناسبة.

　　　 (8) الحصول على نتيجة filter بعد ng-repeat

　　　 هذا يُستخدم غالبًا عند البحث، مثل قيام ng-repeat بإنشاء قائمة من البيانات. ثم يتم filter على حقل معين، والآن يتم الحصول على النتيجة بعد filter، هناك طريقتان.

　　　 أحد الطرق هو كتابة ng-repeat في html مثل هذا:

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

　　 بهذا يكون _displayfoods هو النتيجة النهائية بعد التحقق من filter. الطريقة الأخرى هي استخدام مجموعتين من البيانات، واحدة تُكتب في controller، ثم يتم filter و orderBy في controller، ويُستخدم النتيجة النهائية في ng-repeat.

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

　　　 (9) ng-class و ng-style يتم تحديدها بناءً على الحكم

　　　 يتم تحديد ما إذا كان يجب تطبيق某种 class بناءً على قيمة المتغير، وكذلك تطبيق أنواع النمط المختلفة.

　　　 ng-class="{'state-error':!foodForm.foodstock.$valid}"

　　　 ng-style="{ color: i.color=='' || i.name=='حي' ? 'default' : '#fff' }"

　　　 (10) مثال على التحقق من صحة form

　　　 يمكن للـ angular form التحقق من صحة input عبر خاصية HTML5، هنا يتم التركيز بشكل رئيسي على اسم attribute في form و input، ويُعبر عن ذلك بـ formname.inputname.$valid لتحديد ما إذا كان space المسمى inputname قد نجح في التحقق من صحة الخاصية الخاصة به.

　　　 (11) $resource و $http $promise

$q.all([
 resource.query().$promise,
 resource2.query().$promise
}).then(وظيفة (النجاح) {
 console.log(النجاح);
}, وظيفة (الخطأ) {
 console.log(الخطأ);
});
foodFactory.food.save(f).$promise.then(وظيفة (الناتج) {
 foodFactory.food.get({id:الناتج.الرقم}).$promise.then(وظيفة (البيانات) {
 });
});

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

　　　 (12) مراقبة خاصية collection واحدة باستخدام $watch فقط

　　　 عندما يتم تعيين الثالثة من $watch إلى true، يمكن القيام بمراقبة عميقة. ولكن في بعض الأحيان لا نريد أو لا نحتاج إلى مراقبة جميع خصائص collection. فقط مراقبة واحدة أو بعض منها، في هذه الحالة يمكن استخدام cycle for ولكن يبدو ذلك غير جيد.

　　　 من خلال هذا النوع من الكتابة يمكن مراقبة خاصية object الفردية في collection.

$scope.الناس = [
  {
    "اسم المجموعة": "g1", 
    "الشخصيات": [
      {
        "الرقم": 1, 
        "الاسم": "bill"
      }, 
      {
        "الرقم": 2, 
        "الاسم": "bill2"
      }
    ]
  }, 
  {
    "اسم المجموعة": "g2", 
    "الشخصيات": [
      {
        "الرقم": 3, 
        "الاسم": "bill3"
      }, 
      {
        "الرقم": 4, 
        "الاسم": "bill4"
      }
    ]
  }
]
$scope.$watch(وظيفة ($scope) {
  الرجوع $scope.الناس.map(وظيفة (obj) {
    الرجوع $scope.الناس.map(وظيفة (g) {
      الرجوع g.الاسم;
    });
  });
}, وظيفة (القيمة الجديدة) {
  $scope.العدد++;
  النطاق.الرسالة = 'اسم الشخص قد تغير' + $scope.العدد;
}, true);

　　　 (13) معالجة防抖 debounce

　　　 هذا مفيد جدًا في معالجة التصفح المتكرر، ويستخدم في مواقف مثل ng-change،$watch. على سبيل المثال، في مواقف البحث الفوري بناءً على الكلمات المفتاحية، يمكن تعبئة $debounce كخدمة وتشغيلها مباشرة من خلال واجهة الربط، الرابط: http://jsfiddle.net/Warspawn/6K7Kd/

　　　 (14) التوجيه السريع إلى موقع معين

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

 var old = $location.hash();
     $location.hash('batchmenu-bottom');
     $anchorScroll();
     $location.hash(old);

　　　 تم كتابة هذا لأن location.hash مباشرة يؤدي إلى تغيير url، والتحرك في الصفحة، لذا تم إضافة رمز منع التحرك.

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

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

بيان: محتويات هذا المقال مستمدة من الإنترنت، وتنتمي لصاحب الحقوق الأصلي، تم تقديمها من قبل مستخدمي الإنترنت بطرقهم الخاصة، لا يمتلك هذا الموقع حقوق الملكية، لم يتم تعديل المحتوى بشكل إنساني، ولا يتحمل المسؤولية القانونية المتعلقة بذلك. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لإبلاغنا، وقدم الأدلة ذات الصلة، إذا تم التحقق من ذلك، فإن هذا الموقع سينتفي بسرعة من المحتوى المزعوم.