نرم‌افزارهای 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 فونکشن کی تعمیر کریں گے، جس میں آپ کو حذف کرنا چاہئے والا پروجیکٹ کا آئیڈکس دیا جائے گا۔

ایچ تی ایم ل میں، ہر پروجیکٹ کے لئے ایک <span> عنصر، اس عنصر کو فراہم کرتا ہے، ng-click آمر آئیڈکس کال 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: غلط پیغام

یہ ایپلیکیشن چند غلطیوں کا حامل ہے، مثلاً اگر آپ دو بار سے ایک ہی پروڈکٹ کو اضافہ کریں تو یہ ایپلیکیشن ختم ہوجائے گا۔ مزید برآمد، خالی پروڈکٹ کو اضافہ نہیں کیا جانا چاہئے۔

اس مسئلے کو حل کرنے کے لئے، نئے پروڈکٹ کو اضافہ کرنے سے پہلے اس کی اقدار کا چیک کرنا ہوگا۔

ایچ تی ایم ل میں، غلط پیغام کا کانٹینر اضافہ کریں گے اور کسی کی کوشش کے بعد جب وہ موجود پروڈکٹ کو اضافہ کرنا کوششیں کریں گے تو غلط پیغام لکھیں گے。

مثال

شاپنگ لسٹ، میں غلط پیغام لکھ سکتا ہوں:

<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">

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