AngularJS Routing
မော် ngRouteဂျူးသည် သင့်အပလီကေးရှင်းကို Single Page Application ဖြစ်လာစေရန် ကူညီပေးသည်။
AngularJS တွင် Routing ဆိုတာဘာလဲ။
သင့်အပလီကေးရှင်းရှိ မတူညီသောစာမျက်နှာများသို့ သွားလာလိုပါက၊ သို့သော် သင်သည် အက်ပ်အား SPA (Single Page Application) အဖြစ် စာမျက်နှာပြန်တင်ခြင်းမပြုဘဲ၊ သင်သည် ngRouteမော်ဂျူးကို အသုံးပြုနိုင်သည်။
ngRouteမော်ဂျူး သည် အ ပလီကေးရှင်းတစ်ခုလုံးကို ပြန်မတင်ဘဲ သင့်အပလီကေးရှင်းကို မတူညီသောစာမျက်နှာများသို့ လမ်းကြောင်း ပေးသည်။
ဥပမာ-
"red.htm"၊ "green.htm" နှင့် "blue.htm" သို့ သွားပါ-
<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>
ငါဘာလိုလဲ
သင့်အပလီကေးရှင်းများကို လမ်းကြောင်းသတ်မှတ်ရန်အတွက် အဆင်သင့်ဖြစ်စေရန်အတွက် AngularJS Route module ကို ထည့်သွင်းရပါမည်-
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
ngRouteထို့နောက် သင်သည် အပလီကေးရှင်း မော်ဂျူးတွင် မှီခိုမှုအဖြစ် ထည့်သွင်းရပါမည် -
var app = angular.module("myApp", ["ngRoute"]);
ယခု သင့်အပလီကေးရှင်းသည် $routeProvider.
$routeProviderသင့်အပလီကေးရှင်းရှိ မတူညီသောလမ်းကြောင်းများကို စီစဉ်သတ်မှတ်ရန် အဆိုပါကို အသုံးပြု ပါ။
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl :
"green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
ဘယ်ကိုသွားတာလဲ။
သင့်အပလီကေးရှင်းတွင် လမ်းကြောင်းပေးသည့်အကြောင်းအရာကို ထည့်သွင်းရန် ကွန်တိန်နာတစ်ခု လိုအပ်သည်။
ဤပုံးသည် ng-viewညွှန်ကြားချက်ဖြစ်သည်။
ng-viewသင့်လျှောက်လွှာတွင် ညွှန်ကြားချက်ကို ထည့်သွင်းရန် မတူညီသောနည်းလမ်းသုံးမျိုးရှိသည် ။
ဥပမာ-
<div ng-view></div>
ဥပမာ-
<ng-view></ng-view>
ဥပမာ-
<div
class="ng-view"></div>
အပလီကေးရှင်းများတွင် လမ်းညွှန်ချက်တစ်ခုသာ ရှိ ng-viewနိုင်ပြီး ၎င်းသည် လမ်းကြောင်းမှ ပံ့ပိုးပေးထားသည့် ကြည့်ရှုမှုအားလုံးအတွက် နေရာပေးမည်ဖြစ်သည်။
$routeProvider
$routeProviderအသုံးပြုသူသည် လင့်ခ်တစ်ခုကို နှိပ်သောအခါတွင် ဖော်ပြမည့် စာမျက်နှာကို သင်သတ်မှတ်နိုင်သည် ။
ဥပမာ-
သတ်မှတ်ပါ $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"
});
});
သင့်လျှောက်လွှာ $routeProvider၏နည်းလမ်းကို အသုံးပြု၍ သတ်မှတ်ပါ ။ အပလီကေးရှင်းကို တင်သည့်အခါ နည်းလမ်း configတွင် မှတ်ပုံတင်ထားသော အလုပ် အား လုပ်ဆောင်ပါမည်။config
ထိန်းချုပ်သူများ
၎င်းနှင့်အတူ $routeProviderသင်သည် "မြင်ကွင်း" တစ်ခုစီအတွက် controller တစ်ခုကိုလည်း သတ်မှတ်နိုင်သည်။
ဥပမာ-
ထိန်းချုပ်ကိရိယာများ ထည့်ပါ-
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" နှင့် "paris.htm" များသည် သာမန် HTML ဖိုင်များဖြစ်ပြီး၊ သင်၏ AngularJS အပလီကေးရှင်း၏ အခြားသော HTML ကဏ္ဍများနှင့် သင်အလိုရှိသည့်အတိုင်း AngularJS အသုံးအနှုန်းများကို သင်ထည့်နိုင်သည်။
ဖိုင်များသည် ဤကဲ့သို့ ဖြစ်သည်-
<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>
ပုံစံခွက်
ယခင်နမူနာများတွင် ကျွန်ုပ်တို့သည် နည်းလမ်း templateUrlတွင် ပိုင်ဆိုင်မှုကို
$routeProvider.whenအသုံးပြုထားသည်။
templateစာမျက်နှာတစ်ခုကို ရည်ညွှန်းခြင်းမပြုဘဲ ပိုင်ဆိုင်မှုတန်ဖိုးတွင် HTML ကို တိုက်ရိုက်ရေးနိုင်စေမည့် ပိုင်ဆိုင်မှု ကိုလည်း သင်အသုံးပြုနိုင်သည် ။
ဥပမာ-
နမူနာပုံစံများရေးပါ
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>"
});
});
မဟုတ်ရင် နည်းလမ်း
ယခင်နမူနာများတွင် ကျွန်ုပ်တို့သည် အဆိုပါ whenနည်းလမ်းကို အသုံးပြု $routeProviderထားသည်။
otherwiseအခြားတစ်ဦးမှ ကိုက်ညီမှုမရှိသည့်အခါ ၎င်းနည်းလမ်းကို သင်အသုံးပြုနိုင်သည် ။
ဥပမာ-
"ငှက်ပျောသီး" နှင့် "ခရမ်းချဉ်သီး" လင့်ခ်ကို ကလစ်မနှိပ်ပါက၊ သူတို့ကို အသိပေးပါ-
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>"
});
});