Örnekle AngularJS ng-view: Görünüm Nasıl Uygulanır?
James Hartman
Günümüzde herkes "Tek Sayfa Uygulamaları"nı duymuştur. Gmail gibi bilinen web sitelerinin çoğu Tek Sayfa Uygulamaları (SPA'lar) kavramını kullanır.
SPA'lar, bir kullanıcı farklı bir sayfa talep ettiğinde uygulamanın o sayfaya gitmediği, bunun yerine yeni sayfanın görünümünü mevcut sayfanın kendisinde görüntülediği konsepttir.
Kullanıcıya ilk etapta sayfadan hiç ayrılmamış hissi verir. Aynı şey, Rotalar ile birlikte Görünümlerin yardımıyla Angular'da da başarılabilir.
Bu eğitimde şunları öğreneceksiniz:
Görünüm Nedir?
Görünüm, kullanıcıya gösterilen içeriktir. Temel olarak kullanıcının görmek istediği şey, buna göre uygulamanın görünümü kullanıcıya gösterilecektir.
Görünümlerin ve Yolların birleşimi, bir uygulamanın mantıksal görünümlere bölünmesine ve farklı görünümlerin Denetleyicilere bağlanmasına yardımcı olur.
Uygulamayı farklı görünümlere bölmek ve uygulamanın farklı bölümlerini yüklemek için Yönlendirmeyi kullanmak, 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üleyebildiği ve yenilerini oluşturabildiği bir sipariş uygulamamız olduğunu varsayalım.
Aşağıdaki diyagram ve sonraki açıklama, bu uygulamanın tek sayfalı bir uygulama olarak nasıl yapılacağını göstermektedir.
Artık 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, angularjsbunun 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 isimli 2 adet referans linkimiz olacaktır.
- Yani uygulama MyApp/#show'a gittiğinde Siparişleri Görüntüle görünümünü gösterecek, aynı zamanda sayfadan çıkmayacak. Sadece mevcut sayfanın bölümünü “Siparişleri Görüntüle” bilgileriyle yenileyecektir. Aynı şey “Yeni Siparişler” görünümü için de geçerli.
Böylece uygulamayı farklı görünümlere ayırmak daha kolay hale gelir ve gerektiğinde değişiklik yapılması daha kolay hale gelir.
Ve her görünümün, söz konusu işlevselliğe ilişkin iş mantığını kontrol edecek karşılık gelen bir denetleyicisi 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 rotada yapılan değişiklikleri içeriyordu.
Biz örtüyoruz yolları Sonraki bölümde, şimdilik, uygulamamıza birden fazla görünüm eklemeye odaklanacağız.
Aşağıda tüm sürecin nasıl işlediğine dair akış şemasının tamamı bulunmaktadır. Aşağıda gösterilen örneğimizde her işlemi detaylı olarak inceleyeceğiz.
AngularJS'de ng-view Nasıl Uygulanır?
AngularJS'de ng-view'i nasıl uygulayabileceğimize dair bir örneğe göz atalım. Örneğimizde kullanıcıya iki seçenek sunacağız;
- Biri bir “Etkinlik” Görüntülemek, diğeri ise bir “Etkinlik” eklemektir.
- Kullanıcı Etkinlik Ekle bağlantısını tıkladığında kendisine "Etkinlik Ekle" görünümü gösterilecektir ve aynı şey "Etkinliği Görüntüle" için de geçerlidir.
Bu örneği hayata geçirmek için lütfen aşağıdaki adımları izleyin.
) 1 Adım Açısal rota dosyasını komut dosyası referansı olarak ekleyin.
Bu rota dosyası, birden fazla rota ve görünüme sahip olmanın işlevselliklerinden yararlanmak için gereklidir. Bu dosya angularJS web sitesinden indirilebilir.
) 2 Adım href etiketleri ve div etiketi ekleyin.
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 yönergesine sahip bir div etiketi ekleyin. Bu, kullanıcı "Yeni Etkinlik Ekle bağlantısına" veya "Etkinliği Görüntüle bağlantısına" tıkladığında ilgili görünümün eklenmesine olanak tanıyacaktır.
) 3 Adım Angular JS için script etiketinize aşağıdaki kodu ekleyin.
Şimdilik yönlendirme konusunda endişelenmeyelim, bunu sonraki bir bölümde göreceğiz. Şimdilik sadece görünümler için koda bakalım.
- Bu kod bölümü, kullanıcının daha önce div etiketinde tanımlanan “NewEvent” href etiketine tıkladığı anlamına gelir. Add_event.html web sayfasına gidecek ve kodu oradan alıp görünüme enjekte edecek. İkinci olarak bu görünümün iş mantığını işlemek için “AddEventController”a gidin.
- Bu kod bölümü, kullanıcının daha önce div etiketinde tanımlanan “DisplayEvent” href etiketine tıkladığında anlamına gelir. Show_event.html web sayfasına gidecek, kodu oradan alacak ve görünüme enjekte edecek. İkinci olarak bu görünümün iş mantığını işlemek için “ShowDisplayController”a gidin.
- Kodun bu 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
) 4 Adım İş mantığını işlemek için denetleyiciler ekleyin.
Sonraki adım, hem "DisplayEvent" hem de "Yeni Etkinlik Ekle" işlevi için iş mantığını işlemek üzere denetleyiciler eklemektir.
Her denetleyici için her kapsam nesnesine yalnızca bir mesaj değişkeni ekliyoruz. Bu mesaj, kullanıcıya uygun görünüm gösterildiğinde görüntülenecektir.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
<script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
<script src="lib/bootstrap.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 display an Event";
});
</script>
</body>
</html>
) 5 Adım add_event.html ve show_event.html adlı sayfalar oluşturun
Daha sonra 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ında “Yeni Etkinlik Ekle” metninin yanında bir başlık etiketi bulunacak ve “Bu, yeni bir Etkinlik Eklemek içindir” mesajını görüntüleyecek bir ifadeye sahip olacaktır.
Benzer şekilde, show_event.html sayfasında da "Etkinliği Göster" metnini tutacak bir başlık etiketi bulunacak ve ayrıca "Bu, bir Etkinliği görüntülemek içindir" mesajını görüntüleyecek bir mesaj ifadesine sahip olacaktır.
Mesaj değişkeninin değeri, görünüme eklenen denetleyiciye göre enjekte edilecektir.
Her sayfa için, ilgili denetleyicilerden enjekte edilecek mesaj değişkenini ekleyeceğiz.
- add_event.html
<h2>Add New Event</h2>
{{message}}
- show_event.html
<h2>Show Event</h2>
{{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 geçerli görünümü yansıtacaktır. Varsayılan görünüm Olayı Göster ekranını göstermek olduğundan, adres çubuğu “DisplayEvent” adresini gösterir.
- Bu bölüm, anında oluşturulan Görünümdür. Varsayılan görünüm Olayı Göster görünümü olduğundan, kullanıcıya görüntülenen görünüm budur.
Şimdi görüntülenen sayfada Yeni Etkinlik Ekle bağlantısını tıklayın. Artık aşağıdaki çıktıyı alacaksınız.
Çıktı:
- Adres çubuğu artık mevcut görünümün artık "Yeni Etkinlik Ekle" görünümü olduğunu yansıtacaktır. Hala aynı uygulama sayfasında olacağınızı unutmayın. Yeni bir başvuru sayfasına yönlendirilmeyeceksiniz.
- Bu bölüm Görünümdür ve şimdi şunu gösterecek şekilde değişecektir: HTML “Yeni etkinlik ekle” işlevi için. Artık bu bölümde kullanıcıya “Yeni Etkinlik Ekle” başlık etiketi ve “Bu, yeni bir Etkinlik Eklemek İçindir” metni görüntüleniyor.
