AngularJS

AngularJS — اپلیکیشن (Application)

آخرین بروزرسانی: 1404/08/23
قبلی: مسیر دهی (Routing) بعدی: مثال ها (Examples)

اپلیکیشن (Application)

اینجا با یک اپلیکیشن AngularJS آشنا می شوی که لیست خرید می سازد. منظور از اپلیکیشن AngularJS یک برنامه وب است که با AngularJS کنترل می شود، مثل یک مینی برنامه داخل مرورگر.

ساخت یک اپلیکیشن AngularJS برای لیست خرید

در این صفحه قدم به قدم یک اپلیکیشن AngularJS برای لیست خرید می سازیم. در نهایت می توانی آیتم ها را اضافه و حذف کنی و خطاها را مدیریت کنی. برای تمرکز، همه چیز حول همین مثال ساده می چرخد.

این مثال شبیه فهرست وسایل مدرسه است. مثلا دفتر، خودکار و کتاب را در یک لیست می نویسی و هر وقت خریدی، آن را خط می زنی.

اگر بعدا خواستی مرور کنی، صفحه اپلیکیشن AngularJS همیشه همین پروژه لیست خرید را توضیح می دهد.

گام اول: ساخت ماژول و کنترلر

اول یک ماژول (Module) می سازیم. ماژول یعنی ظرف اصلی اپلیکیشن. بعد یک کنترلر (Controller) می سازیم. کنترلر یک تابع است که داده ها و منطق اپلیکیشن را مدیریت می کند.

  1. یک ماژول به نام myShoppingList بساز.
  2. یک کنترلر به نام myCtrl تعریف کن.
  3. آرایه products را با چند محصول اولیه پر کن.
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function ($scope) {
  $scope.products = [
    "Milk",
    "Bread",
    "Cheese"
  ];
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">
      {{x}}
    </li>
  </ul>
</div>

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

دستور ng-repeat یعنی برای هر عضو آرایه products یک <li> بساز. شبیه این است که برای هر اسم در لیست کاغذی، یک خط جدا بنویسی.

گام دوم: افزودن آیتم به اپلیکیشن AngularJS

حالا می خواهیم بتوانیم آیتم جدید اضافه کنیم. برای این کار از ng-model و ng-click استفاده می کنیم. ng-model یعنی ورودی را به یک متغیر در کنترلر وصل کن. ng-click یعنی وقتی کلیک شد، یک تابع را اجرا کن.

  1. یک input با ng-model به نام addMe بساز.
  2. یک دکمه با ng-click بساز که addItem را صدا بزند.
  3. در کنترلر تابع addItem را تعریف کن.
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function ($scope) {
  $scope.products = [
    "Milk",
    "Bread",
    "Cheese"
  ];
  $scope.addItem = function () {
    $scope.products.push($scope.addMe);
  };
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">
      {{x}}
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">
    Add
  </button>
</div>

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

اینجا هر بار که دکمه Add را می زنی، مقدار addMe به آرایه products اضافه می شود. شبیه وقتی که دوستت یک آیتم جدید به لیست خرید اضافه می کند.

گام سوم: حذف آیتم ها از لیست خرید

حالا باید بتوانیم آیتم ها را حذف کنیم. برای این کار از تابع removeItem و مقدار $index استفاده می کنیم. $index شماره هر آیتم در حلقه ng-repeat است.

  1. تابع removeItem را در کنترلر تعریف کن.
  2. از متد splice برای حذف از آرایه استفاده کن.
  3. در HTML یک span با ng-click اضافه کن.
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function ($scope) {
  $scope.products = [
    "Milk",
    "Bread",
    "Cheese"
  ];
  $scope.addItem = function () {
    $scope.products.push($scope.addMe);
  };
  $scope.removeItem = function (x) {
    $scope.products.splice(x, 1);
  };
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">
      {{x}}
      <span ng-click="removeItem($index)">
        &times;
      </span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">
    Add
  </button>
</div>

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

اینجا روی علامت ضربدر (&times;) کلیک می کنی و آیتم حذف می شود. دقیقا مثل وقتی که یک مورد را از روی کاغذ خط می زنی.

گام چهارم: مدیریت خطاها و پیام ها

اپلیکیشن کار می کند، اما هنوز تمیز نیست. مثلا نباید آیتم خالی اضافه شود. همچنین نباید یک آیتم تکراری دوبار در لیست باشد. برای این کار از errortext و indexOf کمک می گیریم.

  1. قبل از افزودن، errortext را خالی کن.
  2. اگر addMe خالی بود، تابع را تمام کن.
  3. اگر محصول تکراری بود، پیام خطا را تنظیم کن.
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function ($scope) {
  $scope.products = [
    "Milk",
    "Bread",
    "Cheese"
  ];
  $scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {
      return;
    }
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = "The item is already in your shopping list.";
    }
  };
  $scope.removeItem = function (x) {
    $scope.errortext = "";
    $scope.products.splice(x, 1);
  };
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">
      {{x}}
      <span ng-click="removeItem($index)">
        &times;
      </span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">
    Add
  </button>
  <p>
    {{errortext}}
  </p>
</div>

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

حالا اگر آیتم خالی یا تکراری اضافه کنی، اپلیکیشن AngularJS پیام خطا نشان می دهد. این کار شبیه معلمی است که اگر دوبار اسم یک نفر را بنویسی، تذکر می دهد.

گام پنجم: زیباتر کردن اپلیکیشن با W3.CSS

تا اینجا منطق اپلیکیشن کامل است. ولی ظاهر هنوز ساده است. برای زیباتر شدن می توانیم از W3.CSS استفاده کنیم. این یک کتابخانه سبک CSS است که کلاس های آماده دارد.

  1. فایل استایل W3.CSS را در <head> اضافه کن.
  2. به المان ها کلاس های w3-card و w3-container بده.
  3. ظاهر اپلیکیشن شبیه نمونه بالای صفحه منبع می شود.
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

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

نکته: منطق اپلیکیشن AngularJS و ظاهر از هم جدا هستند. اول منطق را درست کن، بعد با CSS ظاهر را بهتر کن. این کار دیباگ کردن را ساده تر می کند.

جمع بندی سریع اپلیکیشن AngularJS

  • یک ماژول و کنترلر ساختیم و آرایه products را تعریف کردیم.
  • با ng-model و ng-click آیتم جدید به لیست اضافه کردیم.
  • با removeItem و $index توانستیم آیتم ها را حذف کنیم.
  • با errortext و indexOf خطاهای خالی و تکراری را مدیریت کردیم.
  • با W3.CSS ظاهر اپلیکیشن AngularJS را مرتب و زیبا کردیم.
قبلی: مسیر دهی (Routing) بعدی: مثال ها (Examples)