ngRoute Modülü ve $route Servisi, Turkish Tutorial

codings(54)
Published in
#utopian-io
Words
516
Reading
3 min
Listen
Play
9y

Neler Öğreneceğim?

  • ngRoute Modülü ve $route Servisi
  • Template Sayfaları ile Adresleme
  • Diez (#) Bulundurmayan Adresleme Yöntemi

Gereksinimler

  • Notepad++

Zorluk Düzeyi

  • Intermediate (Orta Seviye)

English

ngRoute Module and $ route Service

As with touch operations and animations in AngularJS, the routing feature is also used to load an additional module.

Addressing with Template Pages

In our example, we used the inline template feature. But as always, you can also extract these templates from your own HTML page.

Diez (#) Incomplete Addressing Method

In a browser with HTML5 support, we can use the classic custom site / webpage structure. We need to enable HTML5 mode by using the customized $locationProvider service. Accordingly, the final version of the code will be as follows;

Türkçe

ngRoute Modülü ve $route Servisi

AngularJS'de dokunmatik işlemleri ve animasyonlarda olduğu gibi, routing özelliği de ek bir modül yüklemek itibari ile kullanılmaktadır.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>

Sayfaya Uygulanmış Hali

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Ders Uygulamaları</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
</head>

    <div ng-app="ngUygulamam" ng-controller="ngKontrol">
        Normal İçerik
    </div>
    
    <script type="text/javascript">
        var uygulama = angular.module("ngUygulamam", []);
        uygulama.controller("ngKontrol", function($scope) {

        });
    </script>

</body>
</html>

AngularJS15.png

Her modülü kullandığımız gibi bu modülü HTML sayfasına ekledikten sonra, kendi uygulama modülümüzü oluştururken. üçüncü parti modülü de aktarıyoruz;

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Ders Uygulamaları</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
</head>

    <div ng-app="ngUygulamam" ng-controller="ngKontrol">
        Normal İçerik
    </div>

    <script type="text/javascript">
        var uygulama = angular.module("ngUygulamam", ['ngRoute']);
        uygulama.controller("ngKontrol", function($scope) {

        });
    </script>

</body>
</html>

AngularJS16.png

Bundan sonra yapmamız gereken, $routeProvider servisine, hangi sayfalarda hangi template'lerin çalışacağını config kontrol metodu ile söylemek olacak.

Hazırladığımız basit örnekte bunun nasıl yapıldığına bakalım;

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Ders Uygulamaları</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>

</head>

    <div ng-app="ngUygulamam" ng-controller="ngKontrol">
        <ul>
            <li><a href="#!/">Anasayfa</a></li>
            <li><a href="#!/hakkimizda">Hakkımızda</a></li>
            <li><a href="#!/kurumsal">Kurumsal</a></li>
            <li><a href="#!/iletisim">İletisim</a></li>
        </ul>
        <div ng-view></div>
        <hr> {{deneme}}
    </div>
    <script type="text/javascript">
        var uygulama = angular.module("ngUygulamam", ["ngRoute"]);

        uygulama.controller("ngKontrol", function($scope) {
            $scope.deneme = "Deneme String";
        });
        uygulama.config(function($routeProvider) {
            $routeProvider
                .when('/', {
                    template: 'Anasayfa içeriği'
                })
                .when('/hakkimizda', {
                    template: 'Hakkımızda İçeriği'
                })
                .when('/kurumsal', {
                    template: 'Kurumsal İçeriği'
                })
                .when('/iletisim', {
                    template: 'İletişim İçeriği'
                })
                .otherwise({
                    redirectTo: '/'
                });
        });
    </script>
</body>
</html>

AngularJS17.png

AngularJS18.png

AngularJS19.png

AngularJS20.png

Örneğimizde gördüğünüz gibi, config kontrol metodu ile, enjekte ettiğimiz $routeProvider servisi ile Anasayfa, Hakkımızda gibi link ile ulaşılabilir olması gereken sayfaları ngview üzerine atadık.

Burada dikkat ederseniz, .otherwise() metodu ile bizim haritamızda bulunmayan bir adres ziyaret edildiğinde kullanıcıyı anasayfa adresine gönderiyoruz. Burada isterseniz bir 404 adresine gönderip bu adrese özel bir template oluşturabilirsiniz.

Template Sayfaları ile Adresleme

Örneğimizde inline template özelliğini kullandık. Fakat her zaman olduğu gibi, bu template'leri kendine ait HTML sayfası üzerinden de çekebilirsiniz.

Şöyle ki;

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Ders Uygulamaları</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>

</head>

    <div ng-app="ngUygulamam" ng-controller="ngKontrol">
        <ul>
            <li><a href="#!/">Anasayfa</a></li>
            <li><a href="#!/hakkimizda">Hakkımızda</a></li>
            <li><a href="#!/kurumsal">Kurumsal</a></li>
            <li><a href="#!/iletisim">İletisim</a></li>
        </ul>
        <div ng-view></div>
        <hr> {{deneme}}
    </div>
    <script type="text/javascript">
        var uygulama = angular.module("ngUygulamam", ["ngRoute"]);
        uygulama.controller("ngKontrol", function($scope) {
            $scope.deneme = "Deneme String";
        });
        uygulama.config(function($routeProvider) {
            
            $routeProvider
                .when('/', {
                    templateUrl: 'template/anasayfa.html'
                })
                .when('/hakkimizda', {
                    templateUrl: 'template/hakkimizda.html'
                })
                .when('/kurumsal', {
                    templateUrl: 'template/kurumsal.html'
                })
                .when('/iletisim', {
                    templateUrl: 'template/iletisim.html'
                })
                .otherwise({
                    redirectTo: '/'
                });
    
        });
    </script>
</body>
</html>

AngularJS22.png

AngularJS23.png

Hatırlarsanız önceki bölümlerde templateurl'den bahsetmiştik. Oluşturmuş olduğumuz HTML dosyaları ile template verilerini yönetiyoruz. Bunlara ek olarak proje çalışma ortamınızı daha verimli hale getirmek için, kullandığınız template dosyalatını bir klasöre toplamakta fayda var. Burada dikkatinizi çektiyse, URL adresi ve bu adrese tekabül eden template HTML dosyasının isimleri aynı. Gelecekte eklediğim yeni sayfalarda da bu örüntüyü takip etmeyi planlıyorsam, bu kodu daha kolay okunabilir bir hale getirebilirim;

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Ders Uygulamaları</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>

</head>

    <div ng-app="ngUygulamam" ng-controller="ngKontrol">
        <ul>
            <li><a href="#!/">Anasayfa</a></li>
            <li><a href="#!/hakkimizda">Hakkımızda</a></li>
            <li><a href="#!/kurumsal">Kurumsal</a></li>
            <li><a href="#!/iletisim">İletisim</a></li>
        </ul>
        <div ng-view></div>
        <hr> {{deneme}}
    </div>
    <script type="text/javascript">
        var uygulama = angular.module("ngUygulamam", ["ngRoute"]);
        uygulama.controller("ngKontrol", function($scope) {
            $scope.deneme = "Deneme String";
        });
        uygulama.config(function($routeProvider) {
            
            var sayfalar = ["hakkimizda", "kurumsal", "iletisim"];
            $routeProvider
                .when('/', {
                    templateUrl: 'template/anasayfa.html'
                })
                .otherwise({
                    redirectTo: '/'
                });
                sayfalar.forEach(function(sayfa){
                  $routeProvider.when('/'+sayfa, {
                      templateUrl: 'template/'+sayfa+'.html'
                  });
                });

        });
    </script>
</body>
</html>

AngularJS21.png

AngularJS24.png

Aynı işlevi gören bu yeni kodum ile, sayfalar array'ine eklediğim string template HTML dosyası isimleri, otomatik olarak routable (bu isim ile adres çubuğunda gezilebilir) olacak.

Not: Burada dikkatinizi ek olarak önemli bir noktaya çekmek istiyorum. An itibari ile site adresini alışıldık site.com/hakkimizda halinde gezmek yerine site.com#!/hakkimizda gibi bir çapa string'i ile geziyoruz.

Bunun nedeni, web sunucu istemici yazılımı ile (backend) AngularJS'in routing (yönlendirme) amacıyla iletişim kurmuyor olması. Bildiğiniz gibi #(diez) ile sayfada çapalar oluşturarak, sayfada bu konuma atlamayı Javascript ile sağlayabiliyoruz. AngularJS'in kullandığl alt yapı da aslına bakarsanız bu yerel yapı.

Diez (#) Bulundurmayan Adresleme Yöntemi

HTML5 destekli bir tarayıcıda, klasik alışıldık site.com/hakkimizda yapısını kullanabiliriz. Bunun için özelleşmiş $locationProvider servisini kullanarak, HTML5 modunu aktif etmeliyiz. Buna göre kodumuzun son hali şöyle olacak;

<!DOCTYPE html>
<html>
<head>
    <title>Angular JS Ders Uygulamaları</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>

</head>

<div ng-app="ngUygulamam" ng-controller="ngKontrol">
    <ul>
        <li><a href="/">Anasayfa</a></li>
        <li><a href="hakkimizda">Hakkımızda</a></li>
        <li><a href="kurumsal">Kurumsal</a></li>
        <li><a href="iletisim">İletisim</a></li>
    </ul>
    <div ng-view></div>
    <hr> {{deneme}}
</div>
<script type="text/javascript">
    var uygulama = angular.module("ngUygulamam", ["ngRoute"]);

    uygulama.controller("ngKontrol", function($scope) {
        $scope.deneme = "Deneme String";
    });
    uygulama.config(function($routeProvider, $locationProvider) {
        var sayfalar = ["hakkimizda", "kurumsal", "iletisim"];
        $routeProvider
            .when('/', {
                templateUrl: 'template/anasayfa.html'
            })
            .otherwise({
                redirectTo: '/AngularJS.php'
            });
        sayfalar.forEach(function(sayfa) {
            $routeProvider.when('/' + sayfa, {
                templateUrl: 'template/' + sayfa + '.html'
            });
        });
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });
    });
</script>
</body>
</html>

AngularJS25.png

AngularJS26.png

AngularJS27.png

Görselimizdeki adres çubuğuna dikkat ediniz.

Bazı durumlarda, sunduğumuz alt sayfalar için, ana kontrol metodunu kullanmaktansa, bahsi geçen sayfa için farklı bir kontrol metodu kullanmak isteyebiliriz. Bu gibi bir durumda, $routeProvider altında, her bir adres için kullanılan template üzerine oluşturduğumuz bir kontrol metodunu atayabiliriz.


Posted on Utopian.io - Rewarding Open Source Contributors

utopian-io
angularjs
via utopian
This post was published via utopian. Ecency is not the originator or editor of this content and displays it for discovery purposes only.
6