AngularJs’de Routing ve Template

Selamlar;

AngularJs ile uğraşan arkadaşların routing konusu üzerine yaşadıkları sorunlar  üzerine bugünkü makaleyi yazmaya karar verdim. Yani bugün AngularJS’de routing kavramı üzerine konuşacağız.

Routing aslında Single Page uygulamalarda, farklı birden çok sayfanın görüntülenmesi için AngularJs’de kullanılan bir özelliktir. Bir başka özelliği de projede dağıtık bir mimari oluşturmayı sağlıyarak, yönetilebilirliği ve erişim kolaylığı sağlamasidir. Kısaca uygulamayı çeşitli sayfalara ayırarak, herbirini farklı controllerlara bağlar.

Routing

Öncelikle bir Mvc projesi yaratılıp NuGet’den aşağıdaki paketler indirilir. Projede AngularJS.Core ve Route işlemi için AngularJS.Route script dosyaları indirilmiştir. Ayrıca görsellik için de bootstarp indirilmiştir..

package

Index.cshtml sayfasına, ilgili script ve css dosyaları aşağıdaki gibi eklenir.

Şimdi sıra geldi sayfada sıralı bir menü ve tıklandığında ilgili sayfanın açılacağı kısımın bootstrap ile kodlanmasına. Aşağıda, ana sayfadan sipariş, sipariş detay ve parametre alan bir sayfaya yönlenen list item bir menü bulunmaktadır. Esas önemli kısım “ng-view” directivedir. Amacı oluşturulacak Html templatelerin belirlenen alanda gösterilmesidir. Yani menüye tıklanınca açılacak ilgili sayfa “ng-view” directive’i ile tanımlanmış “<div>”‘in içinde belirecektir.

Menu

Şimdi sıra geldi açılacak bu sayfaların tanımlanmasına. “Modules” adında bir klasörün içine aşağıda görüldüğü gibi ilgili sayfalar ve Controller.js’leri yaratılır.

Pages

ss

Siparis.Controller.js: İlgili app’e “SiparisController” eklenir. “myName” ve “product” adında iki tane property yaratılmıştır.

siparis.html: “ng-controller” olarak yukarıda tanımlanan “SiparisController” tanımlanmıştır. İlgili isim ve ürün ekrana bastırılmaktadır.

sd

DetayController.js: Burada üç property tanımlanmıştır. “myName”,”product” ve “price”

detay.html:“DetayController”‘da tanımlanan alanlar ekrana basılmıştır.

Query

ParameterPageController.js: Burada diğerlerinden farklı olarak sayfaya url’de query parameteresi gelmekte ve ilgili parametre “$routeParams” ile tanımlanan “id” property’sine atanmaktadır. Menüden çağrılış şekli yanda görüldüğü gibidir. “#ParameterPage/16789

ParameterPage.html:  Bu sayfada yukarıda “ParameterPageController”‘da tanımlı “myName” ve Url ile gelen “id” parametreleri ekrana basılmaktadır.

Şimdi sıra geldi ilgili sayfaların routing işlemine. Bunun için aşağıda görülen app.js yaratılır. “$routeProvider“‘ ile aynı Mvc’de olduğu gibi Url’den gelen string path’e göre filitreleme işlemi yapılır. “when” koşulu ile belirlenen text’e göre ilgili sayfa bulunduktan sonra, “templateUrl” ile yönlendirileceği sayfa tanımlanır. Sayfanın ait olduğu controller’da “controller” parametresi ile atanır. Böylece menüden seçilen link’e göre, karşımıza gelen url’den önceden belirlenen keyword’lere göre filitreleme islemi yapilip, istenilen sayfaya yönlenilir. Örneğin aşağıda bu keywordler “Siparis, Detay ve ParameterPage” dir. Ayrıca sayfada parametre var ise, örneğin aşağıda “ParameterPage”‘de “:id” şeklinde ilgili parametre routing işleminde tanımlanır.

app.js:

Bu sayfalarda kullanılan tüm “.js” dosyaları, anasayfada aşağıdaki gibi tanımlanmaktadır.

Local Viewlar :

