AngularJS | Application

Last Updated : 31 Jul, 2020

Applications in AngularJS enable the creation of real-time Applications. There are four primary steps involved in creation of Applications in AngularJS:

Creation of List for an Application.
Adding elements in the List.
Removing elements from the List.
Error Handling

Below are the steps for creations a Subject List Application: Step 1: To start with, choose the list which you want to create. Then using, controller and ng-repeat directive display the elements of the array as a list.

javascript

<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
   </script>
<h1 style="color: green">GeeksforGeeks</h1>
<body>

<script>
var app = angular.module("Subjects", []); 
app.controller("my_Ctrl", function($scope) {
    $scope.name = [
             "English", "Maths", "Economics"];
});
</script>

<div ng-app="Subjects" ng-controller="my_Ctrl">
  <ul>
    <li ng-repeat="var in name">{{var}}</li>
  </ul>
</div>

</body>
</html>

Output:

Step 2: Use the text field, in your application with the help of the ng-model directive. In the controller, make a function named addNewSubject, and use the value of the addSubject input field to add a subject to the 'name' array. Add a button, to add a new subject using an ng-click directive.

javascript

<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<h1 style="color: green">GeeksforGeeks</h1>
<body>

<script>
var app = angular.module("Subjects", []); 
app.controller("my_Ctrl", function($scope) {
    $scope.name =  ["English", "Maths", "Economics"];
    $scope.addingNewSubject = function () {
        $scope.name.push($scope.addSubject);
    }    
});
</script>

<div ng-app="Subjects" ng-controller="my_Ctrl">
  <ul>
    <li ng-repeat="x in name">{{x}}</li>
  </ul>
  <input ng-model="addSubject">
  <button ng-click="addingNewSubject()">Add</button>
</div>
<p>Use input field for adding new subjects.</p>
</body>
</html>

Output:

Step 3: To remove a subject, make a remove function with the index as it's a parameter. For each subject, make a span item and give them an ng-click directive to call the remove function.

javascript

<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<h1 style="color: green">GeeksforGeeks</h1>
<body>

<script>
var app = angular.module("Subjects", []); 
app.controller("my_Ctrl", function($scope) {
    $scope.name =  ["English", "Maths", "Economics"];
    $scope.addingNewSubject = function () {
        $scope.name.push($scope.addSubject);
    }
     $scope.remove = function (x) {
        $scope.name.splice(x, 1);
    }
});
</script>

<div ng-app="Subjects" ng-controller="my_Ctrl">
  <ul>
    <li ng-repeat="x in name">
           {{x}}<span ng-click="remove($index)">×</span></li>
  </ul>
  <input ng-model="addSubject">
  <button ng-click="addingNewSubject()">Add</button>
</div>
<p>Use cross icon for removing subjects.</p>
</body>
</html>

Output:

Step 4: Errors need to be carefully handled. For example: If the same subject is added twice in the list, it displays an error message.

javascript

<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<h1 style="color: green">
    GeeksforGeeks
</h1>
<body>

<script>
var app = angular.module("Subjects", []); 
app.controller("my_Ctrl", function($scope) {
    $scope.name =  ["English", "Maths", "Economics"];
    
     $scope.addingNewSubject = function () {
        $scope.errortext = "";
        if (!$scope.addSubject) {return;}        
        if ($scope.name.indexOf($scope.addSubject) == -1) {
            $scope.name.push($scope.addSubject);
        } else {
            $scope.errortext = 
               "This subject is already in the list.";
        }
    }
    
     $scope.remove = function (x) {
         $scope.errortext = ""; 
        $scope.name.splice(x, 1);
    }
});
</script>

<div ng-app="Subjects" ng-controller="my_Ctrl">
  <ul>
   <li ng-repeat="x in name">
      {{x}}<span ng-click="remove($index)">&times;</span>
    </li>
  </ul>
  <input ng-model="addSubject">
  <button ng-click="addingNewSubject()">Add</button>
  
 <p>{{errortext}}</p>
</div>
<p>Use cross icon for removing subjects.</p>
</body>
</html>