$ RouteProvider ve $ stateProvider arasındaki fark nedir?

Lütfen $routeProviderve arasındaki farkı açıklayın$stateProvider angularjs içinde.

Hangisi en iyi uygulama?

Her ikisi de SPA'da (Tek Sayfa Uygulaması) yönlendirme amacıyla kullanılanlarla aynı işi yapar.

1. Açısal Yönlendirme - $ route başına

Denetleyicilere ve görünümlere URL'ler (HTML kısmi). $ Location.url () öğesini izler ve yolu mevcut bir rota tanımına eşlemeye çalışır.

HTML

<div ng-view></div>

Yukarıdaki etiket, şablonu açısal (yapılandırma aşaması) 'nda $routeProvider.when()belirttiğiniz koşuldan oluşturur.config

Sınırlamalar: -

• Sayfada yalnızca tek ng-viewsayfa bulunabilir
• SPA'nızda, bazı koşullara göre oluşturmak istediğiniz sayfada birden çok küçük bileşen varsa, $routeProviderbaşarısız olur. (Bunu başarmak için, biz gibi direktifler kullanmak gerekir ng-include, ng-switch, ng-if, ng-showSPA onlara sahip, kötü görünüyor ki)
• Ebeveyn ve çocuk ilişkisi gibi iki yol arasında ilişki kuramazsınız.
• URL desenine göre görünümün bir bölümünü gösteremez ve gizleyemezsiniz.

2. ui-yönlendirici - $ stateProvider dokümanı başına

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. UI-Router, isteğe bağlı olarak yolları ve diğer davranışları eklenmiş olabilecek eyaletler etrafında düzenlenmiştir.

Birden Çok Adlandırılmış Görünüm

Bir başka harika özellik, bir şablonda birden çok kullanıcı arayüzü görünümüne sahip olma yeteneğidir.

Birden çok paralel görünüm güçlü bir özellik olsa da, arayüzlerinizi iç içe yerleştirerek viewve bu görünümleri iç içe durumlarla eşleştirerek arayüzlerinizi daha etkili bir şekilde yönetebilirsiniz .

HTML

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

Gücünün çoğunluğu, ui-routeriç içe geçmiş durum ve görüşleri yönetebilmesidir.

Artıları

• ui-viewTek sayfada birden çok sayfa olabilir
• Çeşitli görünümler iç içe yerleştirilebilir ve yönlendirme aşamasında durum tanımlanarak korunabilir.
• Burada çocuk ve ebeveyn ilişkimiz olabilir, tıpkı devletteki miras gibi, aynı zamanda kardeş devletleri de tanımlayabilirsiniz.
• Sen değişebilir ui-view="some"sadece mutlak kullanarak kullanarak yönlendirerek devletin @devlet adıyla.
• Göreli yönlendirme yapmanın başka bir yolu da yalnızca @değiştirmek için kullanmaktır ui-view="some". Bu ui-view, iç içe olup olmadığını kontrol etmek yerine yerini alacaktır .
• Burada , bir eyalette belirtilen şekilde dinamik olarak ui-srefbir hrefURL oluşturmak için kullanabilirsiniz URL, ayrıca bir eyalettejson biçimdeki .

Daha fazla bilgi için Açısal ui-yönlendirici

Durumlarla çeşitli iç içe görünümde daha iyi esneklik için, gitmenizi tercih ederim ui-router

Yönlendirme URLssırasında Angular'ın kendi ng-Router'ı, statesURL'lere ek olarak UI-Router da dikkate alınır .

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.

Ng-router'dayken, <a href="">etiket yoluyla bağlantı sağlarken URL'lere çok dikkat etmelisiniz , UI-Router'da sadece stateakılda tutmalısınız . Gibi bağlantılar sağlarsınız <a ui-sref="">. Kullansanız bile<a href="">UI-Router'da , tıpkı ng-router'da yaptığınız gibi, yine de çalışacağını unutmayın.

Dolayısıyla, URL'nizi bir gün değiştirmeye karar verseniz bile, URL'niz stateaynı kalacaktır ve URL'yi yalnızca adresinde değiştirmeniz gerekir .config.

NgRouter basit uygulamalar yapmak için kullanılabilirken, UI-Router karmaşık uygulamalar için geliştirmeyi çok daha kolay hale getirir. İşte onun wiki'si.

$ route: URL'leri denetleyicilere ve görünümlere (HTML kısmi) derinden bağlamak için kullanılır ve mevcut bir rota tanımından yolu eşlemek için $ location.url () öğesini izler.

NgRoute kullandığımızda, rota $ routeProvider ile ve ui-router kullandığımızda rota $ stateProvider ve $ urlRouterProvider ile yapılandırılır.

<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'
        });