07_AngularJs_Views_Routes

Merhaba arkadaşlar, bu yazımda sayfalar arası yönlendirme ve görüntüleme konusunu anlatacağım.

İki adet farklı sayfamız ve bir adet de headerimiz olsun. Header sayfamız iki sayfada da ekli olsun. Header sayfamızda olan menü sayesinde sayfa1 ve sayfa2 arasında geçiş ve yönlendirme yapalım. Şimdi kodlar üzerinde konuyu anlatalım:

Header.html

  <div class="row">
    <a href="#!/sayfa1">Sayfa1</a>
  </div>
  <div class="row">
    <a href="#!/sayfa2">Sayfa2</a>
  </div>

<a href="#!/sayfa1">Sayfa1</a>

</div>

<a href="#!/sayfa2">Sayfa2</a>

</div>

İndex.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>İndex</title>
  <script type="text/javascript" src="../../resources/js/angular.min.js"></script>
  <link rel="stylesheet" href="../../resources/css/bootstrap.min.css">
  <script type="text/javascript" src="../../lib/angular-route.min.js"></script>
  <script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="App" ng-controller="AppController">
  <div class="container">
    <ng-include src="'header.html'"></ng-include>
    <div class="row">
      <main ng-view></main>
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>İndex</title>

</head>

<ng-include src="'header.html'"></ng-include>

</div>

</body>

</html>

Görüldüğü gibi ng-include direktifi ile header sayfamıza eklenmiş. Ng-include direktifini önceki derslerde anlatmıştık. Bu sayfada dikkat edilmesi gereken yerler script etiketi ile angular-route.min.js dosyasının eklenmesi ve <main> etiketi.

Angular-route.min.js dosyası sayfalar arası yönlendirme için kullanılan script dosyasıdır.

Ng-view => Yönlendirme için oluşturulan templatelerin belirlenen alanda gösterilmesini sağlar.

Sayfa1.html

<h2>Sayfa1</h2>

1	<h2>Sayfa1</h2>

Sayfa2.html

<h2>Sayfa2</h2>

1	<h2>Sayfa2</h2>

Sayfa1 ve Sayfa2 sayfalarımızda sadece sayfa isimleri başlık olarak yazmaktadır. İndex.html sayfasından hangi sayfaya gidilmek istense ng-view direktifinin olduğu yere o sayfanın kodu otomatik olarak yerleşir.

App.js

var app = angular.module('App', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/sayfa1', {
      templateUrl: 'sayfa1.html',
      controller: 'AppController'
    }).
  when('/sayfa2', {
    templateUrl: 'sayfa2.html',
    controller: 'AppController'
  }).otherwise({
    redirectTo: '/'
  });
}]);
app.controller('AppController', ['$scope', function($scope) {

}]);

var app = angular.module('App', ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {

$routeProvider

.when('/sayfa1', {

templateUrl: 'sayfa1.html',

controller: 'AppController'

}).

when('/sayfa2', {

templateUrl: 'sayfa2.html',

controller: 'AppController'

}).otherwise({

redirectTo: '/'

});

}]);

app.controller('AppController', ['$scope', function($scope) {

}]);

Görüldüğü gibi modüle içerine ngRoute bağımlılığı eklenmiş. ngRoute bağımlılığı sayfa yönlendirmesi için kullanılır. Sayfa yönlendirme işlemi config() metodu içerisinde yapılır. When() metodunun ilk parametresi path’i belirtir.

templateUrl => Hangi sayfanın kullanılacağı yol olarak belirtilir.

Controller => Gidilecek sayfada kullanılan controller ismi belirtilir.

Otherwise() => Sayfa bulunamadığında hangi sayfaya yönlendirme yapılacağı belirtilir.

İndex

Sayfa1

Bu yazıyı burada bitiriyorum diğer yazılarımda görüşmek üzere…

Bir cevap yazın Cevabı iptal et