تطبيقات AngularJS

حان الوقت لإنشاء تطبيق AngularJS حقيقي.

صنع قائمة مشتريات

دعونا نستخدم بعض وظائف AngularJS لإنشاء قائمة مشتريات يمكن إضافة أو حذف المنتجات منها:

شرح التطبيق

الخطوة 1: البدء

أولاً، قم بإنشاء اسم myShoppingList التطبيق، وإضافة اسم myCtrl السيطرة

سيطرة على الاسم منتجات إضافة المجموعة الحالية إلى $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 القيمة المدخلة في حقل الإدخال ستضيف المنتج إلى منتجات في المجموعة.

إضافة زر، وتحديد 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">

جرب بنفسك