Parametrelerle AngularJS Yönlendirme: Tek Sayfa Uygulama Örneği

İçindekiler:

Anonim

Yönlendirmeye başlamadan önce, Tek Sayfalı Uygulamalara hızlıca bir göz atalım.

Tek Sayfalı Uygulamalar nedir?

Tek sayfalı uygulamalar veya (SPA'lar), tek bir HTML sayfası yükleyen ve web uygulamasıyla kullanıcı etkileşimine göre sayfayı dinamik olarak güncelleyen web uygulamalarıdır.

AngularJS'de Yönlendirme nedir?

AngularJS'de yönlendirme, Tek Sayfalı Uygulamalar oluşturmanıza izin veren şeydir.

  • AngularJS yolları, uygulamanızdaki farklı içerik için farklı URL'ler oluşturmanıza olanak sağlar.
  • AngularJS rotaları, hangi rotanın seçildiğine bağlı olarak birden fazla içeriğin gösterilmesine izin verir.
  • URL'de # işaretinden sonra bir yol belirtilir.

Http://example.com/index.html URL'si aracılığıyla barındırılan bir site örneğini ele alalım .

Bu sayfada, uygulamanızın ana sayfasını barındırırsınız. Uygulamanın bir Etkinlik organize ettiğini ve birinin sergilenen çeşitli olayların neler olduğunu görmek istediğini veya belirli bir etkinliğin ayrıntılarını görmek veya bir etkinliği silmek istediğini varsayalım. Bir Tek Sayfa uygulamasında, yönlendirme etkinleştirildiğinde, tüm bu işlevler aşağıdaki bağlantılar aracılığıyla kullanılabilir olacaktır.

http://example.com/index.html#ShowEvent

http://example.com/index.html#DisplayEvent

http://example.com/index.html#DeleteEvent

# Sembolü farklı yollarla (ShowEvent, DisplayEvent ve DeleteEvent) birlikte kullanılacaktır.

  • Dolayısıyla, kullanıcı tüm Etkinlikleri görmek isterse, bağlantıya ( http://example.com/index.html#ShowEvent ) yönlendirilirdi, aksi takdirde
  • Yalnızca belirli bir etkinliği görmek isterlerse, bağlantıya ( http://example.com/index.html#DisplayEvent ) veya
  • Bir etkinliği silmek isterlerse, http://example.com/index.html#DeleteEvent bağlantısına yönlendirilirler .

Ana URL'nin aynı kaldığını unutmayın.

Bu eğitimde öğreneceksiniz-

  • Açısal Rota Ekleme ($ routeProvider)
  • Varsayılan bir yol oluşturma
  • Rotadan parametrelere erişim
  • Angular $ rota hizmetini kullanma
  • HTML5 Yönlendirmesini Etkinleştirme

Açısal Rota Ekleme ($ routeProvider)

Bu nedenle, daha önce tartıştığımız gibi, AngularJS'deki yollar, kullanıcıyı uygulamanızın farklı bir görünümüne yönlendirmek için kullanılır. Ve bu yönlendirme aynı HTML sayfasında yapılır, böylece kullanıcı sayfadan ayrılmamış gibi bir deneyime sahip olur.

Yönlendirmeyi uygulamak için, aşağıdaki ana adımların uygulamanızda herhangi bir özel sırada uygulanması gerekir.

  1. Angular-route.js referansı. Bu, tüm yönlendirme işlevlerine sahip, Google tarafından geliştirilmiş bir JavaScript dosyasıdır. Bu, yönlendirme için gerekli olan tüm ana modülleri referans alabilmesi için uygulamanıza yerleştirilmelidir.

  2. Bir sonraki önemli adım, uygulamanızın içinden ngRoute modülüne bir bağımlılık eklemektir. Yönlendirme işlevinin uygulama içinde kullanılabilmesi için bu bağımlılık gereklidir. Bu bağımlılık eklenmezse, o zaman angular.JS uygulaması içinde yönlendirme kullanılamayacaktır.

    Bu ifadenin genel sözdizimi aşağıdadır. Bu, ngRoute anahtar sözcüğünü içeren bir modülün normal bir bildirimidir.

var module = angular.module("sampleApp", ['ngRoute']);
  1. Sonraki adım, $ routeProvider'ınızı yapılandırmak olacaktır. Bu, uygulamanızda çeşitli yolları sağlamak için gereklidir.

    Aşağıda, kendi kendini açıklayan bu ifadenin genel sözdizimi verilmiştir. Sadece ilgili yol seçildiğinde, kullanıcıya verilen görünümü görüntülemek için rotayı kullanacağını belirtir.

when(path, route)
  1. Rotanıza HTML sayfanızdan bağlantılar. HTML sayfanızda, uygulamanızdaki çeşitli mevcut rotalara referans bağlantıları ekleyeceksiniz.
 1. Yol
  1. Son olarak, normalde bir div etiketinde bulunan ng-view direktifinin dahil edilmesi olacaktır. Bu, ilgili rota seçildiğinde görünümün içeriğini enjekte etmek için kullanılacaktır.

Şimdi, yukarıda belirtilen adımları kullanarak bir yönlendirme örneğine bakalım.

Örneğimizde,

Kullanıcıya 2 bağlantı sunacağız,

  • Biri, Angular JS kursu için konuları görüntülemektir, diğeri ise Node.js kursu içindir.
  • Kullanıcı bağlantılardan herhangi birine tıkladığında, o kursun konuları görüntülenecektir.

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 angular.JS web sitesinden indirilebilir.

Adım 2) "Angular JS Topics" ve "Node JS Topics" bağlantılarını temsil edecek href etiketleri ekleyin.

Adım 3) Görünümü temsil edecek ng-view direktifine sahip bir div etiketi ekleyin.

Bu, kullanıcı "Angular JS Topics" veya "Node JS Konuları" nı tıkladığında ilgili görünümün yerleştirilmesine olanak tanır.

Adım 4) AngularJS komut dosyası etiketinize "ngRoute modülünü" ve "$ routeProvider" hizmetini ekleyin.

