AngularJS ਐਪਲੀਕੇਸ਼ਨ

ਹੁਣ ਇੱਕ ਅਸਲ ਐਂਜੁਲਰ ਜੀਐੱਸ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਦਾ ਸਮਾਂ ਹੈ

ਸ਼ਾਪਿੰਗ ਸੂਚੀ ਬਣਾਓ

ਹੁਣ ਅਸੀਂ ਐਂਜੁਲਰ ਜੀਐੱਸ ਦੀਆਂ ਕੁਝ ਫੰਕਸ਼ਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਸ਼ਾਪਿੰਗ ਸੂਚੀ ਬਣਾਈਆਂ ਹਨ, ਜਿਸ ਵਿੱਚ ਤੁਸੀਂ ਵਸਤੂ ਜੋੜ ਸਕਦੇ ਹੋ ਜਾਂ ਹਟਾ ਸਕਦੇ ਹੋ

ਐਪਲੀਕੇਸ਼ਨ ਵਿਆਖਿਆ

ਕਦਮ 1: ਸ਼ੁਰੂ ਕਰੋ

ਪਹਿਲਾਂ ਇੱਕ myShoppingList ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਜੋੜੋ, ਅਤੇ ਇੱਕ ਨਾਮ ਵਾਲਾ myCtrl ਕੰਟਰੋਲਰ

ਨਾਮ ਵਾਲਾ products ਦੇ ਸਰਗਰਮ ਵਿੱਚ ਜੋੜੇ ਗਏ ਸਰਗਰਮ $scope ਵਿੱਚ

HTML ਵਿੱਚ, ਅਸੀਂ ng-repeat ਆਦੇਸ਼ ਨੂੰ ਸਰਗਰਮ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਵਰਤੋਂ ਕਰੋ

ਉਦਾਹਰਣ

ਹੁਣ ਤੱਕ, ਅਸੀਂ ਸਰਗਰਮ ਦੇ ਪ੍ਰੋਜੈਕਟ ਦੇ ਨਾਲ ਇੱਕ HTML ਸੂਚੀ ਬਣਾਈ ਹੈ:

<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>

ਆਪਣੇ ਅਨੁਸਾਰ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਕਦਮ 2: ਵਸਤੂ ਜੋੜੋ

HTML ਵਿੱਚ, ਇੱਕ ਟੈਕਸਟ ਫੀਲਡ ਜੋੜੋ ਅਤੇ ng-model ਆਦੇਸ਼ ਨੂੰ ਐਪਲੀਕੇਸ਼ਨ ਨਾਲ ਬੈਂਡ ਕਰੋ

在控制器中，创建一个名为 addItem ਦੀ ਫੰਕਸ਼ਨ ਦੇ ਨਾਲ ਅਤੇ addMe ਇਨਪੁਟ ਫੀਲਡ ਦੇ ਮੁੱਲ ਨੂੰ ਵਸਤੂ ਜੋੜੇਗਾ products ਸਰਗਰਮ ਵਿੱਚ

ਇੱਕ ਬਟਨ ਜੋੜੋ ਅਤੇ ਉਸ ਨੂੰ ਇੱਕ ng-click ਆਦੇਸ਼, ਇਹ ਆਦੇਸ਼ ਬਟਨ ਨੂੰ ਕਲਿੱਕ ਕਰਨ ਉੱਤੇ ਚਲਾਵੇਗਾ addItem 函数。

ਉਦਾਹਰਣ

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

<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()">ਜੋੜੋ</button>
</div>

ਆਪਣੇ ਅਨੁਸਾਰ ਕੋਸ਼ਿਸ਼ ਕਰੋ

第 3 步：删除商品

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

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

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

ਉਦਾਹਰਣ

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

<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()">ਜੋੜੋ</button>
</div>

ਆਪਣੇ ਅਨੁਸਾਰ ਕੋਸ਼ਿਸ਼ ਕਰੋ

第 4 步：错误处理

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

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

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

ਉਦਾਹਰਣ

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

<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()">ਜੋੜੋ</button>
  <p>{{errortext}}</p>
</div>

ਆਪਣੇ ਅਨੁਸਾਰ ਕੋਸ਼ਿਸ਼ ਕਰੋ

ਪੰਜਵਾਂ ਕਦਮ: ਡਿਜ਼ਾਇਨ

ਇਹ ਐਪਲੀਕੇਸ਼ਨ ਚਲਦੀ ਹੈ, ਪਰ ਬਿਹਤਰ ਡਿਜ਼ਾਇਨ ਵਿੱਚ ਹੋ ਸਕਦੀ ਹੈ।ਅਸੀਂ ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ W3.CSS ਸਟਾਈਲ ਸ਼ੇਟ ਦੇ ਨਾਲ ਡਿਜ਼ਾਇਨ ਕਰਦੇ ਹਾਂ。

W3.CSS ਸਟਾਈਲ ਸ਼ੇਟ ਜੋੜੋ ਅਤੇ ਪੂਰੇ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਉਚਿਤ ਵਰਗ ਜੋੜੋ, ਨਤੀਜਾ ਇਸ ਪੰਨੇ ਦੇ ਉੱਪਰੋਕਤ ਕੱਚੀ ਸਾਲਾਈ ਨਾਲ ਮਿਲੇਗਾ。

ਉਦਾਹਰਣ

ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਡਿਜ਼ਾਇਨ ਕਰਨ ਲਈ W3.CSS ਸਟਾਈਲ ਸ਼ੇਟ ਵਰਤੋਂ ਕਰੋ:

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

ਆਪਣੇ ਅਨੁਸਾਰ ਕੋਸ਼ਿਸ਼ ਕਰੋ