Angular JS – View

Merhabalar

Angular JS nin V’si olan “View for Vendeta” ile devam ediyoruz. View denilen yapı aslında HTML dosyalarından baska bir şey değildir.Bildiğiniz gibi AngularJS için şöyle böyle demiştik ,sonra kendisinden Single Page Application olarak bahsetmiştik. Buradaki mantık sabit bir index.html sayfası ve içerisinde sayfalarımızın içeriği ile değişen küçük, leziz, gerçek html parçacıkları ile donatılmış, harika bir tat.

Şimdi isterseniz bu View olayı nasıl çalışıyor sayfa üzerinde nasıl gösteriliyor bir göz atalım…

Öncelikle gerekli olan malzemeleri sayıyorum

1 adet Angularjs kütüphanesi buradan temin ediyorsunuz

1 adet Angularjs Route kütüphanesi onuda buradan temin ediyorsunuz

1 adet Notepad++ o sizde var zaten olmayanı dövüyoruz 🙂

Evet tarife geçelim artık…

Index.HTML dosyanızı oluşturarak içersine şu kodları ekliyorsunuz.

<!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script src="main.js"></script>
</head>
<body>
<a href="#/"> View 1</a>
<a href="#/view2"> View 2</a>
<div ng-view>

</div>

</body>
</html>

									

Daha önceki Controller makalesindeki indexten tek farkı bir fazla kütüphane ve bir de ng-view denen bir dalga motor eklemişiz.

Ng-view  bizim sayfa göstericimiz  yani ASP.Net de ContentPlaceHolder vardı aynı ondan işte 🙂  ng-view üzerinde gösterilecek olan küçük html parçaları yani sayfa içerikleri ,ngroute kütüphanesini kullanarak oluşturacağımız config nesnesi üzerindeki yönergeleri takip ederek ng-view üzerinde değişirler.

O zaman bir config nesnesi oluşturalımda neymiş bu olay görelim.

var app = angular.module('myApp',['ngRoute']);
app.config(['$routeProvider',function($routeProvider){
    $routeProvider.when('/',
        {
        templateUrl:'myView.html',
            controller:'MyCtrl'
        }
    ).when('/view2',
        {
            templateUrl:'myview2.html',
            controller:'MyCtrl2'
        }
    )

}]);

									

Görüldüğü üzere module tanımlarken içerisine mutlaka ngRoute tanımlıyoruz ki config oluşturduğumuzda “bu ne lan?”  demesin.

Daha sonra config içersinde $routeProvider.when() metodunu kullanıp sayfa url si sonundaki parametreleri yazarak hangi view gösterilecek bu view in controller i ne olacak belirtebiliyoruz.

Sonrasinda buda Controller im bunu zaten biliyorsunuz bilmiyorsanız “o ne la?” diyorsanız buraya bakınız.

app.controller('MyCtrl',['$scope',function($scope){
    $scope.test="Bu View 1 dir ";
}]);

app.controller('MyCtrl2',['$scope',function($scope){
    $scope.test="Bu View 2 dir";
}]);
									

Bu arada yukarıda yazmış olduğum config ve controller tek bir JS dosyası içersine yazılıyor yani en azından ben şuanlık öyle yaptım sonra dosya yapısı ve klasörleme yöntemlerinide anlatacağım.

Son olarak eklemiş olduğum iki View  içersine aynı şeyleri yazdım oda şöyle ki :

<div> {{test}} </div>
									

Ve çalıştırdığım zaman aldığım çıktıda burada 🙂

view2 view1

Sonuç olarak 2 değişik sayfayı bir index.html içersinde gösterdik ve sayfa değişimlerini sağladık.

Umarım Yararlı Olur

Bilgiyle Kalın

M.Zeki OSMANCIK

Leave a Reply

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box