AngularJS Uygulamaları

Seçmeli ders

Ders önerisi:

Gerçek bir AngularJS uygulaması oluşturma zamanı geldi.

{{errortext}}

uygulama açıklaması

1. Adım: Başla öncelikle bir myShoppingList uygulamaya, ve ona myCtrl

adlı bir kontrolör. products dizisini mevcut $scope içinde.

HTML'de, ng-repeat dizideki öğeleri kullanarak listeyi gösteren bir komut.

Örnek

Şimdiye kadar, dizideki öğelere göre bir HTML listesi oluşturduk:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["süt", "ekmek", "peynir"];
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
</div>

Kişisel olarak deneyin

2. Adım: Malları ekleyin

HTML'de bir metin alanı ekleyin ve ng-model komutuyla uygulamaya bağlayın.

Kontrolörde, adı addItem fonksiyonunu kullanarak ekleyin ve addMe giriş alanının değeri, malları products dizine.

bir düğme ekleyin ve ona ng-click Düğmeye tıkladığınızda çalışacak bir komut addItem fonksiyon.

Örnek

Şimdi ürünleri alışveriş listesine ekleyebiliriz:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["süt", "ekmek", "peynir"];
  $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()">Ekle</button>
</div>

Kişisel olarak deneyin

3. Adım: Ürün Silme

Ayrıca, alışveriş listesinden ürün silebilmeyi de istiyoruz.

Kontrolörde, adı removeItem fonksiyon oluşturacağız, bu fonksiyon sileceğiniz öğenin indeksini parametre olarak alacaktır.

HTML'de, her bir öğe için bir <span> elementi kullanır ve ona bir ng-click komut, bu komut mevcut 索引 çağrı removeItem fonksiyon.

Örnek

Şimdi alışveriş listesinden ürün silebiliriz:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["süt", "ekmek", "peynir"];
  $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 tıkla="removeItem($index)">×</span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Ekle</button>
</div>

Kişisel olarak deneyin

4. Adım: Hata İşleme

Bu uygulama bazı hatalar içerir, örneğin, aynı ürünü iki kez eklemeye çalışırsanız uygulama çöküşe geçebilir. Ayrıca, boş ürün eklemeye izin vermemelidir.

Bu sorunu, yeni bir ürün eklemekten önce değeri kontrol ederek çözeceğiz.

HTML'de, hata mesajı için bir konteyner ekleyeceğiz ve bir kişi mevcut bir ürünü eklemeye çalıştığında hata mesajı yazacağız.

Örnek

Alışveriş listesi, hata mesajı yazabilir:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["süt", "ekmek", "peynir"];
  $scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = "Bu ürün zaten alışveriş listesinde.";
    }
  }
  $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 tıkla="removeItem($index)">×</span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Ekle</button>
  <p>{{errortext}}</p>
</div>

Kişisel olarak deneyin

5. Adım: Tasarım

Bu uygulama çalışabilir, ancak daha iyi bir tasarım kullanılabilir. Uygulamamızı tasarlamak için W3.CSS Tarzı Tablosunu kullanıyoruz.

W3.CSS Tarzı Tablosunu ekleyin ve tüm uygulamanızda uygun sınıfları dahil edin, sonuç bu sayfanın üstündeki alışveriş listesi ile aynı olacaktır.

Örnek

Uygulamanızı tasarlamak için W3.CSS Tarzı Tablosunu kullanın:

<link rel="stylesheet" href="https://www.codew3c.com/lib/style/w3.css">

Kişisel olarak deneyin