AngularJS ile sayfaları parçalara ayırıp daha okunaklı ve anlaşılır projeler hazırlayabilirsiniz ve AngularJS route yapısı ile bu ayrı sayfaları ve içerisindeki controller verileri asenkron bir şekilde sayfa yenilemesi olmadan gösterilmesi sağlayacağız.
AngularJS ile route işlemleri ve template yapısı kullanımı
Bu örneğimizde iki adet angular kütüphanesi kullacağız ilki genel olarak kullanılması gereken angular.js diğeride angular-route.js kütüphanesidir. ayrıca veri olarakda 6 tane ülkemizin tanımlı olduğu country.json adlı bir dosyadan alıp route ve template’de veri alma işleme işlemlerini bu .json dosyasındaki veriler ile yapacağız. country.json içeriğimiz aşağıdaki gibi.
JSON(country.json)
1 2 3 4 5 6 7 8 9 | { "ulkeler": [ "Türkiye", "Azerbeycan", "Irak", "Suriye", "İran", "Bulgaristan"] } |
Şimdi ise index.html dosyasını oluşturalım aslında template yapısı olduğundan index.html dosyasını asp.net ile benzeştirme yaparsak masterPage olarak görebiliriz diğer sayfaları ise bu masterPage sayfası olan index.html sayfasına gömülecek olan UserControl sayfaları olarak görebiliriz. şimdi index.html yani masterPage sayfamızı görelim.
HTML(index.html)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html ng-app="demo"> <head> <script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></ script> <script src="https://code.angularjs.org/1.4.0-beta.4/angular-route.js"></ script> <script src="js/app.js"></ script> </head> <body> <div ng-view> </div> </body> </html> |
Üstteki kodda ayrı olarak önemli olan bir diğer konu route işlemi sonucu gösterilecek template dosyaları derlendikten sonra nerede gösterileceğidir. Benim body etiketi altındaki div etiketinde belirtmiş olduğum ng-view attribute’ü ile route işlemi sonucunda derlenecek template sayfalarının nerede gösterileceği bu şekilde belirtilmiştir. ng-view attribute’ünü nereye eklerseniz onu içerisine derlecektir template sayfaları.
Şimdi ise diğer iki template sayfalarımız olan biri ülke listesini diğeri ise seçilecek olan ülkenin detayını gösterecek çok basit bir sayfa gösterilecektir.
HTML(country-list.html)
1 2 3 4 5 6 7 8 | <h1>Liste</h1> <div ng-controller="CountryListCtrl"> <ul> <li ng-repeat="ulke in ulkeler"> <a href="#/country/{{ulke}}">{{ulke}}</a> </li> </ul> </div> |
HTML(country-detail.html)
1 2 3 4 | <h1>Detail</h1> <div ng-controller="CountryDetailCtrl"> <h2>{{countryName}}</h1> </div> |
Şimdi en önemli dosya olan module tanımlaması, route ayarları ve controller tanımlarının yer aldığı app.js dosyamıza gözatalım.
Javascript(app.js)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | var app = angular.module("demo", ["ngRoute"]); app.config(function($routeProvider){ $routeProvider. when('/', { templateUrl: 'country-list.html', controller: 'CountryListCtrl' }). when('/country/:countryName', { templateUrl: 'country-detail.html', controller: 'CountryDetailCtrl' }). otherwise({ redirectTo: '/' }); }); app.controller("CountryListCtrl", function($scope, $http){ $http.get("country.json").success(function(res){ $scope.ulkeler = res.ulkeler; }); }); app.controller("CountryDetailCtrl", ["$scope", "$routeParams", function($scope, $routeParams){ $scope.countryName = $routeParams.countryName }]); |
