AngularJS | Application

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.