Bazen template sayfalar çok küçük olabilir. Örneğin sadece kullanıcının adını göstermek için yeni bir html sayfa yapmak çok da mantıklı değildir. İşte bu durumda ilgili view’ı yeni bir html sayfa yerine aynı sayfa üzerinde “ng-template” directive’i ile göstermek daha doğrudur. Index.cshtml sayfasına bahsedilen local templateler aşağıdaki gibi eklenir.

Index.cshtml(View):

temp

Index.cshtml(Full): Yeni eklenen templateler, menü kısmına da aşağıda görüldüğü gibi eklenir.

routing

Yukarıda yaptığımız bu örnekde AngularJs routing konusuna açılık getirmeye çalıştık. Görüldüğü gibi hiç de zor değildir.

Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın..

Kaynak: c-sharpcorner.com

Source Code: http://www.borakasmer.com/projects/AngularJSRouting.rar

 

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

10 Cevaplar

  1. Erdinç dedi ki:

    Merhaba,

    Route ve Template işlemleri için angular-route.js dosyası gerekiyor mu gerçekten. Bu dosyalar olmadan çalıştı çünkü.

    • borsoft dedi ki:

      Selam Erdinç;
      Sen böyle deyince, şüphe ettim ve denedim. Malesef çalışmadı. angular-route.js olmadan routing nasıl çalıştı sen de merak ettim:) Büyük ihtimalle projende bir yerde saklanmıştır:)

      İyi çalışmalar..

      Eğer angular-route.js konmaz ise Console’daki hata mesajı aşağıdaki gibi alınır:
      Hata Mesajı

  2. Erdinç dedi ki:

    Hocam merhaba,

    araştırdım eski sürüm olmasından kaynaklanıyor.

    https://docs.angularjs.org/error/$injector/modulerr

    n AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x or later, be sure that you’ve installed ngRoute.

    aşağıdaki sürümü kullanınca route.js’e gerek kalmıyor.

    • Erdinç dedi ki:

      Hocam selam,

      bir sorum olacak. Aşağıdaki şekilde Siparis.html’e ilk tıklamadan sonra hep cache’den getiriyor. Dolayısıyla site açıkken siparis. html sayfasında değişiklik yaptığımda değşikliği algılamıyor.

      when(‘/Siparis’,
      {
      templateUrl: ‘Modules/Siparis/siparis.html’,
      controller: ‘SiparisController’
      })

      Bunu araştırdığımda aşağıdaki gibi bir koda denk geldim. Ama bu kod varken bu sefer local template’ler çalışmıyor. Cache lemyi nasıl engelleyebilirim.

      app.run(function ($rootScope, $templateCache) {
      $rootScope.$on(‘$viewContentLoaded’, function () {
      $templateCache.removeAll();
      });
      });

      • borsoft dedi ki:

        Selam Erdinç;
        Cache’in hepsiden kalkmasını istemiyor isen aşağıdaki yolu kullan:

        .controller(‘SiparisController’, function ($scope, $templateCache) {
        $templateCache.remove(‘Modules/Siparis/siparis.html’);
        });

        İyi çalışmalar….

  3. volkan dedi ki:

    Aynı sayfa üzerinde bir den fazla modele veri eklemek için oluşturduğumuz viewları, aynı sayfa üzerinde ng-view komutu ile göstererek insert işlemi yapabilir miyiz?
    Eğer mümkün değilse nasıl bir çözüm yolu önerirsiniz ?

    • borsoft dedi ki:

      Selamlar Volkan,

      Insert Islemi için AngularJS’de “$http.Post()” kullanarak ilgili view üzerinden yeni kayıt girişi yapabilirsin. Yani “ng-view” kullanarak farklı viewlardan farklı veri girişini “Json Post” kullanarak ilgili Action’a gönderip yapman gayet mümkün.

      İyi çalışmalar.

  4. Ali sahin dedi ki:

    Hocam iyi günler kafam biraz karışık lise öğrencisiyim css ve javascript’i zaten biliyorum ama angular.js ye nerden nasıl başlıyıcağımı bilmiyorum yardımcı olurmusunuz

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir