Günümüzde "Tek Sayfalı Uygulamalar" hakkında herkes bir şeyler duymuştu. Gmail gibi tanınmış web sitelerinin çoğu, Tek Sayfalı Uygulamalar (SPA'lar) konseptini kullanır.
SPA'lar, bir kullanıcı farklı bir sayfa istediğinde, uygulamanın o sayfaya gitmeyeceği, bunun yerine yeni sayfanın görünümünü mevcut sayfanın kendisinde göstereceği konsepttir.
Kullanıcıya ilk etapta sayfadan hiç ayrılmadığı hissini verir. Aynısı, Rotalar ile bağlantılı Görünümler yardımıyla Açısal'da da elde edilebilir.
Bu eğitimde öğreneceksiniz-
- Görünüm nedir?
- AngularJS'de ng-view Direktifi
- ng-view Örneği
Görünüm nedir?
Görünüm, kullanıcıya gösterilen içeriktir. Temelde kullanıcının görmek istediği, buna göre uygulamanın o görünümü kullanıcıya gösterilecektir.
Görünümlerin ve Yolların kombinasyonu, bir uygulamanın mantıksal görünümlerde bölünmesine ve farklı görünümlerin Denetleyicilere bağlanmasına yardımcı olur.
Uygulamanın farklı görünümlere bölünmesi ve uygulamanın farklı bölümlerini yüklemek için Yönlendirme'nin kullanılması, uygulamanın mantıksal olarak bölünmesine ve daha yönetilebilir hale getirilmesine yardımcı olur.
Bir müşterinin siparişleri görüntüleyebileceği ve yenilerini verebileceği bir sipariş uygulamamız olduğunu varsayalım.
Aşağıdaki şema ve sonraki açıklama, bu uygulamanın tek sayfalık bir uygulama olarak nasıl yapılacağını göstermektedir.
Şimdi, AngularJS'de biri "Siparişleri görüntüle" ve diğeri "Yeni Siparişler" için olmak üzere iki farklı web sayfasına sahip olmak yerine, bunun yerine aynı sayfada "Siparişleri Görüntüle" ve "Yeni Siparişler" adlı iki farklı görünüm oluşturursunuz.
Ayrıca uygulamamızda #show ve #new adlı 2 referans bağlantımız olacak.
- Böylece uygulama Uygulamam / # gösterisine gittiğinde, Siparişleri Görüntüle görünümünü gösterecek, aynı zamanda sayfadan çıkmayacaktır. Sadece mevcut sayfanın bölümünü "Siparişleri Görüntüle" bilgisiyle yenileyecektir. Aynı şey "Yeni Siparişler" görünümü için de geçerlidir.
Bu şekilde, uygulamayı daha yönetilebilir ve gerektiğinde değişiklik yapmayı kolaylaştırmak için farklı görünümlere ayırmak daha kolay hale gelir.
Ve her görünüm, bu işlevsellik için iş mantığını kontrol etmek için karşılık gelen bir denetleyiciye sahip olacaktır.
AngularJS'de ng-view Direktifi
"NgView", geçerli rotanın işlenmiş şablonunu ana düzen (index.html) dosyasına dahil ederek $ route hizmetini tamamlayan bir yönergedir.
Geçerli rota her değiştiğinde, görünüm, sayfanın kendisini değiştirmeden $ route hizmetinin yapılandırmasına göre ona değişir.
Daha sonraki bir bölümde rotaları ele alacağız, şimdilik uygulamamıza birden çok görünüm eklemeye odaklanacağız.
Aşağıda, tüm sürecin nasıl çalıştığına dair tüm akış şeması bulunmaktadır. Aşağıda gösterilen örneğimizde her süreci ayrıntılı olarak inceleyeceğiz.
ng-view Örneği
Görünümleri nasıl uygulayabileceğimize dair bir örneğe bakalım.
Örneğimizde, kullanıcıya iki seçenek sunacağız,
- Biri "Olay" görüntülemek, diğeri ise "Olay" eklemektir.
- Kullanıcı, Etkinlik Ekle bağlantısını tıkladığında, "Etkinlik Ekle" görünümü gösterilir ve aynı durum "Etkinliği Görüntüle" için de geçerlidir.
Bu örneği yerine getirmek için lütfen aşağıdaki adımları izleyin.
Adım 1) Açısal yol dosyasını bir komut dosyası referansı olarak ekleyin.
Bu rota dosyası, birden fazla rotaya ve görünüme sahip olma işlevlerinden yararlanmak için gereklidir. Bu dosya angularJS web sitesinden indirilebilir.
Adım 2) Bu adımda,
- "Yeni Bir Etkinlik Ekleme" ve "Bir Etkinliği Görüntüleme" bağlantılarını temsil edecek href etiketleri ekleyin.
- Ayrıca, görünümü temsil edecek ng-view direktifine sahip bir div etiketi ekleyin.
Bu, kullanıcı "Yeni Etkinlik Ekle" bağlantısını veya "Etkinliği Görüntüle bağlantısını" her tıkladığında ilgili görünümün yerleştirilmesine olanak tanır.
Adım 3) Angular JS komut dosyası etiketinize aşağıdaki kodu ekleyin.
Yönlendirme konusunda endişelenmeyelim, şimdilik bunu daha sonraki bir bölümde göreceğiz. Şimdilik görünümlerin kodunu görelim.
- Bu kod bölümü, kullanıcının daha önce div etiketinde tanımlanan "NewEvent" href etiketini tıkladığında anlamına gelir. Add_event.html web sayfasına gidecek ve kodu oradan alıp görünüme enjekte edecektir. İkinci olarak, bu görünüm için iş mantığını işlemek için "AddEventController" e gidin.
- Bu kod bölümü, kullanıcının daha önce div etiketinde tanımlanan "DisplayEvent" href etiketini tıkladığında anlamına gelir. Show_event.html web sayfasına gidecek, kodu oradan alacak ve görünüme enjekte edecektir. İkinci olarak, bu görünüm için iş mantığını işlemek için "ShowDisplayController" e gidin.
- Bu kod bölümü, kullanıcıya gösterilen varsayılan görünümün DisplayEvent görünümü olduğu anlamına gelir
Adım 4) Sonraki adım , hem "DisplayEvent" hem de "Yeni Olay Ekle" işlevi için iş mantığını işlemek üzere denetleyiciler eklemektir.
Sadece her denetleyici için her kapsam nesnesine bir mesaj değişkeni ekliyoruz. Kullanıcıya uygun görünüm gösterildiğinde bu mesaj görüntülenecektir.
Event Registration Guru99 Global Event
Adım 5) add_event.html ve show_event.html adlı sayfalar oluşturun. Sayfaları aşağıda gösterildiği gibi basit tutun.
Bizim durumumuzda, add_event.html sayfası, "Yeni Etkinlik Ekle" metniyle birlikte bir başlık etiketine ve "Bu, Yeni Bir Etkinlik Eklemek içindir" mesajını görüntüleyen bir ifadeye sahip olacaktır.
Benzer şekilde, show_event.html sayfasında da "Etkinliği Göster" metnini tutan bir başlık etiketi ve ayrıca "Bu, bir Etkinliği görüntülemek için" mesajını görüntüleyen bir mesaj ifadesi bulunur.
Mesaj değişkeninin değeri, görünüme eklenen denetleyiciye göre enjekte edilecektir.
Her sayfa için, her bir ilgili denetleyiciden enjekte edilecek olan mesaj değişkenini ekleyeceğiz.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Çıktıdan 2 şeyi fark edebiliriz
- Adres çubuğu, görüntülenen mevcut görünümü yansıtacaktır. Bu nedenle, varsayılan görünüm Olayı Göster ekranını göstermek olduğundan, adres çubuğu "DisplayEvent" için adresi gösterir.
- Bu bölüm, anında oluşturulan Görünüm'dür. Varsayılan görünüm Olayı Göster olduğu için, bu kullanıcıya gösterilen şeydir.
Şimdi görüntülenen sayfadaki Yeni Etkinlik Ekle bağlantısına tıklayın. Şimdi aşağıdaki çıktıyı alacaksınız.
Çıktı:
- Adres çubuğu artık geçerli görünümün artık "Yeni Etkinlik Ekle" görünümü olduğunu yansıtacaktır. Hala aynı başvuru sayfasında olacağınıza dikkat edin. Yeni bir başvuru sayfasına yönlendirilmeyeceksiniz.
- Bu bölüm Görünüm'dür ve şimdi "Yeni etkinlik ekle" işlevi için HTML'yi gösterecek şekilde değişecektir. Şimdi bu bölümde kullanıcıya "Yeni Etkinlik Ekle" başlık etiketi ve "Bu, Yeni Etkinlik Eklemek içindir" metni görüntülenir.