อะไรคือความแตกต่างระหว่าง $ routeProvider และ $ stateProvider

โปรดอธิบายความแตกต่างระหว่าง$routeProviderและ$stateProviderใน AngularJS

แนวปฏิบัติที่ดีที่สุดคืออะไร

ทั้งสองทำงานเดียวกันกับที่ใช้สำหรับการกำหนดเส้นทางใน SPA (แอปพลิเคชันหน้าเดียว)

1. การกำหนดเส้นทางเชิงมุม - ต่อเอกสาร $ $ProProvider

URL สำหรับตัวควบคุมและมุมมอง (HTML partials) มันเฝ้าดู $ location.url () และพยายามแมปพา ธ ไปยังการกำหนดเส้นทางที่มีอยู่

HTML

<div ng-view></div>

แท็กด้านบนจะแสดงแม่แบบจาก$routeProvider.when()เงื่อนไขที่คุณกล่าวถึงใน.config(เฟสการกำหนดค่า) ของเชิงมุม

ข้อ จำกัด : -

• หน้าสามารถมีเพียงหนึ่งเดียวng-viewในหน้า
• หาก SPA ของคุณมีองค์ประกอบขนาดเล็กหลายรายการในหน้าเว็บที่คุณต้องการแสดงผลตามเงื่อนไขบางประการ$routeProviderล้มเหลว (เพื่อให้ได้ว่าเราจำเป็นต้องใช้คำสั่งเช่นng-include, ng-switch, ng-if, ng-showซึ่งมีลักษณะที่ดีที่จะมีพวกเขาในสปา)
• คุณไม่สามารถเชื่อมโยงระหว่างสองเส้นทางเช่นความสัมพันธ์ของผู้ปกครองและเด็ก
• คุณไม่สามารถแสดงและซ่อนส่วนหนึ่งของมุมมองโดยยึดตามรูปแบบ URL

2. ui-router - ต่อเอกสาร $ stateProvider

AngularUI Router เป็นโครงร่างการเราต์สำหรับ AngularJS ซึ่งช่วยให้คุณสามารถจัดระเบียบส่วนต่าง ๆ ของอินเทอร์เฟซของคุณให้เป็นเครื่องสถานะ UI-Router ถูกจัดระเบียบรอบ ๆ รัฐซึ่งอาจมีทางเลือกเป็นเส้นทางรวมถึงพฤติกรรมอื่น ๆ

การดูหลาย & ชื่อ

อีกคุณสมบัติที่ยอดเยี่ยมคือความสามารถในการมีมุมมอง UI หลายรายการในเทมเพลต

ในขณะที่หลายมุมมองแบบขนานเป็นคุณสมบัติที่มีประสิทธิภาพคุณมักจะสามารถจัดการอินเทอร์เฟซของคุณได้อย่างมีประสิทธิภาพมากขึ้นโดยซ้อนซ้อนของคุณviewและจับคู่มุมมองเหล่านั้นกับสถานะซ้อน

HTML

<div ui-view>
    <div ui-view='header'></div>
    <div ui-view='content'></div>
    <div ui-view='footer'></div>
</div>

ui-routerอำนาจส่วนใหญ่ของมันคือสามารถจัดการสถานะและมุมมองที่ซ้อนกัน

ข้อดี

• คุณสามารถมีหลายรายการui-viewในหน้าเดียว
• มุมมองที่แตกต่างกันสามารถซ้อนกันและรักษาโดยการกำหนดสถานะในขั้นตอนการกำหนดเส้นทาง
• เราสามารถมีความสัมพันธ์ของเด็กและผู้ปกครองได้ที่นี่เช่นเดียวกับการสืบทอดในรัฐและคุณสามารถกำหนดสถานะพี่น้อง
• คุณสามารถเปลี่ยนui-view="some"สถานะได้โดยใช้การกำหนดเส้นทางแบบสัมบูรณ์โดยใช้@ชื่อรัฐ
• อีกวิธีหนึ่งที่คุณสามารถกำหนดเส้นทางสัมพัทธ์ได้คือใช้@เพื่อเปลี่ยนui-view="some"เท่านั้น สิ่งนี้จะแทนที่ui-viewแทนที่จะตรวจสอบว่ามันซ้อนอยู่หรือไม่
• ที่นี่คุณสามารถใช้ui-srefเพื่อสร้างhrefURL แบบไดนามิกบนพื้นฐานของการURLกล่าวถึงในสถานะนอกจากนี้คุณยังสามารถให้สถานะพารามิเตอร์ในjsonรูปแบบ

สำหรับข้อมูลเพิ่มเติม Angular ui-router

เพื่อความยืดหยุ่นที่ดีขึ้นด้วยมุมมองแบบซ้อนต่างๆกับรัฐฉันต้องการให้คุณทำ ui-router

ng-Router ของแองกูลาร์นั้นURLsคำนึงถึงในขณะที่เราต์เส้นทาง UI-Router นั้นstatesนอกจาก URL แล้ว

สถานะถูกผูกไว้กับมุมมองแบบซ้อนกันและขนานกันซึ่งอนุญาตให้คุณจัดการอินเตอร์เฟสของแอ็พพลิเคชันของคุณได้อย่างมีประสิทธิภาพ

ขณะที่อยู่ใน ng-router คุณจะต้องระมัดระวังเกี่ยวกับ URL เมื่อให้ลิงก์ผ่าน<a href="">แท็กใน UI-Router คุณต้องstateจำไว้เท่านั้น <a ui-sref="">คุณให้การเชื่อมโยงเช่น โปรดทราบว่าแม้ว่าคุณจะใช้<a href="">ใน UI-Router เช่นเดียวกับที่คุณทำใน ng-router มันจะยังคงทำงานได้

ดังนั้นแม้ว่าคุณจะตัดสินใจที่จะเปลี่ยน URL ของคุณบางวันของคุณstateจะยังคงเหมือนเดิมและคุณจำเป็นต้องเปลี่ยน URL .configเฉพาะที่

ในขณะที่สามารถใช้ ngRouter เพื่อสร้างแอพง่าย ๆ UI-Router ทำให้การพัฒนาง่ายขึ้นสำหรับแอพที่ซับซ้อน นี่คือวิกิ

$ route: นี้ใช้สำหรับการเชื่อมโยง URL ไปยังตัวควบคุมและมุมมอง (HTML partials) และเฝ้าดู $ location.url () เพื่อแมปเส้นทางจากคำจำกัดความของเส้นทางที่มีอยู่

เมื่อเราใช้ ngRoute เส้นทางจะถูกกำหนดค่าด้วย $ routeProvider และเมื่อเราใช้ ui-router เส้นทางจะถูกกำหนดค่าด้วย $ stateProvider และ $ urlRouterProvider

<div ng-view></div>
    $routeProvider
        .when('/contact/', {
            templateUrl: 'app/views/core/contact/contact.html',
            controller: 'ContactCtrl'
        });


<div ui-view>
    <div ui-view='abc'></div>
    <div ui-view='abc'></div>
   </div>
    $stateProvider
        .state("contact", {
            url: "/contact/",
            templateUrl: '/app/Aisel/Contact/views/contact.html',
            controller: 'ContactCtrl'
        });