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:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
31 Jul, 2020
Like Article
Save Article