Recent Tutorials and Articles
    Creating User Management Widget in AngularJS
    Published on: 2018-05-25 16:05:40
    Posted By: Sumit Sain

    This tutorial demonstrates how to create a user management widget using AngularJs framework containing a form to add the user details along with a table showing the added users.

    We will be creating following three files in order to create user management widget in AngularJs -

    1. user-details.html file for creating a user details form to allow adding a user along with a table showing the added users
    2. user-details.css file for adding basic style to our widget to give it a decent look
    3. user-details.js file containing AngularJs controller and service for our widget

    This is how our project structure looks like -

    user-details.html

    Here is how our HTML file user-details.html looks like -

    user-details.html
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>User Detail</title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="js/user-details.js"></script>
        <link rel="stylesheet" type="text/css" href="css/user-details.css">
    </head>
    <body>
    <div ng-app="app" ng-controller="UserController">
     <div id="container">
        <form name="form">
        <div id="heading">User Details Demo</div>
        <table>
            <tr>
                <td><label>Name:</label></td>
                <td><input type="text" name="name" ng-model="newuser.name" required autofocus/>
                </td>
            </tr>
            
            <tr>
                <td><label>Email:</label></td>
                <td><input type="email" name="email" ng-model="newuser.email" required/>
                    <span ng-show="form.email.$dirty && form.email.$error.email">Not an email id!</span>
                </td>
            </tr>
    
            <tr>
                <td><label>Phone:</label></td>
                <td><input type="text" name="phone" ng-model="newuser.phone" maxlength="11" required /><td>
            </tr>    
            <tr>
                <td></td>
                <td><input ng-disabled="form.$invalid" id="save-btn" type="button" value="Save" ng-click="saveUser()" /></td>
            </tr>
        </table>
        </form>
    </div>
        <table id="user-details-in-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="user in users">
                    <td>{{ user.name }}</td>
                    <td>{{ user.email }}</td>
                    <td>{{ user.phone }}</td>
                    <td> <a href="javascript:void(0)" ng-click="edit(user.id)">Edit</a> | <a href="javascript:void(0)" ng-click="delete(user.id)">Delete</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    </body>
    </html>
    
    
    user-details.css

    Next file to talk about is a css file that we have added to give our form a fine look. This is a simple CSS file without any angular or fancy stuff in it.

    user-details.css
    
    body{
    	background-color: black;
    }
    #container{
    	color: white;
    	width: 230px;
    	margin-bottom: 20px;
    	font-family: Segoe UI,Arial,sans-serif;
    }
    #user-details-in-table{
    	width: 600px;
    	text-align: left;
    	border: 2px solid white;
    	color: white;
    	font-family: Segoe UI,Arial,sans-serif;
    }
    #save-btn{
    	margin-left: 127px;
    }
    legend{
    	font-weight: bold;
    	font-size: 20px;
    }
    span{
    	color: red;
    }
    #heading{
    	font-size: 20px;
    	font-weight: bold;
    	margin-bottom: 5px;
    	font-family: Segoe UI,Arial,sans-serif;
    }
    th{
    	background-color: #333333;
    }
    a{
    	
    	color: white;
    }
    
    
    user-details.js

    Finally, here is the javascript file containing the service and controller for our user management widget-

    user-details.js
    
    var module = angular.module('app', []);
    
    module.service('UserService', function () {
        //to create unique user id
        var uid = 1;
        
        //users array to hold list of all users
        var users = [{
            id: 0,
            'name': 'Sumit',
                'email': '[email protected]',
                'phone': '9874561230'
        }];
        
        //save method create a new user if not already exists
        //else update the existing object
        this.save = function (user) {
            if (user.id == null) {
                //if this is new user, add it in users array
                user.id = uid++;
                users.push(user);
            } else {
                //for existing user, find this user using id
                //and update it.
                for (i in users) {
                    if (users[i].id == user.id) {
                        users[i] = user;
                    }
                }
            }
    
        }
    
        //simply search users list for given id
        //and returns the user object if found
        this.get = function (id) {
            for (i in users) {
                if (users[i].id == id) {
                    return users[i];
                }
            }
    
        }
        
        //iterate through users list and delete 
        //user if found
        this.delete = function (id) {
            for (i in users) {
                if (users[i].id == id) {
                    users.splice(i, 1);
                }
            }
        }
    
        //simply returns the users list
        this.list = function () {
            return users;
        }
    });
    
    module.controller('UserController', function ($scope, UserService) {
    
        $scope.users = UserService.list();
    
        $scope.saveUser = function () {
            UserService.save($scope.newuser);
            $scope.newuser = {};
        }
    
    
        $scope.delete = function (id) {
    
            UserService.delete(id);
            if ($scope.newuser.id == id) $scope.newuser = {};
        }
    
    
        $scope.edit = function (id) {
            $scope.newuser = angular.copy(UserService.get(id));
        }
    })
    
    
    Webpage Output in Browser

    This is how the HTML code above will be displayed in a browser with one already added user shown in the table:

    Thank you for reading through the tutorial. In case of any feedback/questions/concerns, you can communicate same to us through your comments and we shall get back to you as soon as possible.

    Posted By: Sumit Sain
    Published on: 2018-05-25 16:05:40

    Comment Form is loading comments...