ความแตกต่างระหว่างแองกูลาร์ - รูทและแองกูลาร์ - UI-router คืออะไร?

ฉันวางแผนที่จะใช้AngularJSในแอปพลิเคชันขนาดใหญ่ของฉัน ดังนั้นฉันจึงอยู่ในขั้นตอนหาโมดูลที่เหมาะสมที่จะใช้

ความแตกต่างระหว่างโมดูล ngRoute (angular-route.js)และui-router (angular-ui-router.js)คืออะไร?

ในหลายบทความเมื่อngRouteจะใช้เส้นทางที่ถูกกำหนดค่าด้วย$ routeProvider แต่เมื่อนำมาใช้กับUI เตอร์เส้นทางการกำหนดค่ากับ$ stateProvider และ $

ฉันควรใช้โมดูลใดเพื่อความสามารถในการจัดการและการขยายที่ดีขึ้น

ui-routerเป็นโมดูลของบุคคลที่สามและมีประสิทธิภาพมาก รองรับทุกสิ่งที่ ngRoute ปกติสามารถทำได้รวมถึงฟังก์ชั่นพิเศษมากมาย

นี่คือเหตุผลทั่วไปบางประการที่เลือก ui-router มากกว่า ngRoute:

• UI เตอร์ช่วยให้มุมมองที่ซ้อนกันและมุมมองหลายชื่อ สิ่งนี้มีประโยชน์มากกับแอพขนาดใหญ่ที่คุณอาจมีเพจที่สืบทอดมาจากส่วนอื่น ๆ

• ui-router ช่วยให้คุณมีการเชื่อมโยงที่แข็งแกร่งชนิดระหว่างรัฐตามชื่อรัฐ เปลี่ยน URL ui-srefในสถานที่หนึ่งจะอัปเดตทุกเชื่อมโยงไปยังรัฐที่ว่าเมื่อคุณสร้างการเชื่อมโยงของคุณด้วย มีประโยชน์มากสำหรับโครงการขนาดใหญ่ที่อาจเปลี่ยน URL

• นอกจากนี้ยังมีแนวคิดของมัณฑนากรซึ่งสามารถใช้เพื่ออนุญาตเส้นทางของคุณในการสร้างแบบไดนามิกตาม URL ที่พยายามเข้าถึง นี่อาจหมายความว่าคุณไม่จำเป็นต้องระบุเส้นทางทั้งหมดก่อนถึงมือ

• รัฐช่วยให้คุณสามารถ map $stateParamsและเข้าถึงข้อมูลที่แตกต่างกันเกี่ยวกับสถานะที่แตกต่างกันและคุณสามารถส่งผ่านข้อมูลระหว่างรัฐผ่าน

• คุณสามารถตรวจสอบว่าคุณอยู่ในสถานะหรือผู้ปกครองของรัฐในการปรับองค์ประกอบ UI (การเน้นการนำของรัฐในปัจจุบัน) ภายในแม่แบบของคุณผ่านทาง$stateให้โดย UI เราเตอร์ที่คุณสามารถสัมผัสผ่านการตั้งค่าไว้ในบน$rootScoperun

ในสาระสำคัญ ui-router เป็น ngRouter พร้อมคุณสมบัติเพิ่มเติมภายใต้แผ่นมันแตกต่างกันมาก คุณสมบัติเพิ่มเติมเหล่านี้มีประโยชน์มากสำหรับแอปพลิเคชันขนาดใหญ่

ข้อมูลมากกว่านี้:

• Github: https://github.com/angular-ui/ui-router
• เอกสารอ้างอิง:
  • การอ้างอิง API: http://angular-ui.github.io/ui-router/site/#/api
  • คู่มือ: https://github.com/angular-ui/ui-router/wiki
• คำถามที่พบบ่อย: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
• แอปพลิเคชันตัวอย่าง: http://angular-ui.github.io/ui-router/sample/#/

ngRouteเป็นโมดูลที่พัฒนาโดยทีม AngularJS ซึ่งก่อนหน้านี้เป็นส่วนหนึ่งของแกน AngularJS

ui-routerเป็นเฟรมเวิร์กที่สร้างขึ้นนอกโครงการ AngularJS เพื่อปรับปรุงและเพิ่มความสามารถในการกำหนดเส้นทาง

จาก UI-เราเตอร์เอกสาร :

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

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

ทั้งสองอย่างนั้นดีกว่าคุณจะต้องเลือกสิ่งที่เหมาะสมที่สุดสำหรับโครงการของคุณ

อย่างไรก็ตามหากคุณวางแผนที่จะมีมุมมองที่ซับซ้อนในแอปพลิเคชันของคุณและคุณต้องการจัดการกับแนวคิด "$ state" ฉันแนะนำให้คุณเลือก ui-router

ngRoute เป็นโมดูลแกนเชิงมุมที่ดีสำหรับสถานการณ์พื้นฐาน ฉันเชื่อว่าพวกเขาจะเพิ่มคุณสมบัติที่มีประสิทธิภาพมากขึ้นในรุ่นใหม่

