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.

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

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

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

<!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)">×</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> 