Simple Login Example in AngularJS

By | November 11, 2017

In our previous discussions, we have covered what is AngularJS, basic building blocksDependency Injection and Routing in AngularJS. In this post, we are going to discuss how a login form works in AngularJS.

In this example, we have a simple login page. Whenever user provides username and password, they will be authenticated and redirected to a home page on success. If authentication fails, the user is notified with an error message.

Before we start implementing any application, it is a best practice to design the folder structure of an application so that anyone can easily understand it. Following is the directory structure for this Simple Login Example in AngularJS.

Directory structure for Simple Login Example in AngularJS

Directory structure

As we can see above, we have base shell index page, login page, its controller and same follows for the home page.

When the user enters his login credentials and clicks on login button, the request is authenticated in the loginService.js file and if authentication is successful, he will be redirected to the Home page. If authentication fails, he will be blocked on login page notifying with an error message and the user will be asked to enter correct credentials.

 

We have the main base page i.e. index.html where all other views are loaded accordingly. Following code explains the index page.

Here all the base scripts files which are required to run an application are loaded when the application is bootstrapped.

 

Now, we need a javascript to hold all the configuration details required for an application to run.

In this file, we configure the routes for an application which is done using UI Router. Also, we have configured something which should work on an application is being bootstrapped.

The following code explains app.js.

 

Next, we will have the views to be loaded on the index page. So firstly its the login page.

In the login page, we have two simple fields to be entered. They are UserName and Password. And we have a login button.

Following code explains the login.html page.

 

The login page has its own controller to hold all its business logic. This is a simple javascript file created specifically for login.html where all its functions and logic is included.

Please look into the loginController.js page as shown below.

 

Next, we will implement the home page (home.html) which will be loaded once the user is successfully logged in. 

Here we have just simple statements and the logout button to sign out from an application.  

 

As we had a separate controller for the login page, similarly we will have a separate controller for the home page.

You can see the controller page i.e homeController.js as given below.

 

Since we are showing the username who is logging-in the application, we are storing it in scope object and binding it to the variable.

As we said above, we do authenticate the user after he enters his credentials and clicks on login button. This is done in the loginService.js file.

You can see the implementation details for loginService.js as shown below. We have preassumed the user credentials to be admin and password. We need to make use of the database server to authenticate the user with his/her registered credentials.

 

Now you might be thinking why we have done this logic in so-called service file, we could have done in the loginController page itself. So to answer this thought, Yes, you are perfectly right. We could have done in the loginController itself. But, one important thing is, as you know services are created to separate the logic from the controller so that it can be reused. In the same way, we have created a separate service to implement the authentication logic so that it can be reused when required.

The outputs of the login application are shown below.

Below login form is displayed initially when the application loaded.

Simple Login Example in AngularJS with code

This is how the login form looks like

 

If the user does not enter the fields and tries to click on the login button, the page notifies him about the required fields. It gives a message as shown in below image.

Field validation in angularJS login form

Field validation

 

If the user enters wrong credentials, the error message is displayed in red color as shown below.

Authentication form in angulasJS with error message

Invalid credentials message

 

If the user enters correct credentials, the user is authenticated. Once the authentication is successful, the user will be redirected to the home page as shown below.

If the authentication fails, he will remain on the login page and an error message is displayed on the page.

The home page has a Logout link to log out from an application. The home page looks as shown below.

Home page code in login form using AngularJS

User’s home page

Conclusion:

AngularJS makes the life easy for developers. You can try out the above example and experience the simplicity involved in this.




Suggested articles for you:

Did it help? Comment here..