Kod Açıklaması:

  1. İlk adım, "ngRoute modülünün" dahil edilmesini sağlamaktır. Bunun yerine, Angular uygulamanızdaki yönlendirmeyi otomatik olarak halledecektir. Google tarafından geliştirilen ngRoute modülü, yönlendirmenin mümkün olduğu tüm işlevlere sahiptir. Bu modülü ekleyerek, uygulama tüm yönlendirme komutlarını otomatik olarak anlayacaktır.
  2. $ Routeeprovider, angular'ın çağrılan rotaları arka planda dinlemek için kullandığı bir hizmettir. Dolayısıyla, kullanıcı bir bağlantıyı tıkladığında, yönlendirme sağlayıcı bunu tespit edecek ve ardından hangi rotayı izleyeceğine karar verecektir.
  3. Açısal bağlantı için bir yol oluşturun - Bu blok, Açısal bağlantı tıklandığında Angular.html dosyasını enjekte edin ve ayrıca herhangi bir iş mantığını işlemek için Denetleyici 'AngularController'ı kullanın anlamına gelir.
  4. Düğüm bağlantısı için bir yol oluşturun - Bu blok, Düğüm bağlantısı tıklandığında, Node.html dosyasını enjekte edin ve ayrıca herhangi bir iş mantığını işlemek için Denetleyici 'NodeController'ı kullanın.

Adım 5) Sonraki adım , hem AngularController hem de NodeController için iş mantığını işlemek üzere denetleyiciler eklemektir.

Her denetleyicide, her kurs için Konu adlarını ve açıklamalarını depolamak için bir dizi anahtar-değer çifti oluşturuyoruz. 'Tutorial' dizi değişkeni, her denetleyicinin kapsam nesnesine eklenir.

Event Registration

Guru99 Global Event

Adım 6) Angular.html ve Node.html adlı sayfalar oluşturun. Her sayfa için aşağıdaki adımları gerçekleştiriyoruz.

Bu adımlar, dizinin tüm anahtar / değer çiftlerinin her sayfada görüntülenmesini sağlayacaktır.

  1. Eğitim değişkeninde tanımlanan her bir anahtar / değer çiftini gözden geçirmek için ng-tekrar yönergesini kullanma.
  2. Her bir anahtar / değer çiftinin adını ve açıklamasını görüntüleme.
  • Angular.html



