Table of contents

Introduction

Dynamic Web Application

Create TODO Application

3.1.

Code

3.2.

Output

3.2.1.

Adding a Todo

3.2.2.

Checking and Clearing the Todo

Frequently Asked Questions

4.1.

What is a dynamic web application?

4.2.

What are examples of dynamic web applications?

4.3.

Is Angular open source?

4.4.

What are directives in AngularJS?

4.5.

How do I run an Angular JS app locally?

Conclusion

Last Updated: Mar 27, 2024

Medium

AngularJS - Application

Author dhananjay kumar

Introduction

AngularJs is a framework based on Javascript developed by Google to create web applications. AngularJs is an open-source framework that developers primarily use to build dynamic websites or web applications. The main reasons it is famous as a framework are its built-in services or modules and code reusability in the application.

In this blog, we will learn how to create a dynamic AngularJS application using the AngularJS framework. Still, before developing our AngularJS application, we need to understand the dynamic web application.

Dynamic Web Application

In simple terms, a dynamic web application is an application that works in real time. For example, if a user is interacting with the application, then it should display changes according to the user's request.

The content in the dynamic web application must be updated regularly. E-commerce websites are excellent examples of dynamic web applications. The dynamic web application can be complex to develop or manage due to multiple requests handling events.

Developing a dynamic web application is a great way to learn web technology. This blog will teach us how to create a TODO list application using AngularJS. TODO is a beginner-friendly project that teaches you how to use various built-in modules.

Create TODO Application

In this section, we will implement our AngularJS application with the help of the AngularJS framework.

First, we will create an angular project and open it in the VSCode, or you can use any editor.

Then, in the project folder, create their files index.html, todoscript.js, and todoapp.css to create our AngularJS application.

Index.html

Create the basic Html structure in the file and include the scripts in the <head> tag.

<!DOCTYPE html>

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/clappr/0.0.64/underscore-min.js"></script>
        <script src="todoscript.js"></script>
        <link rel="stylesheet" href="todoapp.css">
    </head>
    
    <body></body>
    
</html>

Our next step will be to print the TODO List Application on the screen. To check whether our application is running or not. Add <h1>TODO List Application</h1> in body.

Now include the ng-app and ng-controller directives in the HTML file. These directives are used for data binding.

<html ng-app="todoApp" ng-controller="todo-controller">

Let's code a section to display our todos.

<div style="border: 2px solid;padding:8px; width: 400px;;">

    <h3>Current total Todos: {{ totaltodos() }}</h3>
    
    <ul style="list-style:none; font-size:30px;">
        <li ng-repeat="todo in todoArray">
            <input type="checkbox" ng-model="todo.stat">
            <span class="status-{{todo.stat}}">{{todo.task}}</span>
        </li>
    </ul>
    
</div>

In the above code, we are we have created a div where we will display our todos in the <li> tag. We will use the ng-repeat directive to iterate over the todo array which we will create in todoscript.js. In the array, we have two objects. One is a task, and the other is a stat. The stat object is to check the status of the todo, and by default, it will be false.

var TodoApp = angular.module("todoApp", []);

