Angular-route ve angular-ui-router arasındaki fark nedir?

Büyük uygulamalarımda AngularJS kullanmayı planlıyorum . Bu yüzden kullanılacak doğru modülleri bulma sürecindeyim.

Arasındaki fark nedir ngRoute (açısal-route.js) ve ui-yönlendirici (açısal-ui-router.js) modülleri?

NgRoute kullanıldığında birçok makalede , yol $ routeProvider ile yapılandırılır . Ancak, ui-router ile kullanıldığında , rota $ stateProvider ve $ urlRouterProvider ile yapılandırılır .

Daha iyi yönetilebilirlik ve genişletilebilirlik için hangi modülü kullanmalıyım?

ui-router 3. taraf bir modüldür ve çok güçlüdür. Normal ngRoute'un yapabileceği her şeyi ve birçok ekstra işlevi destekler.

Ui-router'ın ngRoute üzerinden seçilmesinin bazı yaygın nedenleri şunlardır:

• ui-yönlendirici iç içe görünümlere ve birden çok adlandırılmış görünümlere izin verir . Bu, diğer bölümlerden devralınan sayfalara sahip olabileceğiniz büyük uygulamalarda çok kullanışlıdır.

• ui-yönlendirici, eyalet adlarını temel alan durumlar arasında güçlü tipte bağlantı kurmanıza olanak tanır. URL'leri tek bir yerde değiştirmek, bağlantılarınızı oluştururken her bağlantıyı bu duruma güncelleyecektir ui-sref. URL'lerin değişebileceği daha büyük projeler için çok kullanışlıdır.

• Ayrıca, erişmeye çalışan URL'ye göre rotalarınızın dinamik olarak oluşturulmasına izin vermek için kullanılabilecek dekoratör kavramı da vardır . Bu, tüm rotalarınızı önceden belirtmeniz gerekmeyeceği anlamına gelebilir.

• durumlar , farklı durumlar hakkında farklı bilgileri haritalamanıza ve bunlara erişmenize olanak tanır ve eyaletler arasında bilgileri kolayca iletebilirsiniz $stateParams.

• Aracılığıyla size şablonlarda UI öğesi (şimdiki durumunun navigasyon vurgulayarak) ayarlamak için bir devletin devlet veya ebeveyn olup olmadığını kolaylıkla belirleyebilir $stateiçeri ayarlama yoluyla açığa çıkarabilir ui-yönlendirici tarafından sağlanan $rootScopeüzerinde run.

Aslında, ui-router daha fazla özelliklere sahip ngRouter'dır, sayfaların altında oldukça farklıdır. Bu ek özellikler daha büyük uygulamalar için çok kullanışlıdır.

Daha fazla bilgi:

• Github: https://github.com/angular-ui/ui-router
• Belgeler:
  • API Referansı: http://angular-ui.github.io/ui-router/site/#/api
  • Kılavuz: https://github.com/angular-ui/ui-router/wiki
• SSS: https://github.com/angular-ui/ui-router/wiki/Fretely-Asked-Sorular
• Örnek Uygulama: http://angular-ui.github.io/ui-router/sample/#/

ngRoute , AngularJS çekirdeğinin önceki bir parçası olan AngularJS ekibi tarafından geliştirilen bir modüldür.

ui-router , yönlendirme yeteneklerini geliştirmek ve geliştirmek için AngularJS projesi dışında yapılan bir çerçevedir.

Ui-yönlendirici belgelerinden :

AngularUI Router, arayüzünüzün parçalarını bir durum makinesinde düzenlemenizi sağlayan AngularJS için bir yönlendirme çerçevesidir. URL yolları etrafında düzenlenmiş Açısal çekirdekteki $ route hizmetinin aksine, UI-Router isteğe bağlı olarak yolları ve diğer davranışları ekleyebilecek eyaletler etrafında düzenlenir.

Durumlar, uygulamanızın arayüzünü güçlü bir şekilde yönetmenizi sağlayan adlandırılmış, iç içe ve paralel görünümlere bağlıdır.

