سمات SRC و HREF
في AngularJS ، يجب كتابة SRC كـ NG-SRC ، ويجب كتابة HREF كـ NG-HREF على سبيل المثال:
نسخة الكود كما يلي:
<img ng-src = "/images/cats/{{sweeditecat}}">
<a ng-href = "/shop/category = {{number}}"> بعض النص </a>
تعبير
يمكن إجراء العمليات الرياضية البسيطة ، وعمليات المقارنة ، والعمليات المنطقية ، وعمليات البت ، والمصفوفات المرجعية ، ورموز الكائنات في القوالب. على الرغم من أنه يمكننا القيام بالكثير من الأشياء مع التعبيرات ، يتم تنفيذ التعبير باستخدام مترجم مخصص (جزء من Angular) ، بدلاً من استخدام وظيفة JavaScript Eval () ، لذلك يكون له قيود كبيرة.
على الرغم من أن التعبيرات هنا أكثر صرامة من JavaScript بطرق عديدة ، إلا أنها تتمتع بتسامح خطأ أفضل مع غير محدد و Null. إذا تمت مواجهة خطأ ، فإن القالب لا يظهر ببساطة شيئًا ولا يرمي خطأ NullPointerException. على سبيل المثال:
نسخة الكود كما يلي:
<div ng-controller = 'somecontroller'>
<viv> {{computer () /10}} < /div> // على الرغم من أنه قانوني ، إلا أنه يضع منطق العمل في القالب ، ويجب تجنب هذا النهج
</div>
التمييز بين مسؤوليات واجهة المستخدم ومسؤوليات وحدة التحكم
يرتبط وحدة التحكم بشظية DOM محددة ، وهو ما يحتاجون إلى إدارته. هناك طريقتان رئيسيتان لربط وحدة التحكم في عقدة DOM. يتم إعلان واحد من خلال السيطرة على NG في القالب ، والثاني هو ربطه بشظية قالب DOM محمّل ديناميكيًا من خلال التوجيه. هذا القالب يسمى عرض. يمكننا إنشاء وحدات تحكم متداخلة ، ويمكنهم مشاركة نموذج البيانات والوظائف من خلال ورث بنية الأرقام. يحدث التعشيش الحقيقي على كائن نطاق $. من خلال آلية الميراث الأصلي الداخلي ، سيتم تمرير نطاق $ لكائن وحدة التحكم الأصل إلى نطاق $ المتداخل الداخلي (جميع الخصائص ، بما في ذلك الوظائف). على سبيل المثال:
نسخة الكود كما يلي:
<div ng-controller = "parentController">
<div ng-controller = "childcontroller"> ... </div>
</div>
فضح بيانات النموذج باستخدام نطاق $
يمكنك عرض إنشاء سمة نطاق $ ، مثل $ scope.count = 5. يمكنك أيضًا إنشاء نماذج بيانات بشكل غير مباشر من خلال القالب نفسه.
تمرير التعبير. على سبيل المثال
نسخة الكود كما يلي:
<button ng click = 'count = 3'> set count to three </button>
باستخدام نموذج NG على عناصر النموذج
على غرار التعبير ، تعمل معلمات النموذج المحددة على النموذج NG أيضًا داخل وحدة التحكم الخارجية. الفرق الوحيد هو أن هذا ينشئ علاقة ربط ثنائية الاتجاه بين عنصر النموذج والنموذج المحدد.
مراقبة التغييرات في نماذج البيانات باستخدام المراقبة
توقيع الوظيفة لـ $ watch هو: $ watch (watchfn ، watchaction ، deepwatch)
WatchFN عبارة عن سلسلة مع تعبير زاوي أو دالة تقوم بإرجاع القيمة الحالية لنموذج البيانات المراقبة. WatchAction هي وظيفة أو تعبير يسمى عندما يتغير watchfn. توقيع وظيفته هو:
الوظيفة (NewValue ، OldValue ، Scope) DeepWatch إذا تم ضبطها على True ، فإن هذه المعلمة المنطقية الاختيارية ستتطلب Angular للتحقق مما إذا كانت كل خاصية من الكائن الذي تمت مراقبته قد تغيرت. إذا قمت بمراقبة قيمة بسيطة لمراقبة العناصر في الصفيف ، أو جميع السمات على الكائن ، بدلاً من القيم ، يمكنك استخدام هذه المعلمة. لاحظ أن يحتاج الزاوي إلى اجتياز المصفوفات أو الكائنات. إذا كانت المجموعة أكبر ، فستكون العملية أكثر تعقيدًا.
تُرجع وظيفة ساعة $ وظيفة. عندما لا تحتاج إلى تلقي إشعارات التغيير ، يمكنك استخدام الوظيفة التي تم إرجاعها لتسجيل الخروج من الشاشة.
إذا احتجنا إلى مراقبة خاصية ثم تسجيل الخروج من المراقبة ، فيمكننا استخدام الكود التالي: var dereg = $ scope. $ watch ('somemodel.someproperty' ، callbackOnchange ()) ؛
... Dereg () ؛
رمز المثال هو كما يلي:
نسخة الكود كما يلي:
<html ng-app>
<head>
<title> عربة التسوق الخاصة بك </title>
<script type = "text/javaScript">
وظيفة cartController (نطاق $) {
$ scope.bill = {} ؛
$ scope.items = [
{title: 'Paint Pots' ، الكمية: 8 ، السعر: 3.95} ،
{العنوان: 'Polka Dots' ، الكمية: 17 ، السعر: 12.95} ،
{title: 'pebbles' ، الكمية: 5 ، السعر: 6.95}
] ؛
$ scope.totalcart = function () {
var total = 0 ؛
لـ (var i = 0 ، len = $ scope.items.length ؛ i <len ؛ i ++) {
إجمالي = إجمالي + $ scope.items [i] .price * $ scope.items [i]. quantity ؛
}
إجمالي إرجاع
}
$ scope.subtotal = function () {
إرجاع $ scope.totalcart () - $ scope.bill.discount ؛
}
وظيفة calcustistiscount (newValue ، oldvalue ، النطاق) {
$ scope.bill.discount = newValue> 100؟ 10: 0 ؛
} // وظيفة WatchAction هنا
$ scope. $ watch ($ scope.totalcart ، calcustisticount) ؛ // وظيفة الساعة هنا
}
</script>
</head>
<body>
<div ng-controller = "cartController">
<div ng-repeat = 'عنصر في العناصر'>
<span> {{item.title}} </span>
<input ng-model = 'item.quantity'>
<span> {{item.price | العملة}} </span>
<span> {{item.price * item.quantity | العملة}} </span>
</div>
<viv> المجموع: {{totalCart () | العملة}} </div>
<div> الخصم: {{bill.discount | العملة}} </div>
<div> subtotal: {{subtotal () | العملة}} </div>
</div>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
</body>
</html>
الساعة أعلاه لديها مشاكل في الأداء. تم تنفيذ وظيفة calcutedtotals 6 مرات ، ثلاثة منها كانت بسبب كسر الحلقة. في كل مرة تم فيها حلقة الحلقة ، تم إعادة تقديم البيانات.
فيما يلي الرمز المعدل
نسخة الكود كما يلي:
<html ng-app>
<head>
<title> عربة التسوق الخاصة بك </title>
<script type = "text/javaScript">
وظيفة cartController (نطاق $) {
$ scope.bill = {} ؛
$ scope.items = [
{title: 'Paint Pots' ، الكمية: 8 ، السعر: 3.95} ،
{العنوان: 'Polka Dots' ، الكمية: 17 ، السعر: 12.95} ،
{title: 'pebbles' ، الكمية: 5 ، السعر: 6.95}
] ؛
var totalcart = function () {
var total = 0 ؛
لـ (var i = 0 ، len = $ scope.items.length ؛ i <len ؛ i ++) {
إجمالي = إجمالي + $ scope.items [i] .price * $ scope.items [i]. quantity ؛
}
$ scope.bill.totalcart = total ؛
$ scope.bill.discount = Total> 100؟ 10: 0 ؛
$ scope.bill.subtotal = total - $ scope.bill.discount ؛
}
$ scope. $ watch ('العناصر' ، TotalCart ، true) ؛ // فقط استخدم Watch لتغيير العناصر
}
</script>
</head>
<body>
<div ng-controller = "cartController">
<div ng-repeat = 'عنصر في العناصر'>
<span> {{item.title}} </span>
<input ng-model = 'item.quantity'>
<span> {{item.price | العملة}} </span>
<span> {{item.price * item.quantity | العملة}} </span>
</div>
<div> المجموع: {{bill.totalcart | العملة}} </div>
<div> الخصم: {{bill.discount | العملة}} </div>
<div> subtotal: {{bill.subtotal | العملة}} </div>
</div>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
</body>
</html>
بالنسبة إلى صفائف ITM الكبيرة ، إذا تم إعادة حساب سمة الفاتورة فقط في كل مرة يتم فيها عرض الصفحة باللغة الزاوية ، فسيكون الأداء أفضل بكثير. يمكننا تحقيق ذلك من خلال إنشاء وظيفة ساعة $ مع WatchFN.
نسخة الكود كما يلي:
$ scope. $ watch (
var totalcart = function () {
var total = 0 ؛
لـ (var i = 0 ، len = $ scope.items.length ؛ i <len ؛ i ++) {
إجمالي = إجمالي + $ scope.items [i] .price * $ scope.items [i]. quantity ؛
}
$ scope.bill.totalcart = total ؛
$ scope.bill.discount = Total> 100؟ 10: 0 ؛
$ scope.bill.subtotal = total - $ scope.bill.discount ؛
}) ؛
مراقبة أشياء متعددة
إذا كنت ترغب في مراقبة خصائص أو كائنات متعددة وتنفيذ وظيفة عندما يتغير أي منها ، فلديك خياران أساسيان:
مراقبة القيم بعد توصيل هذه الخصائص
ضعها في صفيف أو كائن ، ثم تمرير قيمة إلى معلمة DeepWatch
اشرح بشكل منفصل:
في الحالة الأولى ، إذا كان هناك كائن أشياء في نطاقك ، فإنه يحتوي على خصوتين A و B ، وعندما تتغير كلتا الخصيتين ، تحتاج إلى تنفيذ وظيفة CallMe () ، يمكنك مراقبة هاتين الخصائص في نفس الوقت $. watch ('Things.A + Things.B' ، callme (...) ؛
عندما تكون القائمة طويلة جدًا ، تحتاج إلى كتابة وظيفة لإرجاع القيمة بعد الاتصال.
في الحالة الثانية ، تحتاج إلى مراقبة جميع خصائص الأشياء ، يمكنك القيام بذلك:
نسخة الكود كما يلي:
$ scope. $ watch ('Things' ، callme (...) ، true) ؛
تنظيم التبعيات باستخدام الوحدة النمطية
الموفر (الاسم أو الكائن أو المنشئ ()) الوصف: خدمة قابلة للتكوين ، فإن إنشاء المنطق معقد نسبيًا. إذا قمت بتمرير كائن كمعلمة ، فيجب أن يكون لكائن الكائن وظيفة تسمى $ GET ، والتي تحتاج إلى إرجاع اسم الخدمة. خلاف ذلك ، سوف يعتقد AngularJS أنه عند مرور مُنشئ ، فإن الاتصال بالمقدم سيعيد كائن مثيل الخدمة.
المصنع (الاسم ، $ get function ()) الوصف: خدمة غير قابلة للتكوين ، فإن منطق الإنشاء معقد نسبيًا. تحتاج إلى تحديد وظيفة ، وعندما يتم استدعاء هذه الوظيفة ، سيتم إرجاع مثيل الخدمة. يمكن اعتباره شكل مزود (الاسم ، {$ get: $ getFunction ()}).
Service (Name ، Constructor ()) هي خدمة غير قابلة للتكليف ، فإن إنشاء المنطق بسيط نسبيًا. على غرار المعلمة المنشئ لوظيفة الموفر أعلاه ، يستدعي Angular ذلك لإنشاء مثيل خدمة.
مثال على استخدام مصنع الوحدة النمطية
نسخة الكود كما يلي:
<html ng-app = 'ShoppingModule'>
<head>
<title> عربة التسوق الخاصة بك </title>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<script type = "text/javaScript">
var ShoppingModule = Angular.Module ('ShoppingModule' ، []) ؛
ShoppingModule.Factory ('العناصر' ، الدالة () {
VAR heads = {} ؛
items.query = function () {
يعود [
{العنوان: 'Paint Pots' ، الوصف: "الأواني المليئة بالطلاء" ، السعر: 3.95} ،
{العنوان: 'Paint Pots' ، الوصف: "الأواني المليئة بالطلاء" ، السعر: 3.95} ،
{العنوان: "أواني الطلاء" ، الوصف: "الأواني المليئة بالطلاء" ، السعر: 3.95}
] ؛
} ؛
إرجاع العناصر ؛
}) ؛
وظيفة التسوق Controller (نطاق $ ، العناصر) {
$ scope.items = items.query () ؛
}
</script>
</head>
<body ng-controller = 'ShoppingController'>
<h1> متجر !! </h1>
<griding>
<tr ng-repeat = 'عنصر في العناصر'>
<td> {{item.title}} </td>
<td> {{item.description}} </td>
<td> {{item.price | العملة}} </td>
</r>
</table>
</body>
</html>
تقديم وحدات الطرف الثالث
في معظم التطبيقات ، قم بإنشاء وحدة نمطية واحدة لجميع التعليمات البرمجية ووضع جميع التبعيات في هذه الوحدة ، والتي ستعمل بشكل جيد. ومع ذلك ، إذا كنت تخطط لاستخدام الخدمات أو التعليمات التي توفرها حزم الطرف الثالث ، فإنها عادة ما تأتي مع وحداتها الخاصة ، وتحتاج إلى تحديد رعاية التبعية في وحدة التطبيق للإشارة إليها. على سبيل المثال:
var appmod = Angular.module ('app' ، ['snazzy' ، 'super']) ؛
أمثلة حول المرشح
نسخة الكود كما يلي:
<html ng-app = 'ShoppingModule'>
<head>
<title> عربة التسوق الخاصة بك </title>
<script type = "text/javaScript" src = "Angular.min.js"> </script>
<script type = "text/javaScript">
var ShoppingModule = Angular.Module ('ShoppingModule' ، []) ؛
ShoppingModule.filter ('Titlecase' ، function () {
var titlecasefilter = function (input) {
var words = input.split ('') ؛
لـ (var i = 0 ؛ i <words.length ؛ i ++) {
الكلمات [i] = الكلمات [0]. Charat (0) .ToupperCase () + الكلمات [i] .slice (1) ؛
}
إرجاع الكلمات. join ('') ؛
} ؛
إرجاع titlecasefilter ؛
}) ؛
وظائف التسوق Controller (نطاق $) {
$ scope.pageHeding = "هذه حالة اختبار" ؛
}
</script>
</head>
<body ng-controller = 'ShoppingController'>
<h1> {{pageDeading | TitleCase}} </h1>
</body>
</html>