Simple Login Example in AngularJS

By | December 29, 2017

In our previous discussions, we have covered what is AngularJS, basic building blocksDependency Injection and Routing in AngularJS. For a user to log in, he should have credentials (username and password) with him. The credentials can be obtained after completing the registration process. The following link explains the registration process in AngularJS. In this post, we are going to discuss how a login form works in AngularJS. Form validations can be done in two ways in AngularJS. Validations using ngMessages and Angular directives, Properties, attributes.

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 directory structure for 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 a user enters 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.html page. If authentication fails, he will be blocked on the login page notifying with an error message and the user will be asked to enter correct credentials.

Suggested Read:

We have the main base page i.e. index.html where all other views are loaded. Following code explains the index page. Base script 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.

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. Also, we have a login button.

Following code explains the login.html page.

 

The login page has its own controller to hold the 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 code 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 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 into the application, we are storing it in the scope object and binding it to the variable.

As we have said above that, we authenticate the user after the user enters credentials and clicks on the 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:

2 thoughts on “Simple Login Example in AngularJS

Did it help? Comment here..

This site uses Akismet to reduce spam. Learn how your comment data is processed.