Her ikisi de daha iyi değil, projeniz için en uygun olanı seçmeniz gerekecek.

Ancak, uygulamanızda karmaşık görünümlere sahip olmayı planlıyorsanız ve "$ state" kavramıyla ilgilenmek istiyorsanız. Ui-router'ı seçmenizi tavsiye ederim.

ngRoute, temel senaryolar için iyi olan açısal bir çekirdek modüldür. Gelecek sürümlerde daha güçlü özellikler ekleyeceklerine inanıyorum.

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

Ui-router, ngRoute sorunlarının üstesinden gelen, katkıda bulunan bir modüldür. Temelde İç içe / Karmaşık görünümler.

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

Ui-router ve ngRoute arasındaki bazı farklar

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

ngRoute, temel AngularJS çerçevesinin bir parçasıdır.

ui-router, varsayılan yönlendirme yeteneklerini geliştirmeye çalışmak için oluşturulmuş bir topluluk kütüphanesidir.

UI yönlendiriciyi yapılandırma / ayarlama hakkında iyi bir makale:

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

NgRoute paradigması içinde uygulanan iç içe görünüm işlevlerinden yararlanmak istiyorsanız, açısal yol-segmentini deneyin - ngRoute'u değiştirmek yerine genişletmeyi amaçlamaktadır.

Genellikle ui-router bir durum mekanizması üzerinde çalışır ... Kolay bir örnekle anlaşılabilir:

Diyelim ki büyük bir müzik kütüphanesi uygulamamız var (örneğin .gaana, saavan ya da başka). Sayfanın alt kısmında, sayfanın tüm durumu boyunca paylaşılan bir müzik çalarınız var.

Diyelim ki çalmak için bazı şarkıları tıklıyorsunuz. Bu durumda, tam sayfayı yeniden yüklemek yerine yalnızca o müzik çalar durumu değişmelidir. Bu, ui-yönlendirici tarafından kolayca ele alınabilir.

NgRoute'deyken görünümü ve denetleyiciyi takıyoruz.

Açısal 1.x

ng-rotası :

ng-route, yönlendirme için angularJS Ekibi tarafından geliştirilmiştir.

ng-route: url (Konum) tabanlı yönlendirme.

Ör:

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

ui-route :

ui-router 3. taraf modülü tarafından geliştirilmiştir.

ui-router: durum tabanlı yönlendirme

Ör:

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

-> ui-router yuvalanmış görünümlere izin verir

-> ui-router ng-route'dan daha güçlü

ng-yönlendirici , ui-yönlendirici

ngRoute, Angular ekibi tarafından oluşturulan ve temel istemci tarafı yönlendirme işlevi sağlayan bir modüldür. Bu modül, yönlendirme için oldukça güçlü bir temel sağlar ve bu blog yayınında örneklendiği gibi sağlam yönlendirme işlevselliği vermek için oldukça kolay bir şekilde oluşturulabilir (yazar Ward Bell ve Ben Nadel arasındaki yorum yolunu okuduğunuzdan emin olun - bunlar Açısal Artıları)

ui-yönlendirici odağı url merkezli yollardan url'ye yansıtılabilecek veya yansımayabilecek uygulama "durumlarına" kaydırır.

Ui-router tarafından eklenen birincil özellikler yuvalanmış durumlar ve adlandırılmış görünümlerdir.

İç içe durumlar, uygulamanın çeşitli parçaları için denetleyici mantığını ayırmanıza olanak tanır. Bunun çok basit bir örneği, üstte birincil gezinme, solda ikincil bir gezinme listesi ve sağda içerik bulunan bir uygulama olabilir. Yuvalanmış durumlar olmadan, tek bir denetleyicinin genellikle ikincil gezinme ve içerik için görüntüleme mantığını işlemesi gerekir. İç içe yönlendirme, bu endişeleri ayırmanıza olanak tanır.

