AngularJS Yönlendirme
Modül ngRoute, uygulamanızın Tek Sayfa Uygulaması olmasına yardımcı olur.
AngularJS'de Yönlendirme Nedir?
Uygulamanızda farklı sayfalarda gezinmek istiyor ancak uygulamanın bir SPA (Tek Sayfa Uygulaması) olmasını da istiyorsanız, sayfa yeniden yüklenmeden ngRoutemodülü kullanabilirsiniz.
Modül , tüm uygulamayı yeniden yüklemeden uygulamanızı farklı sayfalara yönlendirirngRoute .
Örnek:
"red.htm", "green.htm" ve "blue.htm" öğelerine gidin:
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
Neye ihtiyacım var?
Uygulamalarınızı yönlendirmeye hazır hale getirmek için AngularJS Route modülünü eklemelisiniz:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
ngRouteArdından , uygulama modülüne bir bağımlılık olarak eklemelisiniz :
var app = angular.module("myApp", ["ngRoute"]);
Artık uygulamanız, $routeProvider.
$routeProviderUygulamanızda farklı yolları yapılandırmak için kullanın :
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl :
"green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
Nereye gidiyor?
Uygulamanızın, yönlendirme tarafından sağlanan içeriği yerleştirmek için bir kapsayıcıya ihtiyacı var.
Bu kap ng-viewdirektiftir.
ng-viewDirektifi uygulamanıza dahil etmenin üç farklı yolu vardır :
Örnek:
<div ng-view></div>
Örnek:
<ng-view></ng-view>
Örnek:
<div
class="ng-view"></div>
Uygulamaların yalnızca bir ng-viewyönergesi olabilir ve bu, rota tarafından sağlanan tüm görünümler için yer tutucu olacaktır.
$routeProvider
ile, $routeProviderbir kullanıcı bir bağlantıyı tıkladığında hangi sayfanın görüntüleneceğini tanımlayabilirsiniz.
Örnek:
Bir tanımlayın $routeProvider:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
Uygulamanızın yöntemini $routeProviderkullanarak tanımlayın . configYöntemde kayıtlı çalışma config, uygulama yüklenirken gerçekleştirilecektir.
Kontrolörler
ile $routeProviderayrıca her "görünüm" için bir kontrolör tanımlayabilirsiniz.
Örnek:
Denetleyicileri ekleyin:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love London";
});
app.controller("parisCtrl", function
($scope) {
$scope.msg = "I love Paris";
});
"london.htm" ve "paris.htm", AngularJS uygulamanızın diğer HTML bölümlerinde yaptığınız gibi AngularJS ifadelerini ekleyebileceğiniz normal HTML dosyalarıdır.
Dosyalar şöyle görünür:
<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It
is the most populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
<p>{{msg}}</p>
<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>
Şablon
Önceki örneklerde , yöntemde templateUrlözelliği
kullandık.$routeProvider.when
templateAyrıca , bir sayfaya atıfta bulunmadan doğrudan özellik değerine HTML yazmanıza izin veren özelliği de kullanabilirsiniz .
Örnek:
Şablonları yazın:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click
on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
});
});
Aksi yöntem
Önceki örneklerde whenyöntemini kullandık $routeProvider.
otherwiseDiğerlerinin hiçbiri eşleşmediğinde varsayılan rota olan yöntemi de kullanabilirsiniz .
Örnek:
Ne "Muz" ne de "Domates" bağlantısı tıklanmadıysa, onlara bildirin:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing
has been selected</p>"
});
});