CODEWITHSUNDEEP
javascriptangularjs
v1shnu
v1shnu

Reputation: 2231

Angular provider not working

I am learning Services in Angular. T tried service and factory and could get them working , but I am not able to get provider working. I checked out the solutions of few SO answers too, still couldn't get it to work

This is my provider:

app.provider('EmployeeService', function EmployeeServiceProvider() {
    var list = [{
        name: '',
        skill: ''
    }];

    this.$get = function() {
        return {
            getList: function() {
                return list
            },
            add: function(employee) {
                list.push(employee);
            }
        };
    }
})

And my controller:

app.controller('MainCtrl', function($scope, EmployeeService) {

    $scope.employee = {
        name: '',
        skill: ''
    };
    $scope.employees = EmployeeService.getList();
    $scope.add = function(employee) {
        EmployeeService.add(employee);
        $scope.employee = {
            name: '',
            skill: ''
        }
    }
});

And app.js

var app = angular.module('myApp', []);

app.config(['EmployeeServiceProvider', function(EmployeeServiceProvider) {
    var user = {
        name: 'Rob',
        skill: 'Hacker'
    };
    EmployeeServiceProvider.add(user);

}]);

My html is this:

<html lang="en" ng-app="myApp">

<head>
    <meta charset="UTF-8">
    <title>AngularJS app</title>
    <script src="js\angular\angular.js"></script>
    <script src="app\app.js"></script>
    <script src="app\controllers\MainCtrl.js"></script>
    <script src="app\services\EmployeeService.js"></script>
</head>

<body>
    <div ng-controller='MainCtrl'>
        <input type="text" ng-model="employee.name" placeholder="Enter employee name"/>
        <input type="text" ng-model="employee.skill" placeholder="Enter employee skill"/>
        <button ng-click="add(employee)">Add</button>
        <hr>
        <table>
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Skill</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="person in employees">
                    <td>{{person.name}}</td>
                    <td>{{person.skill}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

I am expecting to add the values in the config before providing it in the HTML. But I am not able to do it. Nothing shows up in the console as well. Kindly let me know how to correctly configure the provider and use it in config.

Upvotes: 3

Views: 2564

Answers (1)

nalinc
nalinc

Reputation: 7425

The issue is in your provider code. Your provider needs to return an object containing $get property. Simply adding $get to this wont work. inside $get, you need to return the functions beings used by your controller(namely add() and getList())

You need to keep the add function at two places:

First, right within the provider's return{ }(as a sibling to $get) because you are using it in config function.

app.config(['EmployeeServiceProvider', function(EmployeeServiceProvider) {
    var user = {
        name: 'Rob',
        skill: 'Hacker'
    };

    EmployeeServiceProvider.add(user);   //<--  Here

}]);

Second, you need to keep the add function within $get's return since you are using it in your controller.

$scope.add = function(employee) {
    EmployeeService.add(employee);   <-- Here
    $scope.employee = {
        name: '',
        skill: ''
    }
}

Here's the complete code for your provider:

app.provider('EmployeeService', function EmployeeServiceProvider() {
    var list = [{
        name: '',
        skill: ''
    }];

  return{
    add: function(employee) {    //This is for Config's visibility
        list.push(employee);
    },    
    $get:function(){
        return{
            add: function(employee) {    // This is for controller's visibility
                list.push(employee);
            },    
            getList: function() {
                return list
            }          
        }
    }

  }
})

You can also bind the methods($get and add) to this instead of returning a separate object

app.provider('EmployeeService', function EmployeeServiceProvider() {
    var list = [{
        name: '',
        skill: ''
    }];

    this.add= function(employee) {
        list.push(employee);
    }
    this.$get = function() {
        return {
            getList: function() {
                return list
            },
            add: function(employee) {
                list.push(employee);
            }
        };
    }  

})

And here's the working plunkr

Upvotes: 2

Related Questions