URL: https://docs.angularjs.org/api/ngRoute

Ui-router เป็นโมดูลที่สนับสนุนซึ่งเอาชนะปัญหาของ ngRoute มุมมองซ้อน / เป็นส่วนใหญ่ซับซ้อน

URL: https://github.com/angular-ui/ui-router

ความแตกต่างบางอย่างระหว่าง ui-router และ ngRoute

http://www.amasik.com/angularjs-ngroute-vs-ui-router/

ngRoute เป็นส่วนหนึ่งของกรอบ AngularJS หลัก

ui-router เป็นไลบรารีชุมชนที่สร้างขึ้นเพื่อพยายามปรับปรุงตามความสามารถในการกำหนดเส้นทางเริ่มต้น

นี่เป็นบทความที่ดีเกี่ยวกับการกำหนดค่า / การตั้งค่า ui-router:

http://www.ng-newsletter.com/posts/angular-ui-router.html

หากคุณต้องการใช้ประโยชน์จากฟังก์ชั่นการซ้อนมุมมองที่นำมาใช้ภายในกระบวนทัศน์ ngRoute ลองใช้เชิงมุม - เซกเมนต์ - มันมีจุดมุ่งหมายที่จะขยาย ngRoute แทนการแทนที่

โดยทั่วไป ui-router ทำงานบนกลไกสถานะ ... มันสามารถเข้าใจได้ด้วยตัวอย่างง่าย ๆ :

สมมติว่าเรามีคลังเพลงขนาดใหญ่ (เช่น ..gaana หรือ saavan หรืออื่น ๆ ) และที่ด้านล่างของหน้าคุณมีเครื่องเล่นเพลงที่ใช้ร่วมกันในทุกสถานะของหน้า

ตอนนี้สมมติว่าคุณคลิกที่เพลงเพื่อเล่น ในกรณีนี้เฉพาะสถานะเครื่องเล่นเพลงที่ควรเปลี่ยนแทนการโหลดหน้าเต็ม ที่สามารถจัดการได้อย่างง่ายดายโดย ui-router

ในขณะที่อยู่ใน ngRoute เราเพิ่งแนบมุมมองและคอนโทรลเลอร์

1.x เชิงมุม

ng-route :

ng-route พัฒนาโดยทีมงาน angularJS สำหรับการกำหนดเส้นทาง

ng-route: การกำหนดเส้นทางตาม url (ตำแหน่ง)

Ex:

$routeProvider
    .when("/home", {
        templateUrl : "home.html"
    })

เส้นทาง ui :

ui-router ถูกพัฒนาโดยโมดูลของบุคคลที่สาม

ui-router: การกำหนดเส้นทางตามสถานะ

Ex:

 $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        })

-> ui-router อนุญาตให้ใช้มุมมองแบบซ้อน

-> ui-router มีประสิทธิภาพมากกว่า ng-route

ng-router , ui-router

ngRoute เป็นโมดูลที่สร้างขึ้นโดยทีม Angular ที่มีฟังก์ชันการกำหนดเส้นทางฝั่งไคลเอ็นต์ขั้นพื้นฐาน โมดูลนี้มีฐานที่มีประสิทธิภาพพอสมควรสำหรับการกำหนดเส้นทางและสามารถสร้างขึ้นได้อย่างง่ายดายเพื่อให้ฟังก์ชั่นการจัดเส้นทางที่มั่นคงดังตัวอย่างในบล็อกโพสต์นี้ (อย่าลืมอ่านความคิดเห็นระหว่าง Ward Bell และ Ben Nadel ผู้เขียน คู่ของข้อดีเชิงมุม)

ui-router เปลี่ยนโฟกัสจากเส้นทาง url-centric ไปยังแอปพลิเคชั่น "สถานะ" ซึ่งอาจจะสะท้อนหรือไม่สะท้อนใน url

คุณสมบัติหลักที่เพิ่มโดย ui-router คือสถานะซ้อนและมุมมองที่ตั้งชื่อ

สถานะแบบซ้อนช่วยให้คุณสามารถแยกตรรกะของตัวควบคุมสำหรับชิ้นส่วนต่าง ๆ ของแอปพลิเคชัน ตัวอย่างง่ายๆนี้เป็นแอพที่มีการนำทางหลักข้ามด้านบนรายการการนำทางรองด้านซ้ายและเนื้อหาทางด้านขวา โดยไม่มีสถานะซ้อนกันโดยทั่วไปคอนโทรลเลอร์เดี่ยวจะต้องจัดการกับตรรกะการแสดงผลสำหรับการนำทางรองเช่นเดียวกับเนื้อหา การกำหนดเส้นทางแบบซ้อนช่วยให้คุณสามารถแยกข้อกังวลเหล่านี้ได้

