AngularJS Applications

It's time to create a real AngularJS application.

Create Shopping List

Let's use some features of AngularJS to make a shopping list where you can add or delete products:

Application Description

Step 1: Start

First create a named myShoppingList application, and add a named myCtrl controller.

controller named products array to the current $scope in.

In HTML, we use ng-repeat command to display the list of items in the array.

Example

So far, we have created an HTML list based on the items in the array:

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

Try It Yourself

Step 2: Add product

In HTML, add a text field and use ng-model command to bind it to the application.

In the controller, create a named addItem function, and use addMe The value of the input field will add the product to products in the array.

Add a button and specify a ng-click Command, this command will be executed when the button is clicked addItem function.

Example

Now we can add items to the shopping list:

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

Try It Yourself

Step 3: Delete Items

We also hope to be able to delete items from the shopping list.

In the controller, create a named removeItem function, which takes the index of the item you want to delete as a parameter.

In HTML, create a <span> element, and provides a ng-click directive, which uses the current $index call removeItem function.

Example

Now we can remove items from the shopping list:

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

Try It Yourself

Step 4: Error Handling

The application has some errors, such as, if you try to add the same product twice, the application will crash. Also, it should not be allowed to add empty products.

We will solve this problem by checking the value before adding a new product.

In HTML, we will add a container for error messages and write an error message when someone tries to add an existing product.

Example

Shopping list, can write error messages:

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

Try It Yourself

Step 5: Design

The application can run, but it can be designed better. We use W3.CSS stylesheet to design our application.

Add W3.CSS stylesheet and include appropriate classes throughout the application, the result will be the same as the shopping list at the top of this page.

Example

Use W3.CSS stylesheet to design your application:

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

Try It Yourself