English

AngularJS Tutorial

AngularJS Applications

AngularJS - Todo Application

Hello, aspiring programmers! Today, we're going to embark on an exciting journey into the world of AngularJS by building a simple yet powerful Todo application. As your friendly neighborhood computer science teacher, I'm thrilled to guide you through this process, even if you've never written a line of code before. So, grab your favorite beverage, get comfortable, and let's dive in!

AngularJS - ToDo Application

What is AngularJS?

Before we start coding, let's take a moment to understand what AngularJS is. Imagine you're building a house. HTML would be the foundation and walls, CSS would be the paint and decorations, and JavaScript would be the electricity and plumbing. AngularJS is like a super-efficient construction crew that helps you put all these elements together in a smart, organized way.

AngularJS is a powerful JavaScript framework that extends HTML vocabulary for your application. It's particularly good at building dynamic, single-page applications.

Setting Up Our Project

First things first, let's set up our project. We'll need three files:

  1. index.html (our main HTML file)
  2. app.js (our AngularJS application)
  3. style.css (our stylesheet)

Let's start with our HTML file:

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
    <title>My Todo App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body ng-controller="TodoController">
    <h1>My Todo List</h1>
    <!-- We'll add more here later -->
</body>
</html>

Let's break this down:

  • ng-app="todoApp": This tells AngularJS that this is the root element of our application.
  • ng-controller="TodoController": This specifies which controller should be used for this part of our app.
  • We've included AngularJS from a CDN, and linked our app.js and style.css files.

Creating Our AngularJS Application

Now, let's create our AngularJS application in app.js:

var app = angular.module('todoApp', []);

app.controller('TodoController', function($scope) {
    $scope.todos = [
        {text: 'Learn AngularJS', done: false},
        {text: 'Build an app', done: false}
    ];

    $scope.addTodo = function() {
        $scope.todos.push({text: $scope.newTodo, done: false});
        $scope.newTodo = '';
    };
});

Here's what's happening:

  • We create an AngularJS module named 'todoApp'.
  • We define a controller named 'TodoController'.
  • Inside the controller, we create an array of todo items and a function to add new todos.
  • $scope is like a bridge between our HTML and JavaScript. It allows us to access variables and functions in our HTML.

Displaying Our Todos

Let's update our HTML to display our todos:

<body ng-controller="TodoController">
    <h1>My Todo List</h1>
    <ul>
        <li ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.done">
            <span ng-class="{'done': todo.done}">{{todo.text}}</span>
        </li>
    </ul>
    <form ng-submit="addTodo()">
        <input type="text" ng-model="newTodo" placeholder="Add a new todo">
        <input type="submit" value="Add">
    </form>
</body>

Let's break this down:

  • ng-repeat="todo in todos": This creates a new <li> for each todo in our todos array.
  • ng-model="todo.done": This binds the checkbox to the 'done' property of our todo.
  • ng-class="{'done': todo.done}": This applies the 'done' class when todo.done is true.
  • {{todo.text}}: This displays the text of our todo.
  • ng-submit="addTodo()": This calls our addTodo function when the form is submitted.
  • ng-model="newTodo": This binds the input to our newTodo variable in the controller.

Styling Our App

Finally, let's add some basic styling in our style.css:

body {
    font-family: Arial, sans-serif;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
}

.done {
    text-decoration: line-through;
    color: #888;
}

form {
    margin-top: 20px;
}

input[type="text"] {
    width: 70%;
    padding: 5px;
}

input[type="submit"] {
    padding: 5px 10px;
}

This CSS will make our app look clean and organized.

Conclusion

Congratulations! You've just built your first AngularJS application. Here's a table summarizing the main AngularJS concepts we've used:

Concept Description
ng-app Defines the root element of an AngularJS application
ng-controller Specifies which controller to use for the HTML element
ng-repeat Repeats an HTML element for each item in an array
ng-model Binds an input, select, or textarea to a property on the scope
ng-submit Specifies what function to run when a form is submitted
ng-class Dynamically applies CSS classes

Remember, learning to code is like learning a new language. It takes time and practice, but with persistence, you'll be building complex applications in no time. Keep coding, keep learning, and most importantly, have fun!

Credits: Image by storyset

Previous Tutorial:
AngularJS - Internationalization
Next Tutorial:
AngularJS - Notepad Application