Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Learn MVC Using Angular Role Based Login

DZone's Guide to

Learn MVC Using Angular Role Based Login

Learn how to create a login system for your web application by using MVC in conjunction with Angular UI-Router. Read on for more!

Free Resource

Get deep insight into Node.js applications with real-time metrics, CPU profiling, and heap snapshots with N|Solid from NodeSource. Learn more.

ASP.NET


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

Step 1

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

ASP.NET


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

ASP.NET

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

ASP.NET


Step 2
ASP.NET


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.

<div class="container">  
    <div class="row" style="margin-top:5%">  
        <div class="col-sm-6 col-md-4 col-md-offset-4">  
            <div class="panel panel-default boxshadow">  
                <div class="panel-heading" style="color:#ffffff; background-color: #3276b1;">  
                    <strong> Sign in to continue</strong>  
                </div>  
                <div class="panel-body">  
                    <form role="form" >  
                        <fieldset>  
                            <div class="row">  
                                <div class="col-md-4"></div>  
                                <div class="col-md-4">  
                                    <div class="center">  

                                        <img class="img-circle" style="height:100px;width:100px" src="../../Content/user/02.jpg" />  

                                    </div>  
                                </div>  
                                <div class="col-md-4"></div>  


                            </div>  
                            <br />  
                            <div class="row">  
                                <div class="col-sm-12 col-md-10  col-md-offset-1 ">  
                                    <span class="alert-danger">{{Message}}</span>  
                                    <div class="form-group">  
                                        <div class="input-group">  
                                            <span class="input-group-addon">  
                                                <i class="fa fa-user">User Name</i>  
                                            </span>  
                                            <input class="form-control txtheight" placeholder="Username" id="UserName" ng-model="UserName" name="UserName" type="text" autofocus>  
                                        </div>  
                                    </div>  
                                    <br />  

                                    <div class="form-group">  
                                        <div class="input-group">  
                                            <span class="input-group-addon">  
                                                <i class="fa fa-lock">Password</i>  
                                            </span>  
                                            <input class="form-control txtheight" placeholder="Password" id="Password" ng-model="Password" name="Password" type="password" value="">  
                                        </div>  
                                    </div>  
                                    <br />  
                                    <div class="form-group">  
                                        <input type="button" ng-click="login()" id="loginclick" class="btn btn-lg btn-primary btn-block" value="Sign in">  
                                    </div>  
                                </div>  
                            </div>  
                        </fieldset>  
                    </form>  
                </div>  
            </div>  
        </div>  
    </div>  
</div>  
<style>  
    #dis {  
        color: orangered;  
    }  

    .txtheight {  
        height: 31px;  
    }  
</style>   


  1. Manager
    1. Username is “manager” and password is “1”.
  2. Employee
    1. Username is “employee” and password is “1”.

Step 4

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

<div class="jumbotron text-center">  
    <h1>Manager Home</h1>  
    <a ui-sref=".list" class="btn btn-primary"> View </a>  
    <a class="btn btn-danger" ui-sref="login"> Logout</a>  
</div>  
<div ui-view></div>  

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

<div class="jumbotron text-center">  
    <h1>Employee Home</h1>  
    <a ui-sref=".list" class="btn btn-primary"> View</a>  
    <a class="btn btn-danger" ui-sref="login"> Logout</a>  
</div>  
<div ui-view></div>  


Step 5

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

uiroute.config(function ($stateProvider, $urlRouterProvider){  
    $urlRouterProvider.otherwise('/login');  
    $stateProvider  
        // State managing    
         .state('login', {  
             url: '/login',  
             templateUrl: '/App/Test/login.html',  
             controller: 'LoginController'  
         })  
        //Manager Role  
        .state('manager', {  
            url: '/manager',  
            templateUrl: '/App/Manager/home.html'  
        })  
         .state('manager.list', {  
             url: '/list',  
             templateUrl: '/App/Test/dataList.html',  
             controller: 'CarController'  
         })  
         //Manager Role  
        .state('employee', {  
            url: '/employee',  
            templateUrl: '/App/Employee/home.html'  
        })  
        .state('employee.list', {  
            url: '/list',  
            templateUrl: '/App/Test/homelist.html',  
            controller: function ($scope) {  
                $scope.Language = ['C#', 'VB', 'JavaScript', 'PHP'];  
            }  
        });  


});  


Step 6

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

ASP.NET

First, enter the manager’s username and password.

ASP.NET


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


ASP.NET

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

ASP.NET


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

ASP.NET


Conclusion

In this article, we have worked with MVC using an Angular UI-Router role based login. If you have any queries, please ask me in the comments section.

Happy coding!

Node.js application metrics sent directly to any statsd-compliant system. Get N|Solid

Topics:
mvc ,angular ,web dev ,web application development

Published at DZone with permission of Thiruppathi Rengasamy, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}