TodoApp.controller("todo-controller", function($scope) {
			$scope.todoArray = [{
				task: "Todo task 1",
				stat: false
			}, {
				task: "Todo task 2",
				stat: false
			}, ];
		}

You can also try this code with Online Javascript Compiler

Run Code

We have successfully created our todo list display section our next task will be to add user input and make the application dynamic.

<input type="text" ng-model="todovalue" ng-model-instant>
<button ng-click="addtodo()">Add todo</button>

We have created an input tag with ng-model directive with value todovalue to store user input in the todo array. On clicking the “add todo” button, it will redirect to the addtodo() function.

Let's create an addtodo function in the todoscript.js file.

$scope.addtodo = function() {
	if ($scope.todovalue) {
		$scope.todoArray.push({
			task: $scope.todovalue,
			stat: false
		});
	}
	$scope.todovalue = "";
}

You can also try this code with Online Javascript Compiler

Run Code

If the user input is empty, it will not show any result; else, it will display the user input on the screen when we click on add todo button.

Our next task will be to remove the checked elements from the list. First will add a “clear list” button. This button will redirect to the cleartodo() function in the script file.

<button class="clearbtn" ng-click="cleartodo()">clear list</button>

todoscript.js

$scope.cleartodo = function() {
	$scope.todoArray = _.filter($scope.todoArray, function(todo) {
		return !todo.stat;
	})
}

You can also try this code with Online Javascript Compiler

Run Code

If the status of the todo is true, then we will remove it from the array and update our todo array and display it on the screen.

Now how we will change the status? This will be done with checkbox input.

<input type="checkbox" ng-model="todo.stat">

We have bound the stat object of the todo array with checkbox input using the ng-model directive, and if the checkbox is true, then the status of the todo array element will be changed.

One last task will be to display the total current tasks in todo on the screen. We need to create a totaltodo() function and add it to the Html application,

<h3 >Current total Todos: {{ totaltodos() }}</h3>

todoscript.js

$scope.totaltodos = function() {
	return $scope.todoArray.length;
}

You can also try this code with Online Javascript Compiler

Run Code

We have successfully created our AngularJS application. We can now add some styling to make it look more presentable.

Code

Let us look into the fully functional code below:

index.html

<!DOCTYPE html>

<html ng-app="todoApp" ng-controller="todo-controller">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/clappr/0.0.64/underscore-min.js"></script>
        <script src="todoscript.js"></script>
        <link rel="stylesheet" href="todoapp.css">
    </head>
    
    <body>
        <h1>TODO List Application</h1>
        
        <div style="border: 2px solid;padding:8px; width: 400px;;">
            <h3>Current total Todos: {{ totaltodos() }}</h3>
            
            <ul style="list-style:none; font-size:30px;">
                <li ng-repeat="todo in todoArray">
                    <input type="checkbox" ng-model="todo.stat">
                    <span class="status-{{todo.stat}}">{{todo.task}}</span>
                </li>
            </ul>
            
            <input type="text" ng-model="todovalue" ng-model-instant>
            <button ng-click="addtodo()">Add todo</button>
        </div>
        
        <button class="clearbtn" ng-click="cleartodo()">clear list</button>
    </body>
    
</html>

todoscript.js

var TodoApp = angular.module("todoApp", []);

TodoApp.controller("todo-controller", function($scope) {
	$scope.todoArray = [{
		task: "Todo task 1",
		stat: false
	}, {
		task: "Todo task 2",
		stat: false
	}, ];

	/* 
  		Function to add todo
  		in todo array
	*/
	$scope.addtodo = function() {
		if ($scope.todovalue) {
			$scope.todoArray.push({
				task: $scope.todovalue,
				stat: false
			});
		}
		$scope.todovalue = "";
	}

	/* 
      		Function to clear
        	todo array that are checked
	*/
	$scope.cleartodo = function() {
		$scope.todoArray = _.filter($scope.todoArray, function(todo) {
			return !todo.stat;
		})
	}

	/* 
	      Function count total
	      Todos in the array
	*/
	$scope.totaltodos = function() {
		return $scope.todoArray.length;
	}
})

You can also try this code with Online Javascript Compiler

Run Code

}
todoapp.css

.status-true {
    text-decoration: line-through;
    color: brown;
    opacity: 0.6;
    font-size: 25px;
}

.clearbtn {
    font-size: 30px;
    font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
    margin-top: 10px;
    background-color: chocolate;
    cursor: pointer;
    border-radius: 10px;
}

Output

Adding a Todo

On clicking on “Add todo” button, we get the updated list:

Checking and Clearing the Todo

After checking in the todo, you need to click the clear list button to remove it.

Updated list after clearing some todo tasks:

We can also see that the current todo task count is shown above the tasks, which keeps incrementing on adding tasks and decreases on removing tasks.

Frequently Asked Questions

What is a dynamic web application?

The dynamic web application is an application that works in real time. The content in the dynamic web application must be updated regularly.

What are examples of dynamic web applications?

E-commerce websites, blog applications, etc, are two examples of dynamic web applications.

Is Angular open source?

Yes, Angular is an open-source web framework developed by Google.

What are directives in AngularJS?

Directives are labels that we can use to extend our basic HTML structure and add some functionality to it, for example, data binding.

How do I run an Angular JS app locally?

An angular application can be compiled and run locally using the command ng-serve. This opens the localhost on your system.

Conclusion

In this blog, we have discussed a basic angular application. We have learned about the dynamic web application, and we have implemented a to-do list application as an example of a real-time application.

To learn more about AngularJS, you can check out the following articles.

To learn more about DSA, competitive coding, and many more knowledgeable topics, please look into the guided paths on Coding Ninjas Studio. Also, you can enroll in our courses and check out the mock test and problems available to you. Please check out our interview experiences and interview bundle for placement preparations.

Happy Coding!

Live masterclass

Switch from service to product-based MAANG companies

by Pranav Malik, SDE3 @ Oracle, Ex- Microsoft

17 Oct, 2024

01:30 PM

46+ registered

Predictive Analytics: Forecast ticket sales for an event like Coldplay

by Megna Roy, Data Analyst @ Amazon

15 Oct, 2024

01:30 PM

197+ registered

Switch from service to product-based MAANG companies

by Pranav Malik, SDE3 @ Oracle, Ex- Microsoft

17 Oct, 2024

01:30 PM

46+ registered

Predictive Analytics: Forecast ticket sales for an event like Coldplay

by Megna Roy, Data Analyst @ Amazon

15 Oct, 2024

01:30 PM

197+ registered

View more events