تطبيق 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
= ["Milk", "Bread", "Cheese"];
});
</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
= ["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>
الخطوة 3. إزالة العناصر:
نريد أيضًا أن نكون قادرين على إزالة العناصر من قائمة التسوق.
في وحدة التحكم ، قم بإنشاء وظيفة مسماة removeItem، والتي تأخذ فهرس العنصر الذي تريد إزالته ، كمعامل.
في HTML ، أنشئ <span>عنصرًا لكل عنصر ، وامنحهم ng-clickتوجيهًا يستدعي removeItem
الوظيفة مع الحالي $index.
مثال
الآن يمكننا إزالة العناصر من قائمة التسوق لدينا:
<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)">×</span>
</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
</div>
الخطوة 4. معالجة الخطأ:
يحتوي التطبيق على بعض الأخطاء ، مثل إذا حاولت إضافة نفس العنصر مرتين ، فإن التطبيق يتعطل. أيضًا ، لا ينبغي السماح بإضافة عناصر فارغة.
سنصلح ذلك عن طريق التحقق من القيمة قبل إضافة عناصر جديدة.
في HTML ، سنضيف حاوية لرسائل الخطأ ، ونكتب رسالة خطأ عندما يحاول شخص ما إضافة عنصر موجود.
مثال
قائمة تسوق مع إمكانية كتابة رسائل خطأ:
<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)">×</span>
</li>
</ul>
<input ng-model="addMe">
<button ng-click="addItem()">Add</button>
<p>{{errortext}}</p>
</div>
الخطوة 5. التصميم:
يعمل التطبيق ، لكن يمكنه استخدام تصميم أفضل. نستخدم ورقة أنماط W3.CSS لتصميم تطبيقنا.
أضف ورقة أنماط W3.CSS ، وقم بتضمين الفئات المناسبة في جميع أنحاء التطبيق ، وستكون النتيجة مماثلة لقائمة التسوق في أعلى هذه الصفحة.
مثال
صمم التطبيق الخاص بك باستخدام ورقة أنماط W3.CSS:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">