Skip to content
Related Articles

Related Articles

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

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :