Örnekle AngularJS ng-view

By: James Hartman James Hartman
Hours Güncellenmiş

⚡ Akıllı Özet

AngularJS'deki görünümler, bir sayfanın başka bir sayfaya geçmek yerine içeriğini değiştirmesine olanak tanır; bu da tek sayfa uygulamalarının anlık hissettirmesini sağlar. `ng-view` yönergesi, her rotanın kendi şablonu ve denetleyicisiyle değiştirdiği bölgeyi işaretler.

  • 🪟 Tek Yer Tutucu: Her yönlendirilmiş şablonun eklendiği yere `ng-view` işareti taşıyan bir öğe eklenir ve sayfa başına yalnızca bir böyle öğeye izin verilir.
  • 🔗 Rota Eşleştirme: Her bir rota, o görünüm için işaretleme ve mantığı bir araya getiren bir templateUrl ve bir controller adı belirtir.
  • ???? Modül Bağımlılığı: Görünümler, angular-route.js'ye ve ngRoute modülüne yönelik belirtilmiş bir bağımlılığa ihtiyaç duyar.
  • 🎯 Varsayılan görünüm: "Otherwise" maddesi, eşleşmeyen tüm adresleri yönlendirir; bu da ilk yüklemede bir görünümün oluşturulmasını sağlar.
  • 🌐 Sunucu Gerekli: Şablonlar HTTP üzerinden alınır, bu nedenle sayfa dosya sisteminden açılmak yerine sunulmalıdır.
  • ⚠️ Destek Durumu: AngularJS'in kullanım ömrü 31 Aralık 2021'de sona erdi ve artık güvenlik yamaları almıyor.
Devamını Oku

AngularJS ng-view Yönergesi

Tanınmış siteler arasında şunlar yer almaktadır: Gmail Tek Sayfa Uygulamaları (SPA) kavramını kullanın. Kullanıcı farklı bir sayfa istediğinde, uygulama sayfadan ayrılmaz; yeni sayfanın görünümünü mevcut sayfanın içinde gösterir, böylece kullanıcı hiç ayrılmamış gibi hisseder. AngularJS'de de aynı şey, görünümler (views) ve rotalar (routes) kullanılarak elde edilir.

⚠️ Destek bildirimi: AngularJS'ye ulaşıldı 31 Aralık 2021 tarihinde yaşamının sonuna ulaştı. ve daha fazla yama veya güvenlik düzeltmesi almaz. Aşağıdaki yönerge, mevcut AngularJS 1.x uygulamalarının bakımı için geçerliliğini korur; modern uygulamalarda ise durum farklıdır. Açısal eşdeğeri şudur <router-outlet>.

Görünüm Nedir?

Görünüm, kullanıcıya gösterilen içeriktir. Kullanıcının görmek istediği her neyse, uygulamanın buna uygun görünümü görüntülenir.

Görünümleri ve rotaları birleştirmek, bir uygulamayı mantıksal görünümlere böler ve her birini bir rotaya bağlar. kontrolörBu da uygulamanın daha yönetilebilir olmasını sağlar.

Müşterinin siparişleri görüntüleyebildiği ve yeni siparişler verebildiği bir sipariş uygulamasını ele alalım. Aşağıdaki diyagram, uygulamanın nasıl tek sayfa uygulamasına dönüştüğünü göstermektedir.

Görünüm Nedir?

"Siparişleri Görüntüle" ve "Yeni Siparişler" için ayrı ayrı iki web sayfası yerine, angularjs Aynı sayfada, iki referans bağlantısı aracılığıyla erişilebilen iki farklı görünüm kullanır. #show hem de #new:

  • Navigasyon MyApp/#show Sayfadan ayrılmadan Siparişleri Görüntüle görünümünü gösterir. Mevcut sayfanın yalnızca ilgili bölümü yenilenir.
  • Navigasyon MyApp/#new Yeni Siparişler görünümü için de aynı işlemi yapar.

Bir uygulamayı bu şekilde görünümlere ayırmak, yönetilebilir ve değiştirilmesi kolay olmasını sağlar ve her görünümün, o işlevin iş mantığını içeren karşılık gelen bir denetleyicisi vardır.

