دستور العملی در آنگولار برای فراخوانی محتوای صفحات وب به درون برنامه خود بدون نیاز به تغییر آدرس صفحه و یا بارگذاری مجدد آن
ماژول ngRoute به نرم افزار شما ، کمک می کند که یک نرم افزار تک صفحه ای داشته باشید.
چه زمان از ویژگی Routing در آنگولار استفاده کنیم.
اگر شما میخواهید که صفحات مختلفی را به درون صفحه خود فراخوانی کنید، ولی تمایل دارید که نرم افزار شما همچنان تک صفحه ای بماند. برای جلوگیری از بارگذاری صفحه میتوانید از ماژول ngRoute استفاده کنید.
ماژول ngRout امکان دادن مسیر فایل های مختلف به صفحه نرم افزار شما را بدون اینکه کل نرم افزار دوباره بارگذاری شود را دارد.
مثال:
کد زیر فایل های 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>
مشاهده نتیجه
برای استفاده از این ویژگی چه کاری باید انجام دهیم
برای ایجاد نرم افزاری با قابلیت routing باید ماژول آن را به نرم افزار خود اضافه کنید:
<script src="https://sargonco.com/Uploads/Public/article/webdistut/javascript/angular-route.js "></script>
سپس باید ماژول ngRoute را به نرم افزار خود اضافه کنید:
var app = angular.module("myApp", ["ngRoute"]);
حالا نرم افزار شما امکان نمایش محتوای فایل های وب دیگر را دارد. برای انجام اینکار باید از $routeProvider استفاده کنید.
$routeProvider به شما امکان تنظیم کردن routes مختلف را در نرم افزار را میدهد:
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 class="ng-view"></div>
مشاهده نتیجه
یک نرم افزار تنها میتواند یک ng-view داشته باشد، این دستورالعمل مانند مکانی برای نگهداری کدهای صفحات فراخوانی شده عمل خواهد کرد.
$routeProvider :
با $routeProvider شما صفحه ای را که قصد نمایش آن را دارید انتخاب می کنید.اینکار با کلیک روی لینک های مربوطه انجام میشود.
مثال:
Define a $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 شما میتوانید برای هر Viwe یک کنترلر تعریف کنید.
مثال
افزودن کنترلر:
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 معمولی میباشند. شما میتوانید دستورات مختلف آنگولار را همراه با آنها استفاده کنید.
فایل ها بصورت زیر میباشند:
london.htm
<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>
paris.htm
<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>
Template:
با کمک ویژگی templateUrl میتوانید متد $routeProvider.when را در مثال قبل بکار ببرید.
شما همچنین میتوانید ویژگی template را برای تایپ کدهای HTML در درون این صفت استفاده کنید. به این ترتیب نیازی به ارجاع به صفحه دیگری نیست.
مثال:
نوشتن templates :
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>"
});
});
مشاهده نتیجه
متد otherwise
در مثال قبل ما از متد when در $routeProvider استفاده کرده ایم. شما میتوانید از متد otherwise استفاده کنید. این متد هنگامی کاربرد دارد که هیچکدام از متد های دیگر با خواسته ما همخوان نیست.
مثال:
اگر هیچ کدام از لینکهای Banana و Tamato کلیک نشده بود به کاربر اطلاع بدهید:
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>"
});
});
مشاهده نتیجه
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد