AngularJS Application

Navdeep kaur Angular Js

If you are interested to learn about the AngularJS Routing

It is time to create a real AngularJS Application. Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your applications.

Make a Shopping List

Lets use some of the AngularJS features to make a shopping list, where you can add or remove items:

My Shopping List

  • Milk×
  • Bread×
  • Cheese×

Where is AngularJS used?

An open-source application framework, AngularJs is used to create interactive components of a website. It is a highly preferred framework, due to its effectiveness, simplicity, and flexibility. In simpler terms, AngularJS can be defined as a structural framework for dynamic web apps.

Application Explained

Step 1. Getting Started:

Start by making an application called myShoppingList, and add a controller named myCtrl to it. The controller adds an array named products to the current $scope. In the HTML, we use the ng-repeat directive to display a list using the items in the array.

Example

So far we have made an HTML list based on the items of an 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>

Step 2. Adding Items:

In the HTML, add a text field, and bind it to the application with the ng-model directive. In the controller, make a function named addItem, and use the value of the addMe input field to add an item to the products array. Add a button, and give it an ng-click directive that will run the addItem function when the button is clicked.

Example

Now we can add items to our 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>

Step 3. Removing Items:

We also want to be able to remove items from the shopping list. In the controller, make a function named removeItem, which takes the index of the item you want to remove, as a parameter. In the HTML, make a <span> element for each item, and give them an ng-click directive which calls the removeItem function with the current $index.

Example

Now we can remove items from our 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)">&times;</span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
</div>

Step 4. Error Handling:

The application has some errors, like if you try to add the same item twice, the application crashes. Also, it should not be allowed to add empty items. We will fix that by checking the value before adding new items. In the HTML, we will add a container for error messages, and write an error message when someone tries to add an existing item.

Example

A shopping list, with the possibility to 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 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)">&times;</span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
  <p>{{errortext}}</p>
</div>

Step 5. Design:

The application works, but could use a better design. We use the W3.CSS stylesheet to style our application. Add the stylesheet, and include the proper classes throughout the application, and the result will be the same as the shopping list at the top of this page.

Example

Style your application :

<link rel="stylesheet" href=https://www.futurefundamentals.com/

How AngularJS Integrates with HTML

  • The ng-app directive indicates the start of AngularJS application.
  • The ng-model directive creates a model variable named name, which can be used with the HTML page and within the div having ng-app directive.
  • The ng-bind then uses the name model to be displayed in the HTML <span> tag whenever user enters input in the text box.
  • Closing</div> tag indicates the end of AngularJS application.
AngularJS Application
Show Buttons
Hide Buttons