في تعلم استخدام Angular ، تعتبر واجهة المستخدم واحدة من الصعوبات. لا توجد مشكلة في الاستخدام البسيط ، ولكن عندما يتعلق الأمر بالتعشيش متعدد المستويات ، أشعر بالارتباك. لقد بحثت عن الكثير من المعلومات وصعدت على العديد من المزالق. حتى الآن ، لا أستطيع أن أقول إن لدي فهم شامل لـ UI-Route ؛ هنا فقط أسجل الحفر القليلة التي ملأتها.
1. استخدام الملخص:
$ stateProvider .State ('Shop' ، {Resolve: {"ShopList": function ($ http) {return $ http ({url: "/bookapp/data/shoplist.php" ، method: وحدة التحكم: "ShopListController"})ما هو استخدام استخدام السمة التجريدية؟ الوصف الرسمي: الملخص: يشير True إلى أنه لا يمكن تنشيط هذه الحالة بشكل صريح ، ولا يمكن تنشيطها ضمنيًا إلا من خلال الحالة الفرعية. إذا لم تتمكن من التنشيط بشكل صريح ، فلا يمكنك الوصول إلى مسار الحالة هذا مباشرة من خلال "/Shop". أليس هذا طريق مسدود؟ ما الهدف من القيام بذلك؟ انتظر ، دعنا نلقي نظرة على الجملة التالية: يمكن تنشيطها مخفيًا في حالة اللحاف ، ويبدو أنه لا يزال من الممكن أن يكون على قيد الحياة. كيف يمكن أن تجعله يعيش؟ دعونا نلقي نظرة على الكود التالي:
.state('shop.main',{ url:"/:id", abstract: true, templateUrl:"templates/shop/main2.html", controller:"ShopMainController" })الدولة : "Shop.main" هو بديل للمتجر. وفقًا للنظرية ، يمكن لـ Shop.main تنشيط المتجر. نحتاج فقط إلى الوصول: /متجر /1 ، حتى نتمكن من تفعيل حالة المتجر و "shop.main"
دعونا لا نكون في عجلة من أمرك. سأضيف سمة مجردة للعب مع بعض الأشياء المثيرة. دعونا نلقي نظرة على الكود التالي في المستوى التالي:
.State ('Shop.main.info' ، {url: "" ، templateurl: "templates/shop/info.html" ، cache: 'false' ، controller: "infocontroller"}) .State ('shop.main.Author' ، )أرى أن الدولة "shop.main.info" لديها عنوان URL للدولة "" "لذلك نحن بحاجة فقط إلى الوصول إلى" متجر/1 "بهذه الطريقة جميع البدائل الافتراضية التي يمكن استخدامها كـ" Shop.main ".
في هذا الوقت ، فإن علاقة التعشيش للوحدة هي: list.html nested main.html ، main.html info.html. يمكننا تنشيط هذا التعشيش من ثلاث طبقات من خلال عنوان URL لـ "Shop/: id".
2. استخدام المعلمات في وحدة التحكم:
لا توجد صعوبة في هذا. حقن معلمة عنوان URL "$ stateparams" في وحدة التحكم ويمكنك الحصول عليها في هذا الكائن:
Shop.Controller ("ShopMainController" ، ['$ scope' ، '$ stateparams' ، '$ rootscope' ، function ($ scope ، $ stateparams ، $ rootscope) {$ scope.persons = [1،2،3،4،5،6] cfploadingbar.start () ؛}]) ؛3. كيفية منع ذاكرة التخزين المؤقت
أثناء عملية التطوير ، يؤثر ذاكرة التخزين المؤقت القالب على تصحيح أخطاءنا بشكل خطير. في بعض الأحيان يتم تعديل الكود ، لكن القالب لا يتغير على الإطلاق. إنه أمر محزن للغاية. نحتاج فقط إلى الاستماع إلى Statechangesuccess ثم مسح $ Templatecache. هنا نستخدم طريقة التشغيل لإضافة المستمع:
bookapp.run (['$ rootscope' ، '$ templatecache' ، function ($ rootscope ، $ templatecache) {var statechangesuccess = $ rootscope. $ on ('$ atatechangesuccess' ، atatechangesuccess) ؛ functionSchangesucscess ($ rootscope)ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا لتعلم الجميع.