ASP.NET

Introduction

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.

ASP.NET

Select web template under the ASP.NET Web Application Framework. Now, opens a popup; 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 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.

  1. class=“container”>
  2. class=“row” style=“margin-top:5%”>
  3. class=“col-sm-6 col-md-4 col-md-offset-4”>
  4. class=“panel panel-default boxshadow”>
  5. class=“panel-heading” style=“color:#ffffff; backgroundcolor: #3276b1;”>
  6.                      Sign in to continue
  • class=“panel-body”>
  •                     “form” >
  • class=“row”>
  • class=“col-md-4”>
  • class=“col-md-4”>
  • class=“center”>
  • class=“imgcircle” style=“height:100px;width:100px” src=“../../Content/user/02.jpg” />
  •                                 </div>
  • class=“col-md-4”>
  •                             </div>
  •                             <br />
  • class=“row”>
  • class=“col-sm-12 col-md-10  col-md-offset-1 “>
  •                                     class=“alert-danger”>{{Message}}
  • class=“form-group”>
  • class=“input-group”>
  •                                             class=“input-group-addon”>
  •                                                 class=“fa fa-user”>User Name
  •                                             class=“form-control txtheight” placeholder=“Username” id=“UserName” ng-model=“UserName” name=“UserName” type=“text” autofocus>
  •                                     </div>
  •                                     <br />
  • class=“form-group”>
  • class=“input-group”>
  •                                             class=“input-group-addon”>
  •                                                 class=“fa fa-lock”>Password
  •                                             class=“form-control txtheight” placeholder=“Password” id=“Password” ng-model=“Password” name=“Password” type=“password” value=“”>
  •                                     </div>
  •                                     <br />
  • class=“form-group”>
  •                                         “button” ng-click=“login()” id=“loginclick” class=“btn btn-lg btn-primary btn-block” value=“Sign in”>
  •                                 </div>
  •                             </div>
  •                         </fieldset>
  •                     </form>
  •                 </div>
  •             </div>
  •         </div>
  •     </div>
  • </div>
  • <style>
  •     #dis {
  •         color: orangered;
  •     }
  •     .txtheight {
  •         height: 31px;
  •     }
  • </style>

Now, create loginController.js Controller for login screen.

  1. uiroute.controller(‘LoginController’function ($scope, $state) {
  2.     $scope.login=function()
  3.     {
  4.         if ($scope.UserName ===  || $scope.UserName == undefined)
  5.         {
  6.             $scope.Message = “Username is empty”
  7.             return;
  8.         }
  9.         if ($scope.Password ===  || $scope.Password == undefined) {
  10.             $scope.Message = “Password is empty”
  11.             return;
  12.         }
  13.         if ($scope.UserName.toUpperCase() == ‘MANAGER’)
  14.         {
  15.             if($scope.Password==‘1’)
  16.             {
  17.                 $state.go(‘manager’)
  18.             }
  19.         }
  20.         else if ($scope.UserName.toUpperCase() == ‘EMPLOYEE’) {
  21.             if ($scope.Password == ‘1’) {
  22.                 $state.go(’employee’)
  23.             }
  24.         }
  25.         else
  26.         {
  27.             $scope.Message = “Username or Password is empty”
  28.         }
  29.     }
  30. });

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

  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 “Manager” folder with the file name home.html

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

  1. class=“jumbotron text-center”>
  2. Employee Home

  3.     “.list” class=“btn btn-primary”> View
  4.     class=“btn btn-danger” ui-sref=“login”> Logout

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.

  1. uiroute.config(function ($stateProvider, $urlRouterProvider){
  2.     $urlRouterProvider.otherwise(‘/login’);
  3.     $stateProvider
  4.         // State managing  
  5.          .state(‘login’, {
  6.              url: ‘/login’,
  7.              templateUrl: ‘/App/Test/login.html’,
  8.              controller: ‘LoginController’
  9.          })
  10.         //Manager Role
  11.         .state(‘manager’, {
  12.             url: ‘/manager’,
  13.             templateUrl: ‘/App/Manager/home.html’
  14.         })
  15.          .state(‘manager.list’, {
  16.              url: ‘/list’,
  17.              templateUrl: ‘/App/Test/dataList.html’,
  18.              controller: ‘CarController’
  19.          })
  20.          //Manager Role
  21.         .state(’employee’, {
  22.             url: ‘/employee’,
  23.             templateUrl: ‘/App/Employee/home.html’
  24.         })
  25.         .state(’employee.list’, {
  26.             url: ‘/list’,
  27.             templateUrl: ‘/App/Test/homelist.html’,
  28.             controller: function ($scope) {
  29.                 $scope.Language = [‘C#’‘VB’‘JavaScript’‘PHP’];
  30.             }
  31.         });
  32. });

Step 6

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

ASP.NET

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

ASP.NET

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

ASP.NET

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

ASP.NET

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

ASP.NET

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

Conclusion

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.

Advertisements