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:
