Angular doesn't work
I am learning services in Angular. T and factory and could get them to work, but I can't get the provider to work. I checked the solutions of multiple 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:
<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 values to config before I expose it to HTML. But I am not able to do it. Nothing is displayed in the console. Please let me know how to set up the provider correctly and use it in config.
source to share
The problem is with your code provider
. Your provider needs to return an object containing the property $get
. Just adding $get
in this
won't work. inside $get
you need to return the functions of the creatures used by your controller (namely add()
and getList()
)
You need to store the function add
in two places:
First, right inside the provider return{ }
(like a sibling before $get
) , because you use it in a function config
.
app.config(['EmployeeServiceProvider', function(EmployeeServiceProvider) {
var user = {
name: 'Rob',
skill: 'Hacker'
};
EmployeeServiceProvider.add(user); //<-- Here
}]);
Second, you need to keep the add function in $get
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 ISP:
app.provider('EmployeeService', function EmployeeServiceProvider() {
var list = [{
name: '',
skill: ''
}];
return{
add: function(employee) { //This is for Config visibility
list.push(employee);
},
$get:function(){
return{
add: function(employee) { // This is for controller visibility
list.push(employee);
},
getList: function() {
return list
}
}
}
}
})
You can also bind the methods ( $get
and add
) to this
instead of returning a single 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 this is where plunkr works
source to share