AngularJS Factory

Example of AngularJS Factory. The factory return a service that get the AngularJS Issue on github

by oktaviardi pratama

HTML

<script src="http://code.angularjs.org/1.0.7/angular.min.js"></script> <script src="http://code.angularjs.org/1.0.7/angular-resource.min.js"></script> 
<div ng-app="mainModule">
<div ng-controller="mainCtrl">
        
<h1 class="lead">AngularJS Factory</h1>
 <form class="form-search pull-left">
  <div class="input-append">
   <input type="text" ng-model="filterText" class="span2 search-query" placeholder="Filter current page">
    <button ng-click="filterText = null" class="btn">Clear Filter</button>
   </div>
  </form>
  <table class="table table-striped table-bordered">
   <thead>
    <tr>
     <th class="span1">Number</th>
     <th class="span1 sortable" ng-class="sortClass('comments')" ng-click="setSort('comments')">Comments</th>
     <th class="span1">State</th>
     <th>Title</th>
    </tr>
   </thead>
   <tbody>
    <tr ng-repeat="issue in myData | filter:filterText">
     <td class="text-center"><a ng-click="setCurrentIssue(issue.number)">{{issue.number}}</a>
     </td>
     <td class="text-center">{{issue.comments}}</td>
     <td class="text-center" ng-class="issue.state">{{issue.state}}</td>
     <td>{{issue.title}}</td>
    </tr>
   </tbody>
   </table>
 </div>       
</div>

CSS

</style> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
</style>

JavaScript

angular.module('mainModule', ['ngResource'])

.factory('angularjsIssue', function ($resource)
  {
    // Resource object 
    var resource = $resource('https://api.github.com/repos/angular/angular.js/issues');
      
      /* Custom function to retrieve a issue list*/
    resource.getIssueList = function () {
        return this.query()};
      
    /* Custom function to retrieve a issue by ID*/
    resource.getIssue = function (number) {
        return this.get({
          number: number
        }
        )};
      
    return resource;
  })

.controller('mainCtrl', function($scope, angularjsIssue){ 
    $scope.myData= [];
    
$scope.getIssuesList = function () {
    $scope.myData = angularjsIssue.getIssueList();
    };
    
    $scope.setCurrentIssue = function (number) {
        angularjsIssue.getIssue({
            number: number
        }, function (data) {
            $scope.myData = data;
        });
    };
    
    $scope.getIssuesList();
});