Adlandırılmış görünümler, ui-yönlendiricinin başka bir ek özelliğidir. NgRoute ile, bir sayfada yalnızca tek bir ngView yönergesine sahip olabilirken, ui-router'daki adlandırılmış görünümlerle birden çok ui-görünüm yönergesi belirtebilirsiniz ve daha sonra her durum ad görünümlerinin şablonunu ve denetleyicisini etkileyebilir. Bunun basit bir örneği, uygulamanızın ana içeriğinin birincil görünüm olması ve daha sonra ayrı bir kullanıcı arayüzü görünümü olacak bir altbilgi çubuğuna sahip olmak olacaktır. Bu senaryoda, altbilgi denetleyicisi artık durum / rota değişikliklerini dinlemek zorunda değildir.

Bu podcast bölümünde ngRoute ve ui-yönlendiricinin iyi bir karşılaştırmasını bulabilirsiniz .

İşleri daha karmaşık hale getirmek için, Angular ekibinin Angular'ın 1.5 ve 2.0 sürümleri için piyasaya sürmeyi beklediği yeni "resmi" yönlendirme modülüne göz atın. Bu ngRoute modülünün yerini alacaktır. İşte yeni Yönlendirici modülü için mevcut belgeler - uygulama henüz tamamlanmadığı için bu kayıttan itibaren oldukça seyrek. İzle Burada bu modül aslında ne zaman çıkacağını ilgili daha fazla haber için.

ngRoute, herhangi bir rota için yalnızca bir görünüm ve denetleyici belirtebileceğiniz temel bir yönlendirme kütüphanesidir.

Ui-yönlendirici ile hem paralel hem de iç içe birden çok görünüm belirleyebilirsiniz. Dolayısıyla, uygulamanız herhangi bir karmaşık yönlendirme / görünüm gerektiriyorsa (veya gelecekte gerektirebilirse), ui-yönlendirici ile devam edin.

Bu AngularUI Router için başlangıç ​​kılavuzu.

Bilmeniz gereken temel şey: ng-router kullanımları $location.path()ve ui-router kullanımları$state.go

Tüm özellikleri bize bırakın.

ui yönlendirici hayatınızı kolaylaştırır! Uygulamalarınıza enjekte ederek AngularJS uygulamanıza ekleyebilirsiniz ...

ng-route çekirdek AngularJS'nin bir parçası olarak geliyor, bu yüzden daha basit ve size daha az seçenek sunuyor ...

Ng-rotasını daha iyi anlamak için buraya bakın: https://docs.angularjs.org/api/ng

Ayrıca kullanırken, kullanmayı unutmayın: ngView ..

ng-ui-router farklı ama:

https://github.com/angular-ui/ui-router ama size daha fazla seçenek sunuyor ....

AngularUI Router, arayüzünüzün parçalarını bir durum makinesinde düzenlemenizi sağlayan AngularJS için bir yönlendirme çerçevesidir. URL yolları etrafında düzenlenmiş Açısal ngRoute modülündeki $ route hizmetinden farklı olarak, UI-Router isteğe bağlı olarak yolları ve diğer davranışları ekleyebilecek eyaletler etrafında düzenlenir.

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

ngRoute, Angular.js ekibi tarafından geliştirilen ve önceki Angular çekirdeğinin parçası olan bir modüldür.

ui-router, yönlendirme yeteneklerini geliştirmek ve geliştirmek için Angular.js projesi dışında yapılan bir çerçevedir.

1- ngRoute, açısal ekip tarafından geliştirilirken, ui-router 3. taraf bir modüldür. 2- ngRoute, rota URL'sine göre yönlendirmeyi uygularken ui-router, uygulamanın durumuna göre yönlendirmeyi uygular. 3- ui-router ng-rotanın sağladığı her şeyi ve ayrıca iç içe durumlar ve çoklu adlandırılmış görünümler gibi bazı ek özellikler sağlar.

ng-View(AngularJS ekibi tarafından geliştirilmiştir) sayfa başına yalnızca bir kez kullanılabilirken ui-View(3. taraf modülü) sayfa başına birden çok kez kullanılabilir.

ui-View bu nedenle en iyi seçenektir.