ساخت صفحات SPA و مسیریابی(routing) در angular

در مقدمه آموزش ها توضیح داده شد که یکی از مهمترین کاربردهای انگولار ساخت برنامه های SPA می باشد. منظور از SPA وبسایت هایی می باشند که بدون تغییر URL می توانند محتوای یک صفحه دیگر را در صفحه فعلی نمایش دهند که این کار علاوه بر افزایش سرعت، بهره وری را نیز بهبود می بخشد. با استفاده از قابلیت Routing می توانید دسترسی به محتوای صفحات دیگر را فراهم کنید.

نحوه استفاده

برای استفاده از Routing ابتدا باید لینک زیر را به پروژه خود اضافه کنید.

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

از دستور ngRoute به عنوان پارامتر ورودی متد module استفاده می شود برای مثال فرض کنید قصد داریم سه صفحه به نام های index, about, contact تعریف کنیم بطوریکه بتوان منویی جهت دسترسی به سایر صفحات ایجاد نمود.

برای حل این تمرین ابتدا یک پوشه ساخته و سه فایل با نام های ذکر شده درون آن ایجاد نمایید. سپس منویی به شکل زیر در صفحه index قرار دهید.

<ul>
  <li>
    <a href="#/!">index</a>
  </li>
  <li>
    <a href="#!about">about</a>
  </li>
  <li>
    <a href="#!contact">contact</a>
  </li>
</ul>

پس از ساخت منو باید یک div برای نمایش محتوای صفحه در زیر منو قرار دهیم.

<div ng-view></div>

حال باید کدهای مورد نیاز برای مسیریابی و نمایش محتوای صفحه را اضافه کنیم. مشابه تمرین های قبل ابتدا باید app را شناسایی کنیم و همانطور که در ابتدای این مقاله توضیح داده پارامتر ngRoute را نیز به شکل زیر برای module مشخص کنیم.

var app = angular.module("benoApp", ["ngRoute"]);

برای مشخص کردن تنظیمات مسیریابی از متد config استفاده می شود.

app.config(function ($routeProvider) {
  $routeProvider
    .when("/", {
      templateUrl: "index.htm",
    })
    .when("/about", {
      templateUrl: "about.htm",
    })
    .when("/contact", {
      templateUrl: "contact.htm",
    });
});

در کدهای فوق مشخص شده است که اگر علامت / که به معنی روت سایت می باشد وجود داشت، صفحه index.html و در صورتیکه /about بود صفحه about.html نمایش داده شود. بنابراین کدهای کامل این صفحه به شکل زیر خواهد بود.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Angular Tutorial</title>
    <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>
  </head>
  <body ng-app="benoApp">
    <ul>
      <li>
        <a href="#/!">index</a>
      </li>
      <li>
        <a href="#!about">about</a>
      </li>
      <li>
        <a href="#!contact">contact</a>
      </li>
    </ul>

    <div ng-view></div>
    <script>
      var app = angular.module("benoApp", ["ngRoute"]);
      app.config(function ($routeProvider) {
        $routeProvider
          .when("/", {
            templateUrl: "index.htm",
          })
          .when("/about", {
            templateUrl: "about.htm",
          })
          .when("/contact", {
            templateUrl: "contact.htm",
          });
      });
    </script>
  </body>
</html>