Introduction

This article demonstrates how to create an Angular login using UI-Router in MVC. Learn how to set up a role-based login in Angular JS using VS 2017.

Angular JS is a very powerful framework for single page applications and when we are creating a SPA route it will be very important. To demonstrate, I am going to use UI-Router to create a login application and create logins for both a manager and an employee.

For More Reference on MVC and Angular, Here's Another One of my Articles

Once the project is created in solution explorer, it will open like the picture below.

Step 2

Create a new folder in Solution Explorer, name it “App,” and create user role based folders (Manager and Employee). Create the required HTML and JavaScript files named as shown in the picture. Here, I am using UI-Router for Angular login, because UI-Router can maintain the “State” of an application. If you want to learn about Angular UI-Router, check out my previous article here.

Step 3

Create an HTML page called login.html and paste the following code into your file.