آموزش انگولارجی اس – قسمت7- مسیریابی در انگولارجی اس

مسیریابی در انگولارجی اس

مسیریابی در انگولارجی اس ( Routing در AngularJS )

لیست مطالب

  • مقدمه
  • مسیریابی در انگولارجی اس چیست؟
  • مسیریابی چگونه انجام میشود ؟
  • routeProvider$
  • کنترل کننده ی مسیریاب
  • متد otherwise

 

مقدمه

مسیر یابی یکی از ویژگی های Angular Js می باشد. این ویژگی برای ساختن اپلیکیشن های تک صفحه ای با چندین صفحه نمایش کاربرد دارد.

ما از این به بعد به اپلیکیشن های تک صفحه ای  به اختصار SPA میگوییم. SPA مخفف کلمه single page application می باشد.

در spa اپلیکیشن ها  ، view ها دارای محتوای html متفاوت هستند. و ما از مسیر یابی برا ی بارگذاری قسمت های مختلف نرم افزار استفاده میکنیم .

به عبارت دیگر مسیریابی در تقسیم برنامه به View های منطقی و bind کردن انها به کنترلر های مختلف کمک میکند.

مسیریابی در انگولارجی اس چیست؟

اگر می خواهید به صفحات مختلف در برنامه خود حرکت کنید، اما شما همچنین می خواهید این برنامه یک 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>

 

ابزار مورد نیاز

برای اینکه برنامه های خود را برای Routing آماده کنید، باید از ماژول AngularJS Route نیز استفاده کنید:

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js”></script>

شما باید ماژول ngRoute را در بخش تعریف نام برنامه انگولار، بصورت زیر تعریف کنید:

var app = angular.module(“myApp”, [“ngRoute”]);

اکنون برنامه ی شما به ماژول route که سرویس $ pathProvider  را فراهم می کند. دسترسی دارد.

از سرویس $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 ng-view=””></div>

روش دوم

<ng-view></ng-view>

روش سوم

<ng-view></ng-view>

برنامه های کاربردی تنها می توانند یک دستورالعمل Ng-view داشته باشند و این خواهد بود که برای همه دیدگاه های ارائه شده از مسیر، نگهداری می شود.

 

routeProvider$

با routeProvider$ شما می توانید صفحه نمایش را هنگامی که یک کاربر یک لینک را کلیک می کند تعریف کنید.

<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” در نظر بگیرید.

برای افزودن کنترل کننده به مثال زیر توجه فرمایید:

<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 خود اضافه می کنید اضافه کنید.

فایل هایی به شکل زیر :

<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>

 

ساختار

در نمونه های قبلی ما از property templateUrl در روش $routeProvider.when استفاده کردیم.

شما همچنین می توانید از ویژگی قالب استفاده کنید که به شما اجازه می دهد به طور مستقیم در مقدار املا HTML بنویسید و به یک صفحه مراجعه نکنید.

<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 استفاده کنید، که مسیر پیش فرض است، زمانی که هیچ یک از دیگران یک بازی دریافت نمی کنند.

<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 مراجعه فرمایید.

 

 

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

1 × چهار =