AngularJS | Application - GeeksforGeeks

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>
Output:
AngularJS-Basics
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular File Upload
Top 10 Angular Libraries For Web Developers
Angular | keyup event
Auth Guards in Angular 9/10/11
What is AOT and JIT Compiler in Angular ?
Roadmap to Become a Web Developer in 2022
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Installation of Node.js on Linux
Convert a string to an integer in JavaScript