Gerçek bir angularjs Uygulamasını yaratmanın zamanıdır.
Bir Alışveriş Listesi oluşturun
Bir alışveriş listesini yapmak için angularjs bazı özelliklerini kullanabilir Sağlar, eklemek veya öğeleri kaldırabilirsiniz idi:
Benim Alışveriş Listesi
- {{x}} x
{{ErrorText}}
Uygulama Açıklaması
Adım 1. Başlarken:
Adlı bir uygulama yaparak başlayın myShoppingList ve adlandırılmış bir denetleyici eklemek myCtrl buna.
Kontrolör adında bir dizi ekler products akım $scope .
HTML'de, kullandığımız ng-repeat dizideki öğeleri kullanarak listesini görüntülemek için yönergeyi.
Örnek
Şimdiye kadar bir dizinin öğelere göre bir HTML liste 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>
Kendin dene " Adım 2. Ekleme Öğeler:
HTML'de, bir metin alanı eklemek ve birlikte uygulamaya bağlamak ng-model direktifi.
Denetleyici olarak adlandırılan bir işlev yapmak addItem ve değerini kullanmak addMe bir öğe eklemek için giriş alanının products dizisi.
Bir düğme ekleyin ve bunu bir vermek ng-click çalışacaktır yönergesi addItem butonuna tıklandığında işlevini.
Örnek
Şimdi bizim alışveriş listeye öğe ekleyebilirsiniz:
<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>
Kendin dene " Adım 3. Çıkarma Öğeler:
Ayrıca alışveriş listesinden öğeleri kaldırmak isterler.
Denetleyici olarak adlandırılan bir işlev yapmak removeItem bir Paramtre olarak, kaldırmak istediğiniz öğenin dizinini alır
HTML'de, bir yapmak <span> Her öğe için eleman ve onlara vermek ng-click çağıran yönergesi removeItem akım ile işlevini $index .
Örnek
Şimdi bizim alışveriş listeden öğe kaldırabilirsiniz:
<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>
Kendin dene " Adım 4. hata ele alma:
Eğer, iki kez uygulama çöker aynı öğeyi eklemeye çalışırsanız gibi uygulama, bazı hatalar var. Ayrıca, boş öğeler eklemek için izin verilmemelidir.
Biz yeni öğeler eklemeden önce değerini kontrol ederek o çözecektir.
HTML'de, biz hata mesajları için bir kapsayıcı eklemek ve birisi mevcut bir öğe eklemek çalıştığında bir hata mesajı yazacak.
Örnek
hata iletileri yazmak için imkanı ile 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>
Kendin dene " 5. Tasarım Adım:
uygulama çalışır, ancak daha iyi bir tasarım kullanabilirsiniz. Biz uygulamamızı stil W3.CSS stil kullanın.
W3.CSS stil ekleyin ve dahil uygun sınıfları uygulama boyunca ve sonuç bu sayfanın üst kısmında alışveriş listesi olarak aynı olacaktır.
Örnek
W3.CSS stil kullanarak başvurunuzu Stil:
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
Kendin dene "