javascript - sref - ui-router教學




angular-route和angular-ui-router有什麼區別? (10)

我正計劃在我的大型應用程序中使用AngularJS。 所以我正在找出正確的模塊來使用。

ngRoute(angular-route.js)ui-router(angular-ui-router.js)模塊有什麼區別

在使用ngRoute的許多文章中,路由配置為$ routeProvider 。 但是,使用ui-router時 ,路由配置為$ stateProvider和$ urlRouterProvider

我應該使用哪個模塊以獲得更好的可管理性和可擴展性?



1- ngRoute由角色團隊開發,而ui-router是第三方模塊。 2- ngRoute基於路由URL實現路由,而ui-router實現基於應用狀態的路由。 3- ui-router提供ng路由提供的所有內容,以及一些附加功能,如嵌套狀態和多個命名視圖。


ngRoute是Angular.js團隊開發的一個模塊,Angular.js團隊是Angular核心的早期部分。

ui-router是一個在Angular.js項目之外制定的框架,用於改進和增強路由功能。


ngRoute是一個基本的路由庫,您可以為任何路由指定一個視圖和控制器。

使用ui路由器,您可以指定多個視圖,包括並行和嵌套。 因此,如果您的應用程序需要(或將來可能需要)任何類型的複雜路由/視圖,請繼續使用ui-router。

http://www.ng-newsletter.com/posts/angular-ui-router.html是AngularUI路由器最好的入門指南。


ngRoute是由Angular團隊構建的模塊,提供基本的客戶端路由功能。 這個模塊為路由提供了一個相當強大的基礎,並且可以很容易地構建,以提供可靠的路由功能,如本博客文章所示 (請務必閱讀Ward Bell和Ben Nadel之間的評論,作者 - 他們是幾個角利)

ui-router將焦點從以URL為中心的路線轉移到應用程序“狀態”,這可能會或可能不會反映在url中。

ui-router添加的主要功能是嵌套狀態和命名視圖。

嵌套狀態允許您為應用程序的各個部分分離控制器邏輯。 一個非常簡單的例子就是一個應用程序,其頂部為主導航,左側為輔助導航列表,右側為內容。 沒有嵌套狀態,單個控制器通常必須處理輔助導航的顯示邏輯以及內容。 嵌套路由允許您分離這些問題。

命名的視圖是UI路由器的另一個附加功能。 使用ngRoute,您只能在頁面上使用單個ngView指令,而在ui-router中使用命名視圖可以指定多個ui-view指令,然後每個狀態都能夠影響名稱視圖的模板和控制器。 一個非常簡單的例子就是將應用程序的主要內容作為主視圖,然後再創建一個可以作為單獨UI視圖的頁腳欄。 在這種情況下,頁腳的控制器不再需要偵聽狀態/路由更改。

這個podcast插曲中可以找到ngRoute和ui-router的比較。

為了讓事情更加令人困惑,請關注Angular團隊預計將為Angular 1.5和2.0版發布的新“官方”路由模塊。 這將取代ngRoute模塊。 Here是新的路由器模塊的當前文檔 - 由於實現尚未最終確定,因此在本文中相當稀少。 here觀看關於這個模塊何時會被發布的更多消息。


ui路由器讓您的生活更輕鬆! 您可以通過將AngularJS應用程序注入您的應用程序中來將它添加到您的...

ng-route是AngularJS核心的一部分,因此它更簡單,並為您提供更少的選擇......

看看這裡來更好地理解ng-route: https://docs.angularjs.org/api/ngRoutehttps://docs.angularjs.org/api/ngRoute

另外當使用它時,不要忘記使用:ngView ..

ng-ui-router是不同的,但是:

ui-router但給你更多的選擇....


ng-View (由AngularJS團隊開發)每頁只能使用一次,而ui-View (第三方模塊)可以每頁多次使用。

ui-View因此是最佳選擇。


Angular 1.x

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

ng-route由angularJS團隊開發,用於路由。

ng-route: 基於url(位置)的路由。

例如:

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

ui-router

ui路由器由第三方模塊開發。

ui-router: 基於狀態的路由

例如:

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

- > ui-router允許嵌套視圖

- > ui-router比ng-route更強大

https://docs.angularjs.org/api/ngRouteui-router


基本的東西你必須知道:ng-router使用$location.path()和ui-router使用$state.go

休息我們的所有功能。


如果你想使用在ngRoute範例中實現的嵌套視圖功能,試試angular-route-segment.com - 它旨在擴展ngRoute而不是替換它。





angularjs-module