نرم‌افزارهای AngularJS

زمان آن است که یک برنامه واقعی AngularJS ایجاد کنیم.

ایجاد لیست خرید

بیایید از برخی از ویژگی‌های AngularJS برای ایجاد یک لیست خرید استفاده کنیم، جایی که می‌توانید محصولات را اضافه یا حذف کنید:

توضیحات برنامه

مرحله 1: شروع

ابتدا یک نام myShoppingList به برنامه myCtrl داریم.

کنترل‌کننده‌ای به نام products جمعیت به کنترل‌کننده فعلی $scope استفاده می‌کنیم.

در HTML، ما از ng-repeat فرمان برای نمایش لیست از موارد جمعیت استفاده می‌کنیم.

مثال

تا کنون، ما یک لیست HTML را بر اساس موارد جمعیت ایجاد کرده‌ایم:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["شیر", "نان", "پنیر"];
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
</div>

به طور مستقیم امتحان کنید

مرحله 2: اضافه کردن محصولات

در HTML، یک فیلد متنی اضافه کنید و از ng-model به برنامه پیوند دهید.

در کنترل‌کننده، یک addItem و این فرمان را برای addMe مقدار ورودی فیلد به products در میان جمعیت.

یک دکمه اضافه کنید و یک ng-click فرمانی که در کلیک بر روی دکمه اجرا می‌شود addItem توابع.

مثال

حالا می‌توانیم محصولاتی را به لیست خرید اضافه کنیم:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["شیر", "نان", "پنیر"];
  $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()">افزودن</button>
</div>

به طور مستقیم امتحان کنید

مرحله 3: حذف محصول

ما همچنین می‌خواهیم بتوانیم محصولاتی را از لیست خرید حذف کنیم.

در کنترل‌کننده، یک removeItem توابعی ایجاد خواهیم کرد که شامل شماره‌ی محصولی است که می‌خواهید حذف کنید.

در HTML، برای هر محصول یک <span> عنصر استفاده می‌کند و برای آن یک ng-click دستورالعمل، که از این $index دعوت به عمل removeItem توابع.

مثال

حالا می‌توانیم محصولاتی را از لیست خرید حذف کنیم:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["شیر", "نان", "پنیر"];
  $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)">×</span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">افزودن</button>
</div>

به طور مستقیم امتحان کنید

مرحله 4: مدیریت خطا

این برنامه دارای اشکالاتی است، به عنوان مثال، اگر شما سعی کنید محصولی را دو بار اضافه کنید، برنامه از کار می‌افتد. همچنین، نباید اجازه داد که محصول خالی اضافه شود.

ما این مشکل را با بررسی مقادیر قبل از اضافه کردن محصول جدید حل خواهیم کرد.

در HTML، ما یک محیط برای پیام خطا اضافه خواهیم کرد و پیام خطا را در حالی که کسی سعی می‌کند محصول موجود را اضافه کند، بنویسیم.

مثال

لیست خرید، می‌توانید پیام خطا را بنویسید:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["شیر", "نان", "پنیر"];
  $scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = "این محصول已经在 لیست خرید شما است.";
    }
  }
  $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)">×</span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">افزودن</button>
  <p>{{errortext}}</p>
</div>

به طور مستقیم امتحان کنید

مرحله 5: طراحی

این برنامه قابل اجرا است، اما می‌توان از طراحی بهتری استفاده کرد. ما از جدول استایل W3.CSS برای طراحی برنامه خود استفاده می‌کنیم.

جدول استایل W3.CSS را اضافه کنید و کلاس‌های مناسب را در سراسر برنامه خود شامل کنید، نتیجه مشابه لیست خرید بالای این صفحه خواهد بود.

مثال

برای طراحی برنامه خود از جدول استایل W3.CSS استفاده کنید:

<link rel="stylesheet" href="https://www.codew3c.com/lib/style/w3.css">

به طور مستقیم امتحان کنید