Programu ya AngularJS

Sasa inaingia wakati wa kumengeneza programu ya kina ya AngularJS.

Kumengeneza mikataba ya mawasiliano

Tunaeleza AngularJS kwa matukio mbalimbali kuwauna mikataba ya mawasiliano ambayo tunaweza kuongeza ama kutofanya kipungufu kwa uzoefu:

Kueleza programu

Mwaka 1: Angalia

Kwanza tumeundika kifungo kwa jina la myShoppingList programu, na kuingiza kifungo kwa jina la myCtrl Mwenyekiti wa

Mwenyekiti wa products kuingiza orodha yake kwenye $scope kwenye.

katika HTML, tumetumia ng-repeat Amriko kwa kumonisha orodha ya vipengele vya orodha kwenye orodha.

Mivuno

Kuzote, tumeunda orodha ya HTML kwa kuzingatia vipengele vya orodha:

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
</div>

Jifunze tena

Mwaka 2: Ongeza uzoefu

katika HTML, ongeza ufupi wa harakati, na kuingiza ng-model amriko kwa programu.

在控制器中，创建一个名为 addItem kwa matukio ya kifungo, na kuingiza kifungo addMe athari ya kuingiza ufupi wa mifumo wa kila uzoefu kwa kuingiza uzoefu products kwenye orodha.

ongezesha kifungo kiume au ng-click Amriko, amriko hii atakilishi kama uongezea kifungo hiki addItem 函数。

Mivuno

现在我们可以将商品添加到购物清单中：

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $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()">Ongeza</button>
</div>

Jifunze tena

第 3 步：删除商品

我们还希望能够从购物清单中删除商品。

在控制器中，创建一个名为 removeItem 的函数，该函数将您想要删除的项目的索引作为参数。

在 HTML 中，为每个项目创建一个 <span> 元素，并为其提供一个 ng-click 指令，该指令使用当前 $index 调用 removeItem 函数。

Mivuno

现在我们可以从购物清单中删除商品：

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $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()">Ongeza</button>
</div>

Jifunze tena

第 4 步：错误处理

该应用有一些错误，例如，如果您尝试两次添加相同的商品，该应用就会崩溃。另外，也不应该允许添加空商品。

我们将通过添加新商品前检查值来解决这个问题。

在 HTML 中，我们将添加一个用于错误消息的容器，并在有人尝试添加现有商品时编写错误消息。

Mivuno

购物清单，可以写入错误消息：

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["牛奶", "面包", "奶酪"];
  $scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = "该商品已经在您的购物清单中。";
    }
  }
  $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()">Ongeza</button>
  <p>{{errortext}}</p>
</div>

Jifunze tena

Kipindi cha 5: Muundo

Programu hii inaweza kuendelea, lakini inaweza kuwa na muundo bora zaidi. Tumia tabia ya W3.CSS kudesigna programu yetu.

Ongeza tabia ya W3.CSS, na ingawa tabia hiyo inahusishwa kwa kila programu, matokeo yatafuata orodha ya maadili ya eneo la juu la ukurasa huu.

Mivuno

Tumia tabia ya W3.CSS kudesigna programu yako:

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

Jifunze tena