Click here to Skip to main content
15,307,117 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello Friends.

Here I have Make One userService.js,userController.js and Index.html.


In this Service I have make one Object called userlist and i make one funtion getUserList() which return userlist object.

/// <reference path="../node_modules/angular/angular.min.js" />
(function () {

    .factory("userService", userService);

    function userService()

        var userlist = [{ name: 'viral' }, {surname:'patva'}];

        var service = {

            getUserList: getUserList,

            addUser: addUser,

            getUser: getUser,

            updateUser: updateUser,

            deleteUser: deleteUser

        return service;

        function getUserList()


            return userlist;

        function addUser()


        function getUser()

        function updateUser()


        function deleteUser()



In this file I have Injected userService and make one function called getuserlist() which will return userlist object from the userService.js file.

/// <reference path="../node_modules/angular/angular.min.js" />

(function () {

    .controller("userController", userController);

    userController.$inject = ["userService"];

    function userController(userService) {

        var vm = this;

        vm.getuserlist = getuserlist;

        function getuserlist()
            vm.userlist = userService.getUserList(vm.userlist);




In this file i have define my controller and module using ng-app and ng-controller. I have made my controller called userController as a users and i tried to call getuserlist() method from the controller which will display object of userlist from the userService.js, But i can't display that object in tabular formt in index.html

<!DOCTYPE html>
<html xmlns="">

    <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />

    <div class="container">
        <div class="row" ng-app="angularJsDemo" ng-controller="userController as users">

            <table class="table" ng-repeat="list in users.getuserlist()">




            <div class="form-group">

                <h1>Registraiton Form </h1>

                <label for="firstname">Firstname:</label>
                <input type="text" class="form-control" placeholder="Enter Your First Name" />
                <label for="middlename">Middlename:</label>
                <input type="text" class="form-control" placeholder="Enter Your Middle Name" />
                <label for="lastname">Lastname:</label>
                <input type="text" class="form-control" placeholder="Enter Your Last Name" />
                <label for="address">Address:</label>
                <textarea class="form-control" placeholder="Enter Your Address"></textarea>
                <label for="city">City:</label>
                <input type="text" class="form-control" placeholder="Enter Your City" />
                <label for="contact">Contact Number:</label>
                <input type="text" class="form-control" placeholder="Enter Your Contact Number" />
                <br />
                <input type="button" class="btn btn-primary" value="SUBMIT" />


    <script src="node_modules/angular/angular.min.js"></script>
    <script src="user.Servie.Module.js"></script>
    <script src="user/user.Controller.js"></script>
    <script src="user/userService.js"></script>


1 solution

Hey ViralPatva,

I don't know, if you can feed the HTML table like this. But what I can suggest, is the follwoing:

First I deleted your table and inserted an ul instead.
<li ng-repeat="list in users.userlist">

What you will see, is that the inital values for your userService.userlist do not work completely. Looked something like this:

  • patva

After this, I would check, if I can change the table to a set of divs. As you are using Bootstrap allready, probably have a look at their Grid system.

- KM

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900