Menu
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.
955
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
133
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
