module ها در angular

در انگولار ماژول ها مکانیزمی برای ایجاد بلاک های عملیاتی (همانند function در جاوا اسکریپت) می باشند که با ترکیب آنها می توان یک اپلیکیشن را ایجاد نمود. به عبارتی دیگر مجموعه عملیات، کامپوننت  ها، سرویس ها و ... را می توان در قالب ماژول ها تعریف و از آنها در اپلیکیشن استفاده نمود.

نحوه ساخت ماژول

برای ساخت یک ماژول می توان از تابع angular.module به شکل زیر استفاده نمود.

<div ng-app="benoApp">

</div>
<script>
    var app = angular.module("benoApp",[]);
</script>

دستورات تعریف ماژول باید بین تگ های اسکریپت (همانند دستورات جاوا اسکریپت) قرار گیرند.  به تابع angular.module دو پارامتر ارسال شده است که پارامتر اول آن یعنی "benoApp"  نام عنصری می باشد که اپلیکیشن در آن اجرا می شود.

Controllers

کنترلرها توابع جاوا اسکریپتی می باشند که اطلاعات و رویدادهای اپلیکیشن را در object ای به نام $scope نگهداری می کنند و توسط آنها می توان یک اپلیکیشن انگولاری را مدیریت نمود.

برای تعریف کنترلر از دستور ng-controller استفاده می شود. بنابراین ابتدا باید درون اپلیکیشن یک عنصر HTML ایجاد کرده و آن را تبدیل به کنترلر کنیم.

<div ng-app="benoApp">
    <div ng-controller="myCtrl"></div>
</div>

برخی از برنامه نویسان ترجیح می دهند تگ body را به عنوان اپلیکیشن تعریف نمایند. بنابراین به روش نیز می توان عمل کرد.

<body ng-app="benoApp">
    <div ng-controller="myCtrl"></div>
</body>

پس از تعریف کنترلر، با استفاده از دستورات جاوا اسکریپت می توان به عناصر مختلف دسترسی داشت. بدین منظور ابتدا باید توسط تابع angular.module اپلیکیشن را شناسایی کنیم. این تابع دو پارامتر دریافت می کند که پارامتر اول نام اپلیکیشن می باشد و پارامتر دوم مقدار [ ] تعیین می گردد.

<script>
    var app = angular.module("benoApp",[]);
</script>

پس از شناسایی اپلیکیشن مورد نظر که در مثال فوق اطلاعات آن درون متغیر app ذخیره شده است، می توان توسط تابع controller به کنترلرهای موجود در آن دسترسی داشت. تابع کنترلر دو پارامتر دریافت می کند که پارامتر اول نام کنترلر و پارامتر دوم یک function می باشد که function داخلی نیز حاوی پارامتری به نام $scope می باشد.

<script>
    var app = angular.module("benoApp",[]);
    app.controller("myCtrl",function($scope){

    });
</script>

توسط $scope می توان به اطلاعات درون کنترلر و متغیرهای تعریف شده در برنامه دسترسی داشت. برای مثال قصد داریم صفحه ای  طراحی کنیم که یک پیغام به کاربر نمایش دهد و متن پیام را درون کنترلر مشخص نماییم.

<!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>
  </head>
  <body ng-app="benoApp">
    <div ng-controller="myController">
      <p>{{message}}</p>
    </div>
    <script>
      var app = angular.module("benoApp", []);
      app.controller("myController", function ($scope) {
        $scope.message = "welcome to beno academy";
      });
    </script>
  </body>
</html>

همانطور که مشاهده می کنید متغیری به نام message درون کنترلر تعریف شده است و توسط دستورات angular توانستیم آن را شناسایی و مقدار دهی کنیم.

مثال: برنامه ای بنویسید که لیستی از شهرهای ایران را با استفاده از ul li نمایش دهد.

تحلیل: در این مثال می توان لیست مورد نظر را توسط کنترلر ایجاد و آن را به برنامه ارسال نمود. درون برنامه نیز با استفاده از ng-repeat می توان این لیست را نمایش داد.

<!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>
  </head>
  <body ng-app="benoApp">
    <div ng-controller="myController">
      <ul>
        <li ng-repeat="x in list">{{x}}</li>
      </ul>
    </div>
    <script>
      var app = angular.module("benoApp", []);
      app.controller("myController", function ($scope) {
        $scope.list = ["Tehran","Shiraz","Esfahan","Sanandaj","Mashhad","Tabriz"];
      });
    </script>
  </body>
</html>

در کدهای فوق برای نمایش لیست از ng-repeat استفاده شده است و درون آن متغیری به نام x تعریف شده که درون آرایه ای با نام list پیمایش کرده و در مرحله به یکی از آنها اشاره می نماید و عناصر آن درون تگ li نمایش داده می شود.

مثال: برنامه ای بنویسید که لیستی از کشورها به همراه پایتخت آنها را نمایش دهد.

تحلیل: برای حل این مثال می توان از یک object با دو فیلد برای نام کشور و پایتخت آنها استفاده نمود.

$scope.country = [
  {name:'Iran', Capital:'Tehran'},
  {name:'Turkey', Capital:'Ankara'},
  {name:'England', Capital:'London'},
  {name:'France', Capital:'Paris'},
  {name:'Spain', Capital:'Madrid'},
];

بنابراین کدهای کامل این برنامه به شکل زیر خواهد بود.

<!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>
  </head>
  <body ng-app="benoApp">
    <div ng-controller="myController">
      <ul>
        <li ng-repeat="x in country">{{x.name}} - {{x.capital}}</li>
      </ul>
    </div>
    <script>
      var app = angular.module("benoApp", []);
      app.controller("myController", function ($scope) {
        $scope.country = [
          {name:'Iran', capital:'Tehran'},
          {name:'Turkey', capital:'Ankara'},
          {name:'England', capital:'London'},
          {name:'France', capital:'Paris'},
          {name:'Spain', capital:'Madrid'},
        ];
      });
    </script>
  </body>
</html>