Anguler


    

  • Course : {{ptutor.Name}} - {{ptutor.Description}}
    •
  • Node.html



Node


    

  • Course : {{ptutor.Name}} - {{ptutor.Description}}
    •

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ı:

AngularJS Topics bağlantısını tıklarsanız, aşağıdaki çıktı görüntülenecektir.

Çıktı açıkça gösteriyor ki,

  • "Angular JS Topics" linkine tıklandığında, kodumuzda belirttiğimiz routeProvider, Angular.html kodunun enjekte edilmesi gerektiğine karar verir.
  • Bu kod, ng-view direktifini içeren "div" etiketine enjekte edilecektir. Ayrıca, kurs açıklamasının içeriği, AngularController'da tanımlanan kapsam nesnesinin parçası olan "öğretici değişken" den gelir.
  • Node.js Konularına tıklandığında, aynı sonuç ortaya çıkacak ve Node.js konularının görünümü ortaya çıkacaktır.
  • Ayrıca, sayfa URL'sinin aynı kaldığına dikkat edin, değişen yalnızca # etiketinden sonraki yoldur. Ve bu, tek sayfalı uygulamalar kavramıdır. URL'deki #hash etiketi, rotayı (bizim durumumuzda yukarıdaki resimde gösterildiği gibi 'Açısal') ve ana HTML sayfasını (Örnek.html) ayıran bir ayırıcıdır.

Varsayılan bir yol oluşturma

AngularJS'de yönlendirme ayrıca tesisin varsayılan bir rotaya sahip olmasını sağlar. Bu, mevcut rota için bir eşleşme yoksa seçilen rotadır.

Varsayılan yol, $ routeProvider hizmetini tanımlarken aşağıdaki koşul eklenerek oluşturulur.

Aşağıdaki sözdizimi, yalnızca mevcut rotalardan herhangi biri eşleşmezse farklı bir sayfaya yönlendirmek anlamına gelir.

otherwise ({redirectTo: 'page'});

Yukarıdaki aynı örneği kullanalım ve $ routeProvider hizmetimize varsayılan bir yol ekleyelim.

function($routeProvider){$routeProvider.when('/Angular',{templateUrl : 'Angular.html',controller: 'AngularController'}).when("/Node", {templateUrl: 'Node.html',controller: 'NodeController'}).otherwise({redirectTo:'/Angular'});}]);

Kod Açıklaması:

  1. Burada, yukarıdaki ile aynı kodu kullanıyoruz, tek fark, aksi takdirde ifadesini ve herhangi bir yol belirtilmezse hangi görünümün yüklenmesi gerektiğini belirtmek için "redirectTo" seçeneğini kullanmamızdır. Bizim durumumuzda '/ Angular' görünümünün gösterilmesini istiyoruz.

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

  • Gösterilen varsayılan görünümün açısal JS görünümü olduğunu açıkça görebilirsiniz.
  • Bunun nedeni, sayfa yüklendiğinde $ routeProvider işlevindeki "aksi halde" seçeneğine gitmesi ve "/ Angular" görünümünü yüklemesidir.

Rotadan parametrelere erişim

Angular ayrıca yönlendirme sırasında parametre sağlamak için işlevsellik sağlar. Parametreler URL'deki yolun sonuna eklenir, örneğin, http: //guru99/index.html#/Angular/1 . Bu örnekte

  1. , http: //guru99/index.html ana uygulama URL’mizdir
  2. # Sembolü, ana uygulama URL'si ile yol arasındaki ayırıcıdır.
  3. Bizim rotamız açısal
  4. Ve son olarak '1' rotamıza eklenen parametredir

URL'de parametrelerin nasıl göründüğüne ilişkin sözdizimi aşağıda gösterilmiştir:

HTMLPage # / rota / parametre

Burada parametrenin URL'deki rotadan sonra geçtiğini fark edeceksiniz.

Dolayısıyla, yukarıdaki Angular JS konuları için örneğimizde, aşağıda gösterildiği gibi bir parametreyi geçebiliriz

Sample.html # / Angular / 1

Sample.html # / Angular / 2

Sample.html # / Angular / 3

Burada 1, 2 ve 3 parametreleri aslında konu kimliğini temsil edebilir.

