AngularJS marshrutlash (routing)
ngRoute moduli ilovangizning bir sahifali ilova (Single Page Application) bo‘lishiga yordam beradi.
AngularJS’da marshrutlash (routing) nima?
Agar ilovangizdagi turli sahifalarga o‘tmoqchi bo‘lsangiz, lekin ayni paytda ilova sahifani qayta yuklamasdan ishlaydigan SPA (Single Page Application) bo‘lishini ham istasangiz, ngRoute modulidan foydalanishingiz mumkin.
ngRoute moduli butun ilovani qayta yuklamasdan ilovangizni turli sahifalarga yo‘naltiradi (route).
Misol:
"red.htm", "green.htm" va "blue.htm" sahifalariga o‘ting:
<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>
O‘zingiz sinab ko‘ring »
Menga nima kerak?
Ilovalaringizni marshrutlashga tayyorlash uchun AngularJS Route modulini qo‘shishingiz kerak:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
So‘ngra ilova moduliga ngRoute’ni bog‘liqlik sifatida qo‘shishingiz kerak:
var app = angular.module("myApp", ["ngRoute"]);
Endi ilovangiz route moduliga kira oladi, u $routeProvider’ni taqdim etadi.
Ilovangizda turli marshrutlarni sozlash uchun $routeProvider’dan foydalaning:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
U qayerga joylashadi?
Ilovangizga marshrutlash orqali taqdim etiladigan kontentni joylashtirish uchun konteyner kerak.
Bu konteyner — ng-view direktivasi.
ng-view direktivasini ilovangizga qo‘shishning uchta turli usuli mavjud:
Ilovalarda faqat bitta ng-view direktivasi bo‘lishi mumkin va u marshrut orqali taqdim etiladigan barcha ko‘rinishlar (view) uchun joy egasi bo‘ladi.
$routeProvider
$routeProvider yordamida foydalanuvchi havolani bosganda qaysi sahifani ko‘rsatishni belgilashingiz mumkin.
Misol:
$routeProvider’ni belgilang:
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"
});
});
O‘zingiz sinab ko‘ring »
$routeProvider’ni ilovangizning config metodi yordamida belgilang.
config metodida ro‘yxatdan o‘tkazilgan ishlar ilova yuklanayotganda bajariladi.
Kontrollerlar
$routeProvider yordamida har bir "view" (ko‘rinish) uchun kontroller ham belgilashingiz mumkin.
Misol:
Kontrollerlar qo‘shing:
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";
});
O‘zingiz sinab ko‘ring »
"london.htm" va "paris.htm" — oddiy HTML fayllar bo‘lib, ularga AngularJS ilovangizning boshqa har qanday HTML qismlaridagi kabi AngularJS ifodalarini qo‘shishingiz mumkin.
Fayllar quyidagicha ko‘rinadi:
<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>
Shablon (template)
Oldingi misollarda $routeProvider.when metodida templateUrl xususiyatidan foydalandik.
Shuningdek, template xususiyatidan ham foydalanishingiz mumkin, u sahifaga murojaat qilish o‘rniga HTML’ni to‘g‘ridan-to‘g‘ri xususiyat qiymatiga yozish imkonini beradi.
Misol:
Shablonlar yozing:
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>"
});
});
O‘zingiz sinab ko‘ring »
otherwise metodi
Oldingi misollarda $routeProvider’ning when metodidan foydalandik.
Shuningdek, otherwise metodidan ham foydalanishingiz mumkin, u boshqa marshrutlarning hech biri mos kelmaganda ishlatiladigan standart marshrut hisoblanadi.
Misol:
Agar "Banana" ham, "Tomato" ham havolasi bosilmagan bo‘lsa, buni foydalanuvchiga bildiring:
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>"
});
});
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!