Anu Rajan Anu Rajan - 12 days ago 6
Javascript Question

Angular ,display array using service

i am learning angular by doing small exercises. i have successfully displayed objects in controller and trying to learn to use service and factory. i am unsuccessful in displaying array "names" on a table using service. please look at my code to see what i am doing wrong and also how would use factory to display the same array. here is my code



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

// myApp.controller("ctrl",function($scope){

// $scope.person =
// [

// {name:"john",age:30},
// {name:"sam",age:20},
// {name:"jay",age:25}

// ];

// $scope.title = "Learning Angular"
// })
// _____________________________________________________________________________________
// _____________________________________________________________________________________
// _____________________________________________________________________________________

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

myApp.filter("agefilter", function(){

var x= function(age){
if(age==23){

return "Young";
}

if(age==25){

return "Mature";
}
if(age==26){

return "Oldest";
}
}
return x;
});

myApp.controller("ctrl", function($scope,servicee){

$scope.person=[

{name:"jay",age:25,salary:85000},
{name:"anu",age:23,salary:65000},
{name:"jose",age:26,salary:75000},


];

$scope.callnames = servicee.names;


});
myApp.service("servicee",function(){

var names= ["jay","anu","sharon","jose","mary"];
this.names = function(){
return names;
}


});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<title></title>
</head>
<body ng-app="app" ng-controller="ctrl" >


<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>


</tr>

<tr ng-repeat="i in person">
<td>{{i.name |uppercase }}</td>
<td>{{i.age|agefilter}}</td>
<td>{{i.salary|currency}}</td>


</tr>



</table> <br><br><br>


<table border="1">
<tr>
<th>Name</th>



</tr>

<tr ng-repeat="s in callnames">
<td>{{s.names}}</td>



</tr>



</table>


<script src="../js/angu.js"></script>
</body>
</html>




Answer

So in order to fix you current implementation you would just need to do 2 things, first update the servicee.names in your controller to servicee.names() and then in your template update your s.names to just s

In order to do the same functionality with a factory you would do it this way:

myApp.factory("nameFactory",function(){
  var names= ["jay","anu","sharon","jose","mary"];

  return {
      getNames: function(){
        return names;
      }
  }
});
myApp.controller("ctrl", function($scope,nameFactory){
  $scope.person=[
     {name:"jay",age:25,salary:85000},
     {name:"anu",age:23,salary:65000},
     {name:"jose",age:26,salary:75000},
  ];

  $scope.callnames = nameFactory.getNames(); 
});

The difference between a factory and a service is that a factory is just a function that is returned so we can return an object that exposes whatever values or functions that we want, while a service is initialized with the new operator which allows us to simply expose anything by attaching it to this

Comments