Bunu nasıl uygulayabileceğimize ayrıntılı olarak bakalım.

Adım 1) Aşağıdaki kodu görünümünüze ekleyin

  1. Angular JS kursu için tüm konuları kullanıcıya göstermek için bir tablo ekleyin

  2. "Denetleyiciler" konusunu göstermek için bir tablo satırı ekleyin. Bu satır için href etiketini "Angular / 1" olarak değiştirin; bu, kullanıcı bu konuyu tıkladığında, parametre 1'in yolla birlikte URL'de geçirileceği anlamına gelir.

  3. "Modeller" konusunu göstermek için bir tablo satırı ekleyin. Bu satır için href etiketini "Angular / 2" olarak değiştirin; bu, kullanıcı bu konuyu tıkladığında, parametre 2'nin yolla birlikte URL'de geçirileceği anlamına gelir.

  4. "Yönergeler" konusunu göstermek için bir tablo satırı ekleyin. Bu satır için, href etiketini "Angular / 3" olarak değiştirin; bu, kullanıcı bu konuyu tıkladığında, 3 parametresinin yolla birlikte URL'de geçirileceği anlamına gelir.

Adım 2) Yönlendirici hizmet işlevinde, yolun ardından URL'de iletilen herhangi bir parametrenin topicId değişkenine atanması gerektiğini belirtmek için: topicId öğesini ekleyin.

Adım 3) Kontrolöre gerekli kodu ekleyin

  1. Denetleyici işlevini tanımlarken önce "$ routeParams" parametresini eklediğinizden emin olun. Bu parametre, URL'de iletilen tüm yol parametrelerine erişebilecek.
  2. "RouteParams" parametresinin, bir yönlendirme parametresi olarak iletilen topicId nesnesine bir başvurusu vardır. Burada '$ routeParams.topicId' değişkenini kapsam nesnemize '$ kapsam.tutotialid' değişkeni olarak ekliyoruz. Bu, bizim görüşümüze tutorialid değişkeni aracılığıyla başvurulabilmesi için yapılmaktadır.

Event Registration

Guru99 Global Event





 #Angular JS topicDescription 


 



llControllersTopic details



22ModelsTopic details



33DirectivesTopic details

Adım 4) Angular.html sayfasında tutorialid değişkenini görüntülemek için ifadeyi ekleyin.



Anguler



{{tutorialid}}

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ı:

Çıkış ekranında,

  • İlk konu için Konu Ayrıntıları bağlantısını tıklarsanız, 1 rakamı URL'ye eklenir.
  • Bu sayı daha sonra Angular.JS yönlendirici hizmeti tarafından bir "routeeparam" argümanı olarak alınacak ve daha sonra denetleyicimiz tarafından erişilebilir.

Angular $ rota hizmetini kullanma

$ Route hizmeti, rotanın özelliklerine erişmenizi sağlar. $ Route hizmeti, işlev denetleyicide tanımlandığında bir parametre olarak kullanılabilir. $ Route parametresinin denetleyiciden nasıl elde edilebileceğinin genel sözdizimi aşağıda gösterilmiştir;

myApp.controller('MyController',function($scope,$route)
  1. myApp, uygulamalarınız için tanımlanan angular.JS modülüdür
  2. MyController, uygulamanız için tanımlanan denetleyicinin adıdır
  3. Denetleyiciden görünüme bilgi iletmek için kullanılan $ kapsam değişkeninin uygulamanız için kullanıma sunulması gibi. $ Route parametresi, yolun özelliklerine erişmek için kullanılır.

$ Route hizmetini nasıl kullanabileceğimize bir göz atalım.

Bu örnekte,

  • "Bu açısal" dizesini içerecek olan "metnim" adında basit bir özel değişken oluşturacağız.
  • Bu değişkeni rotamıza ekleyeceğiz. Ve daha sonra $ route hizmetini kullanarak denetleyicimizden bu dizeye erişeceğiz ve ardından bunu bizim görünümümüzde görüntülemek için kapsam nesnesini kullanacağız.

Öyleyse, bunu başarmak için atmamız gereken adımları görelim.

Adım 1) Rotaya özel bir anahtar / değer çifti ekleyin. Burada, "metnim" adlı bir anahtar ekliyoruz ve ona "Bu açısaldır" değerini atıyoruz.

