AngularJS ilovasi
Haqiqiy AngularJS ilovasini yaratish vaqti keldi.
Xaridlar ro‘yxatini yarating
Keling, AngularJS’ning ba’zi imkoniyatlaridan foydalanib, element qo‘shish yoki olib tashlash mumkin bo‘lgan xaridlar ro‘yxatini yaratamiz:
My Shopping List
- {{x}}×
{{errortext}}
Ilova izohi
1-qadam. Boshlash:
myShoppingList nomli ilova yaratishdan boshlang va unga myCtrl nomli kontroller qo‘shing.
Kontroller joriy $scope’ga products nomli massiv qo‘shadi.
HTML’da massivdagi elementlar asosida ro‘yxatni ko‘rsatish uchun ng-repeat direktivasidan foydalanamiz.
Misol
Hozircha massiv elementlari asosida HTML ro‘yxatini yaratdik:
<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>
O‘zingiz sinab ko‘ring »
2-qadam. Elementlar qo‘shish:
HTML’da matn maydonini qo‘shing va uni ng-model direktivasi yordamida ilovaga bog‘lang.
Kontrollerda addItem nomli funksiya yarating va products massiviga element qo‘shish uchun addMe kiritish maydonining qiymatidan foydalaning.
Tugma qo‘shing va unga tugma bosilganda addItem funksiyasini ishga tushiradigan ng-click direktivasini bering.
Misol
Endi xaridlar ro‘yxatimizga element qo‘shishimiz mumkin:
<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>
O‘zingiz sinab ko‘ring »
3-qadam. Elementlarni olib tashlash:
Shuningdek, xaridlar ro‘yxatidan elementlarni olib tashlash imkoniyati ham bo‘lishini xohlaymiz.
Kontrollerda removeItem nomli funksiya yarating, u olib tashlamoqchi bo‘lgan elementingiz indeksini parametr sifatida qabul qiladi.
HTML’da har bir element uchun <span> elementi yarating va ularga joriy $index bilan removeItem funksiyasini chaqiradigan ng-click direktivasini bering.
Misol
Endi xaridlar ro‘yxatimizdan elementlarni olib tashlashimiz mumkin:
<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>
O‘zingiz sinab ko‘ring »
4-qadam. Xatolarni qayta ishlash:
Ilovada ba’zi xatolar bor, masalan, bir xil elementni ikki marta qo‘shmoqchi bo‘lsangiz, ilova ishdan chiqadi.
Shuningdek, bo‘sh elementlarni qo‘shishga ruxsat berilmasligi kerak.
Buni yangi elementlarni qo‘shishdan oldin qiymatni tekshirish orqali tuzatamiz.
HTML’da xato xabarlari uchun konteyner qo‘shamiz va kimdir mavjud elementni qo‘shmoqchi bo‘lganda xato xabarini yozamiz.
Misol
Xato xabarlarini yozish imkoniyatiga ega xaridlar ro‘yxati:
<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>
O‘zingiz sinab ko‘ring »
5-qadam. Dizayn:
Ilova ishlayapti, ammo dizaynini yaxshilasa bo‘ladi.
Ilovamizga uslub berish uchun W3.CSS uslublar jadvalidan foydalanamiz.
W3.CSS uslublar jadvalini qo‘shing va ilova bo‘ylab tegishli klasslarni qo‘llang, natija ushbu sahifaning yuqorisidagi xaridlar ro‘yxati bilan bir xil bo‘ladi.
Misol
Ilovangizga W3.CSS uslublar jadvali yordamida uslub bering:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!