AngularJS

AngularJS — مسیر دهی (Routing)

آخرین بروزرسانی: 1404/08/23
قبلی: انیمیشن ها (Animations) بعدی: اپلیکیشن (Application)

مسیر دهی (Routing)

توی این درس می خوایم با مسیر دهی در AngularJS آشنا شویم. «مسیر دهی (Routing)» یعنی وقتی آدرس نوار مرورگر عوض می شود، بخش نمایش صفحه هم عوض شود؛ اما خود صفحه دوباره لود نشود. به این مدل سایت ها می گویند برنامه تک صفحه ای یا Single Page Application (SPA).

مسیر دهی در AngularJS چیست؟

در مسیر دهی در AngularJS ما چند «آدرس داخلی» درست می کنیم. هر آدرس، یک بخش از رابط کاربری را نشان می دهد. انگار توی یک مدرسه هستی و با عوض شدن کلاس، فقط معلم و تخته عوض می شوند، نه کل ساختمان مدرسه.

در این صفحه درباره مسیر دهی در AngularJS قدم به قدم جلو می رویم. ما از ماژول ngRoute استفاده می کنیم. ماژول (Module) یعنی بسته ای از قابلیت ها که به برنامه ات اضافه می کنی.

مثال ساده لینک ها و ng-view

در مثال زیر چند لینک داریم؛ قرمز، سبز و آبی. با کلیک روی هر لینک، محتوای داخل ng-view عوض می شود. اما کل صفحه دوباره لود نمی شود. ng-view یک جای خالی است که مسیر دهی آن را پر می کند.

<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

برای استفاده از مسیر دهی اول باید فایل ماژول ngRoute را لود کنی. بعد باید نام ماژول ngRoute را به عنوان وابستگی (Dependency) به برنامه اضافه کنی. وابستگی یعنی برنامه ات بدون آن بخش، درست کار نمی کند.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js">
</script>
<script>
var app = angular.module("myApp", ["ngRoute"]);
</script>

مشاهده در ادیتور

حالا برنامه به ngRoute دسترسی دارد. این ماژول شیء $routeProvider را در اختیار می گذارد. Provider یعنی چیزی که تنظیمات مهم را به AngularJS می دهد.

ng-view؛ محل نمایش صفحه ها

برنامه تو به یک ظرف نیاز دارد تا محتوای هر مسیر در آن نمایش داده شود. این ظرف همان دستور ng-view است. دستور (Directive) یعنی تگ یا ویژگی مخصوص AngularJS که رفتار ویژه ای به HTML می دهد.

سه شکل ng-view

ng-view را می توانی به سه شکل بنویسی؛ به صورت ویژگی، به صورت تگ، یا با کلاس ng-view. ساده ترین شکل همین است که پایین می بینی. در هر اپلیکیشن فقط یک ng-view باید وجود داشته باشد.

<div ng-view>
</div>

مشاهده در ادیتور

نکته: ng-view را جایی بگذار که قرار است وسط صفحه عوض شود. بقیه چیزها مثل منو و هدر می توانند ثابت بمانند.

پیکربندی مسیرها با $routeProvider

حالا باید به AngularJS بگویی هر آدرس چه صفحه ای را نشان بدهد. برای این کار از $routeProvider استفاده می کنیم. این کار داخل تابع config انجام می شود. config یعنی تنظیمات اولیه که هنگام لود شدن برنامه اجرا می شود.

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"
    });
});

مشاهده در ادیتور

متد when یعنی «اگر آدرس این باشد، این صفحه را نشان بده». templateUrl آدرس فایل HTML را مشخص می کند. وقتی کاربر روی لینک لندن کلیک می کند، محتوای london.htm داخل ng-view ظاهر می شود.

استفاده از Controller برای هر صفحه

می توانی برای هر مسیر یک Controller جدا تعریف کنی. Controller در AngularJS یک تابع است که داده ها و رفتار صفحه را کنترل می کند. داده ها داخل شیء $scope قرار می گیرند و در HTML با {{msg}} نشان داده می شوند.

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 معمولی هستند. اما می توانی داخل آن ها از {{msg}} و بقیه عبارت های AngularJS استفاده کنی تا متن پویا شود.

Template و TemplateUrl در مسیر دهی

تا اینجا از templateUrl استفاده کردیم. حالا می توانیم به جای فایل جدا، خود متن HTML را مستقیم داخل تنظیمات بنویسیم. این کار با ویژگی template انجام می شود. این روش برای متن های کوتاه و ساده مناسب است.

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>"
    });
});

مشاهده در ادیتور

نکته: اگر متن زیاد یا پیچیده است، بهتر است از templateUrl و فایل جدا استفاده کنی تا کد مرتب تر بماند.

مسیر پیش فرض با متد otherwise

گاهی هیچ کدام از مسیرهایی که تعریف کرده ای با آدرس فعلی جور نیست. اینجاست که متد otherwise به کار می آید. 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>"
    });
});

مشاهده در ادیتور

مثلاً اگر کاربر آدرس عجیبی مثل #!/apple را وارد کند، هیچ whenی با آن جور نیست. در این حالت، محتوای template داخل otherwise نمایش داده می شود و به کاربر پیام مناسب نشان می دهی.

جمع بندی سریع مسیر دهی در AngularJS

  • با ngRoute می توانی برنامه تک صفحه ای (SPA) بسازی.
  • ng-view جای نمایش صفحه هاست و فقط یکی از آن در اپ باشد.
  • $routeProvider با متد when آدرس ها را به صفحه ها وصل می کند.
  • با controller برای هر مسیر منطق و داده جدا تعریف می کنی.
  • template برای متن کوتاه و templateUrl برای فایل های جدا بهتر است.
قبلی: انیمیشن ها (Animations) بعدی: اپلیکیشن (Application)