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>