با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش AngularJS را دنبال می کنند. در ادامه ی سری آموزشهای آنگولار، در این بخش قصد داریم شما را با ویژگی Routing یا مسیریابی در AngularJS ، آشنا کنیم. این ویژگی مانند ویژگی include در AngularJS ، به شما اجازه استفاده از فایل های HTML و صفحات وب دیگر را در صفحه وب جاری می دهد. اما در این حالت مانند ویژگی AJAX ، فقط بخش های متفاوت صفحه وب مجدد بارگزاری شده و از بارگزاری کل صفحه جلوگیری می شود.
در ادامه ی آموزش ، بیشتر با ویژگی Routing یا مسیریابی در AngularJS و طرز استفاده از آن، آشنا می شوید.
ماژول ngRoute
به شما کمک می کند. از فایل های مختلف html در صفحه وب خود، بدون بارگزاری کل صفحه ی جاری، استفاده کنید.
اگر می خواهید به صفحات مختلف در برنامه خود حرکت کنید، اما شما همچنین می خواهید. که در برنامه جاری باشید و فقط بخش های متفاوت از صفحات دیگر بارگزاری شود. می توانید از ماژول ngRoute
در برنامه ی خود استفاده کنید.
ماژول ngRoute برنامه شما را به صفحات مختلف بدون بارگذاری کل برنامه هدایت می کند.
مثال: حرکت بین صفحات “red.htm” و “green.htm” یا “blue.htm” :
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 | <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 آماده کنید، باید از ماژول AngularJS Route نیز استفاده کنید:
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"]); |
اکنون برنامه ی شما به ماژول route که سرویس $ pathProvider
را فراهم می کند. دسترسی دارد.
از سرویس $routeProvider
برای پیکربندی های مختلف routes در برنامه خود استفاده کنید.
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" }); }); |
برنامه شما نیاز به یک ظرف برای قرار دادن محتوای ارائه شده توسط route دارد.
این ظرف دستورالعمل ng-view
است.
سه راه مختلف برای افزودن دستورالعمل ng-view
در برنامه شما وجود دارد:
ng-view
1 | <div ng-view></div> |
1 | <ng-view></ng-view> |
1 | <div class="ng-view"></div> |
برنامه می تواند فقط از یک دستور ng-view
برای تمام نماهایی که ویژگی route را عرضه می کند باشد.
با استفاده از سرویس $routeProvider
شما می توانید یک صفحه را زمانیکه کاربر روی یک لینک کلیک می کند، تعریف کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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
همچنین می توانید برای هر نمای View یک کنترلر، تعریف کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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 خود اضافه می کنید اضافه کنید.
مثال ۱: فایل london.htm :
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> |
مثال ۲: فایل paris.htm :
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> |
در مثال قبلی، شما از ویژگی templateUrl در در متد $routeProvider.when
استفاده کردید.
ویژگی template
به شما اجازه می دهد.که به طور مستقیم کدهای html را در برنامه وارد کرده و نیازی به استفاده از صفحات دیگر، نداشته باشید.
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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
برای مشخص کردن اینکه هیچ گزینه ای انتخاب نشده است، استفاده کنید.
مثال: اگر روی گزینه های “Banana” و “Tomato” کلیک نشده باشد، به کاربر اعلام شود که گزینه ای انتخاب نشده است.
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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>" }); }); |
ما در این بخش شما را با یکی از ویژگی های پرکاربرد آنگولار با نام ویژگی Routing یا مسیریابی در AngularJS ، آشنا کردیم. با استفاده از Routing از کدهای html فایل های html دیگر در صفحه ی خود استفاده کنید. بدون اینکه کل صفحه وب شما مجددا بارگزاری شود.