AngularJS'de ng-view Direktifi

MKS ngView Direktifler tamamlar $route Bu hizmet, mevcut rotanın oluşturulmuş şablonunu ana düzen dosyasına dahil ederek sağlanır, normalde index.html.

Geçerli rota her değiştiğinde, dahil edilen görünüm de buna göre değişir. $route Sayfanın yeniden yüklenmesine gerek kalmadan yapılandırma. rotalar Bunlar ayrı ayrı ele alınmıştır; burada odak noktası birden fazla bakış açısı eklemektir.

Aşağıdaki akış şeması tüm süreci göstermektedir ve örnek daha sonra bu süreci adım adım açıklamaktadır.

AngularJS'de ng-view Direktifi

AngularJS'de ng-view Nasıl Uygulanır?

Bu örnek, kullanıcıya iki seçenek sunar: bir etkinlik görüntülemek ve bir etkinlik eklemek. Tıklama Etkinlik Ekle Bu, Etkinlik Ekle görünümünü gösterir ve aynı şey Etkinlik Görüntüle için de geçerlidir.

) 1 Adım Angular-route dosyasını bir komut dosyası referansı olarak ekleyin. Bu dosya, birden fazla rota ve görünüm kullanmak için gereklidir ve AngularJS sitesinden edinilebilir.

angular-route dosyasını ekleyin.

) 2 Adım href etiketlerini ve div etiketini ekleyin.

  1. “Yeni Etkinlik Ekle” ve “Etkinliği Görüntüle” bağlantılarını içeren href etiketleri ekleyin.
  2. İçeriği taşıyan bir div ekleyin. ng-view Görünüm bölgesini işaretlemek için kullanılan yönerge. Bağlantılardan herhangi birine tıklandığında ilgili görünüm oraya yerleştirilir.

href etiketlerini ve div etiketlerini ekleyin.

) 3 Adım AngularJS script etiketine yönlendirme yapılandırmasını ekleyin.

  1. Kullanıcı tıkladığında YeniEtkinlik bağlantı, AngularJS yükleniyor add_event.htmlİşaretleme kodunu görünüme ekler ve kullanır. AddEventController İş mantığı için.
  2. Kullanıcı tıkladığında DisplayEvent bağlantı, yükleniyor show_event.html ve kullanır ShowDisplayController.
  3. MKS otherwise Bu madde, kullanıcıya gösterilen varsayılan görünümü belirler; burada bu görünüm DisplayEvent'tir.

Yönlendirme yapılandırması

) 4 Adım Her iki fonksiyonun iş mantığını işlemek için denetleyiciler ekleyin. Her biri, ilgili görünüm gösterildiğinde görüntülenen, kendi kapsam nesnesine bir mesaj yerleştirir.

Kontrolörleri ekleyin

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.8.3/angular-route.js"></script>
</head>
<body ng-app="sampleApp">

<h1>Guru99 Global Event</h1>

<div class="container">
    <ul>
        <li><a href="#!/NewEvent">Add New Event</a></li>
        <li><a href="#!/DisplayEvent">Display Event</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var app = angular.module('sampleApp', ["ngRoute"]);

    app.config(function($routeProvider) {
        $routeProvider
            .when("/NewEvent", {
                templateUrl: "add_event.html",
                controller: "AddEventController"
            })
            .when("/DisplayEvent", {
                templateUrl: "show_event.html",
                controller: "ShowDisplayController"
            })
            .otherwise({
                redirectTo: '/DisplayEvent'
            });
    });

    app.controller("AddEventController", function($scope) {
        $scope.message = "This is to Add a new Event";
    });

    app.controller("ShowDisplayController", function($scope) {
        $scope.message = "This is to display an Event";
    });
</script>

</body>
</html>

