AngularJS Provider

AngularJS Provider Example

by dshilkret

HTML

<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 Provider</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

var myModule = angular.module('mainModule', ['ngResource']);

// The provider
myModule.provider('angularjsIssue', function () {
    
    this.connection = '';
    
    this.$get = function($resource) {
    this.resource = $resource(this.connection);    
        // issue List
        this.resource.getIssueList = function () {
                return this.query()
            };
        
        // issue by ID
        this.resource.getIssue = function (number) {
                return this.get({ number: number})
            };
        return this.resource;        
    };
                 
    this.setConnection = function(connection){
                 this.connection = connection;
     };
    
  });

// configuration
myModule.config(function(angularjsIssueProvider){
 angularjsIssueProvider.setConnection('https://api.github.com/repos/angular/angular.js/issues');
});

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