Learn MVC Using Angular Role Based Login

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

• learn basics of mvc using angularjs

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, a popup opens; 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 “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.

first, enter the manager’s username and password.

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.

click the logout button. it automatically goes to the default login view. now, let's enter the employee role’s username and password.

now, the employee screen will appear. click the view button and it will show the list of languages.

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!