AngularJS Uygulaması
Gerçek bir AngularJS Uygulaması oluşturmanın zamanı geldi.
Alışveriş listesi yapmak
Öğe ekleyip çıkarabileceğiniz bir alışveriş listesi oluşturmak için AngularJS özelliklerinden bazılarını kullanalım:
Alışveriş Listem
- Süt×
- Ekmek×
- Peynir×
Uygulama Açıklaması
Adım 1. Başlarken:
adlı bir uygulama yaparak başlayın myShoppingListve buna adlı bir denetleyici ekleyin myCtrl.
productsDenetleyici , geçerli
diziye adlı bir dizi ekler $scope.
HTML'de, ng-repeatdizideki öğeleri kullanarak bir liste görüntülemek için yönergeyi kullanırız.
Örnek
Şimdiye kadar bir dizinin öğelerine dayalı bir HTML listesi yaptık:
<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>
Adım 2. Öğe Ekleme:
ng-model
HTML'de bir metin alanı ekleyin ve yönerge ile uygulamaya bağlayın.
Denetleyicide adlı bir işlev yapın ve diziye bir öğe eklemek addItemiçin giriş alanının değerini kullanın .addMeproducts
Bir düğme ekleyin ve düğmeye tıklandığında işlevi ng-clickçalıştıracak bir yönerge verin.addItem
Örnek
Artık alışveriş listemize ürün ekleyebiliriz:
<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>
Adım 3. Öğeleri Kaldırma:
Ayrıca alışveriş listesinden öğeleri kaldırabilmek istiyoruz.
Denetleyicide, removeItemparametre olarak kaldırmak istediğiniz öğenin dizinini alan adlı bir işlev yapın.
HTML'de, <span>her öğe için bir öğe yapın ve onlara
işlevi şu anki ile ng-clickçağıran bir yönerge verin .removeItem$index
Örnek
Artık alışveriş listemizden öğeleri kaldırabiliriz:
<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>
Adım 4. Hata İşleme:
Uygulamada bazı hatalar var, örneğin aynı öğeyi iki kez eklemeye çalışırsanız uygulama çöküyor. Ayrıca boş öğelerin eklenmesine izin verilmemelidir.
Yeni öğeler eklemeden önce değeri kontrol ederek bunu düzelteceğiz.
HTML'de, hata mesajları için bir kap ekleyeceğiz ve birisi mevcut bir öğeyi eklemeye çalıştığında bir hata mesajı yazacağız.
Örnek
Hata mesajları yazma olasılığı olan bir alışveriş listesi:
<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>
Adım 5. Tasarım:
Uygulama çalışıyor, ancak daha iyi bir tasarım kullanabilir. Uygulamamıza stil vermek için W3.CSS stil sayfasını kullanıyoruz.
W3.CSS stil sayfasını ekleyin ve uygulama boyunca uygun sınıfları ekleyin, sonuç bu sayfanın en üstündeki alışveriş listesiyle aynı olacaktır.
Örnek
W3.CSS stil sayfasını kullanarak uygulamanızın stilini belirleyin:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">