มุมมองที่กำหนดชื่อเป็นอีกคุณสมบัติเพิ่มเติมของ ui-router ด้วย ngRoute คุณสามารถมีคำสั่ง ngView เพียงอันเดียวบนหน้าเว็บได้ แต่ด้วยมุมมองที่ตั้งชื่อไว้ใน ui-router คุณสามารถระบุคำสั่ง ui-view ได้หลายคำสั่งจากนั้นแต่ละสถานะจะมีผลต่อเทมเพลตและตัวควบคุมของมุมมองชื่อ ตัวอย่างที่ง่ายที่สุดคือการมีเนื้อหาหลักของแอปของคุณเป็นมุมมองหลักและจากนั้นจะมีแถบส่วนท้ายที่จะเป็นมุมมอง UI ที่แยกต่างหาก ในสถานการณ์สมมตินี้ส่วนท้ายของตัวควบคุมไม่จำเป็นต้องฟังการเปลี่ยนแปลงสถานะ / เส้นทางอีกต่อไป

การเปรียบเทียบที่ดีของ ngRoute และ ui-router สามารถพบได้ในตอนพอดคาสต์นี้

เพียงเพื่อทำให้สิ่งต่าง ๆ เกิดความสับสนมากขึ้นจับตาโมดูลการจัดเส้นทาง "เป็นทางการ" ใหม่ที่ทีม Angular คาดว่าจะเปิดตัวสำหรับรุ่น 1.5 และ 2.0 ของ Angular นี่จะเป็นการแทนที่โมดูล ngRoute นี่ คือเอกสารปัจจุบันสำหรับโมดูลเราเตอร์ใหม่ - มันค่อนข้างเบาบางเนื่องจากโพสต์นี้เนื่องจากการใช้งานยังไม่สิ้นสุด ดูที่นี่สำหรับข่าวเพิ่มเติมเกี่ยวกับเวลาที่โมดูลนี้จะเปิดตัวจริง

ngRoute เป็นไลบรารีการเราต์พื้นฐานซึ่งคุณสามารถระบุเพียงหนึ่งมุมมองและคอนโทรลเลอร์สำหรับเส้นทางใด ๆ

ด้วย ui-router คุณสามารถระบุหลายมุมมองทั้งแบบขนานและซ้อนกัน ดังนั้นหากแอปพลิเคชันของคุณต้องการ (หรืออาจจำเป็นต้องใช้ในอนาคต) การกำหนดเส้นทาง / มุมมองที่ซับซ้อนใด ๆ ให้ไปกับ ui-router

นี้ที่ดีที่สุดคือการเริ่มต้นคำแนะนำสำหรับ AngularUI Router

สิ่งพื้นฐานที่คุณต้องรู้: การใช้ ng-router $location.path()และการใช้ui-router$state.go

คุณลักษณะที่เหลือทั้งหมดของเรา

เราเตอร์ UI ทำให้ชีวิตของคุณง่ายขึ้น! คุณสามารถเพิ่มแอปพลิเคชัน AngularJS ให้กับคุณผ่านการฉีดเข้าไปในแอปพลิเคชันของคุณ ...

ng-route มาเป็นส่วนหนึ่งของ Core AngularJS ดังนั้นจึงง่ายขึ้นและให้ทางเลือกน้อยลง ...

ดูที่นี่เพื่อทำความเข้าใจกับ ng-route ได้ดียิ่งขึ้น: https://docs.angularjs.org/api/ngRoute

นอกจากนี้เมื่อใช้งานอย่าลืมใช้: ngView ..

ng-ui-router นั้นแตกต่างกัน แต่:

https://github.com/angular-ui/ui-routerแต่ให้ตัวเลือกเพิ่มเติมแก่คุณ ...

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

https://github.com/angular-ui/ui-router

ngRoute เป็นโมดูลที่พัฒนาโดยทีมงาน Angular.js ซึ่งก่อนหน้านี้เป็นส่วนหนึ่งของแกนเชิงมุม

ui-router เป็นเฟรมเวิร์กที่สร้างขึ้นนอกโครงการ Angular.js เพื่อปรับปรุงและเพิ่มประสิทธิภาพการกำหนดเส้นทาง

1- ngRoute ได้รับการพัฒนาโดยทีมงานเชิงมุมในขณะที่ ui-router เป็นโมดูลของบุคคลที่สาม 2- ngRoute ใช้การจัดเส้นทางตาม URL เส้นทางในขณะที่ ui-router ใช้การจัดเส้นทางตามสถานะของแอปพลิเคชัน 3- ui-router ให้ทุกอย่างที่ ng-route นำเสนอพร้อมคุณสมบัติเพิ่มเติมบางอย่างเช่นสถานะซ้อนและมุมมองที่ตั้งชื่อหลายรายการ

ng-View(พัฒนาโดยทีม AngularJS) สามารถใช้งานได้เพียงหนึ่งครั้งต่อหน้าในขณะที่ui-View(โมดูลของบุคคลที่สาม) สามารถใช้งานได้หลายครั้งต่อหน้า

ui-View จึงเป็นตัวเลือกที่ดีที่สุด