⚠️ Orijinal ilanda üç düzeltme yapılmıştır. Öncelikle, bağlantılar şöyle: #!NewEvent Rotalar, eğik çizgi olmaksızın şu şekilde tanımlanır: /NewEventBu nedenle hiçbir eşleşme bulunamadı. AngularJS 1.6'dan itibaren varsayılan karma öneki şudur: !Bu da doğru adresi oluşturur. #!/NewEvent — ünlem işaretinden sonra gelen eğik çizgi. İkincisi, ShowDisplayController Mesajı "Bu bir Etkinlik görüntülüyor" olarak ayarla, kelimeyi eksik bırak. için Çevredeki metnin alıntıladığı şey. Üçüncüsü, lib/bootstrap.js Hiçbir yere ulaşmayan ve asla kullanılmayan göreceli bir yoldan yüklendiği için kaldırıldı.

İLGİLİ MAKALELER

) 5 Adım Sayfaları oluşturun add_event.html hem de show_event.htmlHer biri bir başlık ve denetleyicisi tarafından eklenen mesajı görüntüleyen bir ifade içerir.

  • add_event.html

add_event.html

<h2>Add New Event</h2>

{{message}}
  • show_event.html

show_event.html

<h2>Show Event</h2>

{{message}}

Kod başarıyla yürütüldüğünde, tarayıcıda aşağıdaki çıktı görüntülenir.

Çıktı:

ng-view çıktısı

ng-view çıktısı

Sık Karşılaşılan ng-view Hataları ve Bunların Nasıl Düzeltileceği

ng-view ile ilgili hataların neredeyse tamamı, yönergenin kendisinden ziyade modül bağlantılarından, adres biçiminden veya sayfanın sunulma şeklinden kaynaklanır.

  • Görüntüleme alanı boş kalır: the ngRoute Modül bağımlılık olarak listelenmemişti veya angular-route.js Yüklenmedi. Her ikisi de gereklidir ve komut dosyası daha sonra gelmelidir. angular.min.js.
  • Bağlantılar adresi değiştiriyor ancak hiçbir şey görüntülenmiyor: `href` özniteliği rotayla eşleşmiyor. AngularJS 1.6'dan itibaren adresin şu şekilde olması gerekiyor: #!/Route; 1.5 için yazılmış eski kod kullanıldı #/Route.
  • Şablonlar CORS hatası nedeniyle yüklenemiyor: Sayfa doğrudan diskten açıldı. Bu nedenle HTTP üzerinden sunun, çünkü... templateUrl Dosya protokolü blokları, bir AJAX isteğiyle alınır.
  • Yalnızca son görüntü görünür: Birden fazla öğe `ng-view` özelliğini içerir. AngularJS, sayfa başına tek bir görünüm bölgesini dikkate alır.
  • İlk yüklemede hiçbir şey görünmüyor: yok hayır otherwise Bu madde yapılandırılmıştır, bu nedenle boş bir adres hiçbir rotayla eşleşmez.

SSS

Hayır. ngRoute, sayfa başına tek bir görünüm bölgesini destekler. Aynı anda birden fazla adlandırılmış bölge için, iç içe ve kardeş görünümleri destekleyen ui-view'i sağlayan ui-router kütüphanesini kullanın.

HTML5 modunu şu şekilde etkinleştirin: $locationProvider.html5Mode(true) ve bir temel etiket ekleyin. Sunucu daha sonra bilinmeyen yolları index.html'ye yönlendirmelidir, aksi takdirde sayfa yenilendiğinde 404 hatası döndürülür.

Büyük ölçüde. AI Araçlar, rota tablolarını Angular Routes dizilerine dönüştürür ve ng-view yerine router-outlet kullanır. Kontrolcüler yine de elle bileşenler olarak yeniden yazılmalıdır.

Yapay zekâ asistanları, genellikle karşılaşılan üç olası sorunu hızlıca kontrol eder: eksik bir ngRoute bağımlılığı, rotayla eşleşmeyen bir karma öneki ve tarayıcının alamadığı bir şablon yolu.

Evet. Bir tane ekleyin. resolve Rotaya giden yolu engeller. AngularJS, denetleyiciyi başlatmadan önce bu vaatlerin yerine getirilmesini bekler; bu da veriler gelirken görünümün boş olarak yanıp sönmesini önler.

Bu yazıyı şu şekilde özetleyin: