Learn MVC Using Angular Role Based Login



This article demonstrates how to create Angular login using UI-Route in MVC. Learn how to setup role based login in Angular JS using VS 2017.

Angular JS is very powerful framework for single page application and when we creating SPA route will be very important. In this section I am going to use UI-Route and roles are Manager & Employee.

Step 1

Open Visual Studio 2017 and go to File>New>Project. The New project window will be open.


Select web template under the ASP.NET Web Application Framework. Now, opens a popup; choose MVC Templates for our application.


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 as “App”, and create user role based folders (Manager & Employee). Create the required HTML and JavaScript files named as shown in the picture. Here, I am using UI-Route for Angular login, because UI-Route can maintain the “State” of application. If you want to learn about Angular UI-Route, click here.

Step 3

Create HTML page login.html and paste the following code.

Now, create loginController.js Controller for login screen.

Here, I am done with validation and hard code for login users. I have defined the two different roles.

  • Manager : Username is “manager” and password is “1”.
  • Employee : Username is “employee” and password is “1”.
Step 4

Create the “Manager Home” screen in “Manager” folder with the file name home.html

Then, create Employee Home Screen in “Employee” folder’s home.html

Step 5

When setting up states with UI-Route, we inject $stateProvider from the UI-Route module and set up the “/login” and set as default. Don’t forget to link in _layout.cshtml.

Step 6

Run the project or click (F5). Application will open in your default browser.


First, enter the manager role’s username & password.


Home screen opens based on manager’s details. If we click the view button, it opens one more View in the manage state.


Click Logout button. It automatically goes to default login View. Now, let’s enter the employee role’s Username and password.


Now, employee screen will appear. Click the View button and it will show the list of languages.


This sample article will be helpful for your role based login in Angular JS application.


In this article, we have seen MVC using Angular UI-Route role based login. If you have any query, please ask me in comments section.

Happy Coding.

Thiruppathi Rengasamy
I'm a Dotnet Developer & Blogger. And also I'm working as a senior software engineer. I would like to spend my precious time writing articles, research on .Net technologies, and learning new technologies.