سلام شما در این قسمت از اموزش های انگولار خواهید اموخت که چطور تک صفحه با خصوصیات ویژه با دستورالعمل ngRouting بسازیم. پیشنیاز ورود به این قسمت داشتن مهارت ابتدایی از دوره انگولار جی اس می باشد . پس میتوانید قسمت های پیشین را با کلیک بر روی دوره ی انگولار جی اس مطالعه فرمایید.
مسیریابی انگولار چیست ؟
اگر قصد دارید در انگولار جی اس صفحات مختلفی طراحی کنید ، که به صورت تک صفحه ای باشند و بدون بارگذاری صفحه اجرا شوند میتوانید از ماژول ngRouting استفاده کنید.
ماژول ngRoute برنامه شما را به صفحات مختلف بدون بارگذاری کل برنامه هدایت می کند.برای درک بهتر این موضوع به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" ></script> < script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js" ></script> <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> |
در مثال بالا فایل هایی را برای هدایت کردن دکمه ها به صفحه ی اصلی اضافه کردیم که با کلیک بر روی هر دکمه عمل خاصی در مکان خاصی از صفحه بدون بارگذاری مجدد انجام میشود.
به چه چیز نیاز داریم ؟
برای اجرا شدن مسیریابی در انگولار ابتدا باید فایل js مربوط به این عمل را از کتابخانه های انگولار به پروژه ی خود اضافه کنید :
|
1 |
< script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js" ></script> |
سپس باید ngRoute را به عنوان یک وابستگی در ماژول برنامه اضافه کنید:
|
1 |
var app = angular.module("myApp", ["ngRoute"]); |
حال برنامه ی شما به مسیر دسترسی دارد که $ngProvider ان را تامین میکند:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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 وجود دارد که در زیر به انها خواهیم پرداخت.
روش اول
|
1 |
<div ng-view=""></div> |
روش دوم
|
1 |
<ng-view></ng-view> |
روش سوم
|
1 |
<div class="ng-view"></div> |
برنامه های کاربردی تنها می توانند یک دستورالعمل Ng-view داشته باشند و این خواهد بود که برای همه دیدگاه های ارائه شده از مسیر، نگهداری می شود.
$routeProvider
با $routeProvider شما می توانید صفحه نمایش را هنگامی که یک کاربر یک لینک را کلیک می کند تعریف کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<p><a href="#/!">صفحه ی اصلی</a></p> <a href="#!london">شهر 1</a> <a href="#!paris">شهر 2</a> <p>با کلیک کردن بر هر یک از لینک های بالا توضیحات ان مکان مشخص میشود..</p> <div ng-view></div> < script > 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" }); }); </script> |
$routeProvider را با استفاده از روش پیکربندی برنامه خود تعریف کنید. کار هنگام ثبت نام در روش پیکربندی زمانی که برنامه بارگذاری می شود انجام می شود. اینکه را هم به یاد داشته باشید که کتابخانه ی مسیریاب را حتما اضافه کنید.
کنترل کننده ی مسیریاب
با استفاده از $routeProvider شما میتوانید یک کنترل کننده برای “view” در نظر بگیرید.
برای افزودن کنترل کننده به مثال زیر توجه فرمایید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<p><a href="#/!">Main</a></p> <a href="#!london">City 1</a> <a href="#!paris">City 2</a> <p>Click on the links.</p> <div ng-view></div> < script > 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"; }); </script> |
london.htm” و “paris.htm” فایل های نرمال HTML هستند که شما می توانید عبارات AngularJS را همانطور که با هر بخش HTML دیگر از برنامه AngularJS خود اضافه می کنید اضافه کنید.
فایل هایی به شکل زیر :
|
1 2 3 4 |
<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> |
|
1 2 3 4 |
<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> |
ساختار
در نمونه های قبلی ما از property templateUrl در روش $routeProvider.when استفاده کردیم.
شما همچنین می توانید از ویژگی قالب استفاده کنید که به شما اجازه می دهد به طور مستقیم در مقدار املا HTML بنویسید و به یک صفحه مراجعه نکنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<p><a href="#/!">Main</a></p> <a href="#!banana">Banana</a> <a href="#!tomato">Tomato</a> <div ng-view></div> < script > 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>" }); }); </script> |
متد otherwise
در مثال قبل از از when در ماژول $routerProvider استفاده کرده ایم. شما همچنین می توانید از روش otherwise استفاده کنید، که مسیر پیش فرض است، زمانی که هیچ یک از دیگران یک بازی دریافت نمی کنند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<p><a href="#/!">Main</a></p> <a href="#!banana">Banana</a> <a href="#!tomato">Tomato</a> <div ng-view></div> < script > 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>Nothing</h1><p>Nothing has been selected</p>" }); }); </script> |
لازم به تذکر دوباره است که برای اجرا شدن کدهای فوق نیاز است تا حتما کتابخانه ی مسیریاب اضافه شود ، شاید برای استفاده از ظاهر بهتر نیاز به خواندن مقاله نصف بوت استرپ داشته باشید .
امیدوارم این اموزش برای شما عزیزان مفید واقع شده باشد ، برای مطالعه مقالات بیشتر میتوانید به سایت w3schools مراجعه فرمایید.
موفق و پیروز باشید.
