AngularJS Yönlendirme
- Önceki Sayfa AngularJS Animasyon
- Sonraki Sayfa AngularJS Uygulaması
ngRoute Modül, uygulamanızı tek sayfa uygulaması haline getirir.
AngularJS'teki路由是什么？
Uygulamanın farklı sayfalara yönlendirilmesini istiyorsanız, aynı zamanda uygulamanın SPA (Tek Sayfa Uygulaması) olmasını ve sayfa yeniden yüklenmesini istemiyorsanız, ngRoute Modül.
ngRoute Modül, tüm uygulamanın yeniden yüklenmesini gerektirmeden farklı sayfalara yönlendirir.
Örnek
Bu "red.htm"、"green.htm" ve "blue.htm" sayfalarına yönlendirin:
<body ng-app="myApp">
<p><a href="#/!">Ana Sayfa</a></p>
<a href="#!kırmızı">Kırmızı</a>
<a href="#!yeşil">Yeşil</a>
<a href="#!mavi">Mavi</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>
Ne gerekli?
Uygulamanızı rota için hazırlamak için AngularJS Route modülünü içe aktarmalısınız:
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>
Sonra, ngRoute Uygulama modülüne eklemek için ekleyin:
var app = angular.module("myApp", ["ngRoute"]);
şimdi uygulamanız rota sağlayabilir: $routeProvider Yol
Rota modülünü kullanın $routeProvider Farklı rota ayarlamak için uygulamada yapılandırma yapı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"
});
});
Nerede?;
Uygulamanızın rota sağladığı içeriği yerleştirmek için bir konteyner ihtiyacı vardır.
Bu konteyner ng-view düzenleyici içe aktarılabilir.
Uygulamada üç farklı şekilde ng-view düzenleyici:
Örnek
<div ng-view></div>
Örnek
<ng-view></ng-view>
Örnek
<div class="ng-view"></div>
Uygulama sadece bir ng-view düzenleyici, bu da bu rota sağladığı tüm görünümlerin yer tutucusu olacaktır.
$routeProvider
Kullanım $routeProviderKullanıcı bağlantıya tıkladığında görüntülenmesini istediğiniz sayfayı tanımlayabilirsiniz.
Örnek
tanımlama $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"
});
});
应用程序的 config method definition $routeProvider应用程序加载时将在 config methodlerinde kaydedilen çalışmaları.
kontrolcüler
Kullanım $routeProviderHer "görünüm" için bir kontrolcü tanımlayabilirsiniz.
Örnek
Kontrolcü 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 = "Sevdiğim London";
});
app.controller("parisCtrl", function ($scope) {}}
$scope.msg = "I love Paris";
});
"london.htm" ve "paris.htm", AngularJS ifadelerini ekleyebileceğiniz normal HTML dosyalarıdır, AngularJS uygulamanızın diğer HTML bölümlerinde olduğu gibi.
Bu dosyalar böyle görünüyor:
london.htm
<h1>London</h1>
<h3>London, İngiltere'nin başkentidir.</h3>
<p>Bu, Birleşik Krallık'taki nüfus açısından en kalabalık şehirdir, 13 milyondan fazla metropol nüfusuyla.</p>
<p>{{msg}}</p>
paris.htm
<h1>Paris</h1>
<h3>Paris, Fransa'nın başkentidir.</h3>
<p>Paris bölgesi, Avrupa'nın en büyük nüfus merkezlerinden biri, 12 milyondan fazla nüfusa sahiptir.</p>
<p>{{msg}}</p>
Şablon
Önceki örnekte, $routeProvider.when method'ında kullanıldı templateUrl Özelliği.
Ayrıca template Özelliği, HTML'yi doğrudan öznitelik değerinde yazmanızı sağlar, sayfa referans etmek yerine.
Örnek
Şablon yazın:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>İçeriği değiştirmek için bağlantılara tıklayın</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Muzların yaklaşık %75'i su içerir.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Domateslerin yaklaşık %95'i su içerir.</p>"
});
});
otherwise yöntemini kullandık
Önceki örnekte, $routeProvider when yöntemini kullanabilirsiniz.
Ayrıca otherwise Diğer tüm rotalar uyumsuz olduğunda, bu varsayılan rota olacaktır.
Örnek
Eğer "Banana" bağlantısına veya "Tomato" bağlantısına tıklanmadıysa, onlara şunu söyle:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {}}
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Muzların yaklaşık %75'i su içerir.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Domateslerin yaklaşık %95'i su içerir.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Hiçbir şey seçilmedi.</p>"
});
});
- Önceki Sayfa AngularJS Animasyon
- Sonraki Sayfa AngularJS Uygulaması
