Click here to Skip to main content
15,861,125 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.

userService.js

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


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

    angular.module("angularJsDemo")
    .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()
        {
            console.log(userlist);

            alert("Hi");

            return userlist;
        }

        function addUser()
        {

        }

        function getUser()
        {

        }
        
        function updateUser()
        {

        }

        function deleteUser()
        {

        }
    }
})();


user.Controller.js

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

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

(function () {

    angular.module("angularJsDemo")
    .controller("userController", userController);

    userController.$inject = ["userService"];

    function userController(userService) {

        var vm = this;

        vm.getuserlist = getuserlist;

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


    }


})();



Index.html

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


HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

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

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

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

                <tr>
                    <th>Name</th>
                </tr>

                <tr>
                    <td>{{list.userlist}}</td>
                </tr>


            </table>




            <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" />
             </div>

        </div>



    </div>
    <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>

</body>
</html>
Posted

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.
HTML
<li ng-repeat="list in users.userlist">
  <ul>
    {{list.surname}}
  </ul>
</li>

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
 
Share this answer
 

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