Adım 2) İlgili kodu kontrolöre ekleyin

  1. $ Route parametresini denetleyici işlevine ekleyin. $ Rota parametresi, bir kişinin rotanın özelliklerine erişmesine izin veren, açısal olarak tanımlanan bir anahtar parametredir.
  2. Rotada tanımlanan "mytext" değişkenine $ route.current referansı üzerinden erişilebilir. Bu daha sonra kapsam nesnesinin 'metin' değişkenine atanır. Metin değişkenine daha sonra görünümden uygun şekilde erişilebilir.

Event Registration

Guru99 Global Event





 #Angular JS topicDescription 


 



llControllersTopic details



22ModelsTopic details



33DirectivesTopic details

Adım 3) Kapsam nesnesinden metin değişkenine bir ifade olarak bir başvuru ekleyin. Bu, aşağıda gösterildiği gibi Angular.html sayfamıza eklenecektir.

Bu, "Bu açısaldır" metninin görünüme eklenmesine neden olacaktır. {{Tutorialid}} ifadesi, önceki başlıkta görülenle aynıdır ve bu, '1' sayısını gösterecektir.



Anguler



{{text}}

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

  • Tablodaki bağlantılardan herhangi birine tıkladığımızda "Bu açısal" metninin de görüntülendiğini görebiliriz. Konu kimliği de metinle aynı anda görüntülenir.

HTML5 Yönlendirmesini Etkinleştirme

HTML5 yönlendirmesi temelde temiz URL oluşturmak için kullanılır. Hashtag'in URL'den kaldırılması anlamına gelir. Dolayısıyla, HTML5 yönlendirmesi kullanıldığında yönlendirme URL'leri aşağıda gösterildiği gibi görünecektir.

Sample.html / Angular / 1

Sample.html / Angular / 2

Sample.html / Angular / 3

Bu kavram normalde kullanıcıya güzel URL sunmak olarak bilinir.

HTML5 yönlendirmesi için gerçekleştirilmesi gereken 2 ana adım vardır.

  1. $ LocationProvider'ı yapılandırma
  2. Göreli bağlantılar için temelimizi belirleme

Yukarıdaki örneğimizde yukarıda belirtilen adımların nasıl gerçekleştirileceğinin detayına bakalım.

Adım 1) İlgili kodu açısal modüle ekleyin

  1. Uygulamaya bir baseURL sabiti ekleyin - Bu, uygulamanın uygulamanın temel konumunun ne olduğunu bilmesi için HTML5 yönlendirmesi için gereklidir.
  2. $ LocationProvider hizmetlerini ekleyin. Bu hizmet, html5Mode'u tanımlamanıza izin verir.
  3. $ LocationProvider hizmetinin html5Mode değerini true olarak ayarlayın.

Adım 2) Okunması kolay URL oluşturmak için bağlantıların ('Angular / 1', 'Angular / 2', 'Angular / 3') tüm #tag'lerini kaldırın.

Event Registration

Guru99 Global Event





 #Angular JS topicDescription 


 



llControllersTopic details



22ModelsTopic details



33DirectivesTopic details

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

  • Uygulamaya erişirken # etiketinin orada olmadığını görebilirsiniz.

Özet

  • Yönlendirme, kullanıcıya aynı web sayfasında farklı görünümler sunmak için kullanılır. Bu, temelde neredeyse tüm modern web uygulamaları için uygulanan Tek sayfalı uygulamalarda kullanılan konsepttir.
  • Angular.JS yönlendirme için varsayılan bir yol ayarlanabilir. Kullanıcıya gösterilecek varsayılan görünümün ne olacağını belirlemek için kullanılır.
  • Parametreler, yönlendirme parametreleri olarak URL aracılığıyla yola iletilebilir. Bu parametrelere daha sonra denetleyicideki $ routeParams parametresi kullanılarak erişilebilir.
  • $ Route hizmeti, rotadaki özel anahtar-değer çiftlerini tanımlamak için kullanılabilir ve bunlar daha sonra görünümün içinden erişilebilir.
  • HTML5 yönlendirmesi, güzel bir URL oluşturmak için URL'yi yönlendirmeden #tag'i açısal olarak kaldırmak için kullanılır