AngularJS - Login Application

Hello there, aspiring web developers! Today, we're going to embark on an exciting journey to create a login application using AngularJS. As your friendly neighborhood computer science teacher, I'm here to guide you through this process step by step. Don't worry if you're new to programming – we'll start from the basics and work our way up. By the end of this tutorial, you'll have a functional login application and a solid understanding of AngularJS concepts. So, let's dive in!

1. Introduction to AngularJS

Before we start coding, let's take a moment to understand what AngularJS is. Imagine you're building a house – AngularJS is like your trusty toolkit, filled with all sorts of useful tools to make your job easier. It's a JavaScript framework that helps us create dynamic web applications with less effort.

1.1 Why AngularJS?

AngularJS brings several benefits to the table:

Two-way data binding
Modular approach
Dependency injection
Directives for extending HTML

These features might sound like technical jargon now, but don't worry – we'll explore them as we build our login application.

2. Setting Up Our Project

2.1 Creating the HTML Structure

Let's start by creating a basic HTML file for our login application. Open your favorite text editor and create a new file called index.html. Here's the initial structure:

<!DOCTYPE html>
<html ng-app="loginApp">
<head>
    <title>AngularJS Login Application</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="LoginController">
    <h1>Welcome to our Login Application</h1>
    <!-- We'll add our login form here -->
</body>
</html>

In this HTML, we've included the AngularJS library from a CDN and linked to our app.js file (which we'll create next). The ng-app and ng-controller attributes are AngularJS directives that we'll explain shortly.

2.2 Creating the AngularJS Module and Controller

Now, let's create our app.js file in the same directory as our HTML file:

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

app.controller('LoginController', function($scope) {
    $scope.user = {
        username: '',
        password: ''
    };

    $scope.login = function() {
        // We'll implement this later
    };
});

Here, we're creating an AngularJS module called loginApp and a controller called LoginController. The controller has a user object with username and password properties, and a login function that we'll implement later.

3. Building the Login Form

Now that we have our basic structure, let's add a login form to our HTML:

<form ng-submit="login()">
    <label for="username">Username:</label>
    <input type="text" id="username" ng-model="user.username" required>

    <label for="password">Password:</label>
    <input type="password" id="password" ng-model="user.password" required>

    <button type="submit">Login</button>
</form>

This form uses AngularJS directives like ng-submit and ng-model. The ng-submit directive calls our login() function when the form is submitted, while ng-model binds the input values to our user object in the controller.

4. Implementing the Login Function

Let's update our login function in the controller:

$scope.login = function() {
    if ($scope.user.username === 'admin' && $scope.user.password === 'password') {
        $scope.message = 'Welcome, ' + $scope.user.username + '!';
    } else {
        $scope.message = 'Invalid username or password.';
    }
};

This function checks if the entered username and password match our hardcoded values. In a real application, you'd typically check these against a database.

5. Displaying the Login Result

To display the login result, add this to your HTML:

<p>{{message}}</p>

The double curly braces {{}} are AngularJS's way of displaying data from the controller in the view.

6. Adding Some Style

Let's make our application look a bit nicer with some CSS. Add this to your HTML file:

<style>
    body {
        font-family: Arial, sans-serif;
        max-width: 300px;
        margin: 0 auto;
        padding: 20px;
    }
    input, button {
        display: block;
        margin: 10px 0;
        width: 100%;
        padding: 5px;
    }
</style>

7. The Complete Application

Here's our complete index.html file:

<!DOCTYPE html>
<html ng-app="loginApp">
<head>
    <title>AngularJS Login Application</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="app.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 300px;
            margin: 0 auto;
            padding: 20px;
        }
        input, button {
            display: block;
            margin: 10px 0;
            width: 100%;
            padding: 5px;
        }
    </style>
</head>
<body ng-controller="LoginController">
    <h1>Welcome to our Login Application</h1>
    <form ng-submit="login()">
        <label for="username">Username:</label>
        <input type="text" id="username" ng-model="user.username" required>

        <label for="password">Password:</label>
        <input type="password" id="password" ng-model="user.password" required>

        <button type="submit">Login</button>
    </form>
    <p>{{message}}</p>
</body>
</html>

And here's our complete app.js file:

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

app.controller('LoginController', function($scope) {
    $scope.user = {
        username: '',
        password: ''
    };

    $scope.login = function() {
        if ($scope.user.username === 'admin' && $scope.user.password === 'password') {
            $scope.message = 'Welcome, ' + $scope.user.username + '!';
        } else {
            $scope.message = 'Invalid username or password.';
        }
    };
});

8. Conclusion

Congratulations! You've just built your first AngularJS login application. We've covered a lot of ground, from setting up an AngularJS module and controller to creating a form with two-way data binding and implementing a simple login function.

Remember, this is just the tip of the iceberg when it comes to AngularJS. As you continue your journey, you'll discover more powerful features that will help you build complex, interactive web applications.

Here's a table summarizing the main AngularJS concepts we've used:

Concept	Description
Module	A container for different parts of an app
Controller	Manages the app's data and behavior
Directive	Extends HTML with custom attributes and elements
Two-way Data Binding	Synchronizes data between the model and the view
Expressions	Accesses variables and functions from the scope

Keep practicing, stay curious, and happy coding!

Credits: Image by storyset

Previous Tutorial:

AngularJS - Bootstrap Application

Next Tutorial:

AngularJS - Upload File