لقد حان الوقت لإنشاء AngularJS التطبيق الحقيقي.
جعل قائمة التسوق
يتيح استخدام بعض الميزات AngularJS لتقديم قائمة التسوق، حيث يمكنك إضافة أو إزالة عناصر:
بلدي قائمة التسوق
- {{س}} ×
{{}} errortext
شرح تطبيق
الخطوة 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="http://www.w3ii.com/lib/w3.css">
انها محاولة لنفسك »