AngularJS Using Services

.Title

AngularJS Using Services

0.service_vs_factory_vs_provider.js

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

//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
    this.sayHello = function() {
        return "Hello, World!"
    };
});

//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
    return {
        sayHello: function() {
            return "Hello, World!"
        }
    };
});

//provider style, full blown, configurable version     
myApp.provider('helloWorld', function() {
    // In the provider function, you cannot inject any
    // service or factory. This can only be done at the
    // "$get" method.

    this.name = 'Default';

    this.$get = function() {
        var name = this.name;
        return {
            sayHello: function() {
                return "Hello, " + name + "!"
            }
        }
    };

    this.setName = function(name) {
        this.name = name;
    };
});

//hey, we can configure a provider!            
myApp.config(function(helloWorldProvider){
    helloWorldProvider.setName('World');
});


function MyCtrl($scope, helloWorld, helloWorldFromFactory, helloWorldFromService) {

    $scope.hellos = [
        helloWorld.sayHello(),
        helloWorldFromFactory.sayHello(),
        helloWorldFromService.sayHello()];
}​

1.Servcie.$resource.1.js

// http://docs.angularjs.org/api/ngResource.$resource

var RestMethod = {
  index: {
    method: 'GET',
    isArray: true
  },
  create: {
    method: 'POST'
  },
  destroy: {
    method: 'DELETE'
  },
  update: {
    method: 'PUT'
  },
  show: {
    method: 'GET'
  }
};

angular.module('mascrm.services', [])
  .value('version', '0.0.1')
  .factory('OrgService', ['$resource',
    function($resource) {
      return $resource('http://localhost:8888/server/organizations', {}, RestMethod);
    }
  ])
  .factory('SectionService', ['$resource',
    function($resource) {
      return $resource('http://localhost:8888/server/sections', {}, RestMethod);
    }
  ])
  .factory('ContactService', ['$resource',
    function($resource) {
      return $resource('http://localhost:8888/server/contacts', {}, RestMethod);
    }
  ]);

1.Servcie.$resource.2.js

// Define CreditCard class
var CreditCard = $resource('/user/:userId/card/:cardId',
 {userId:123, cardId:'@id'}, {
  charge: {method:'POST', params:{charge:true}}
 });
 
// We can retrieve a collection from the server
var cards = CreditCard.query(function() {
  // GET: /user/123/card
  // server returns: [ {id:456, number:'1234', name:'Smith'} ];
 
  var card = cards[0];
  // each item is an instance of CreditCard
  expect(card instanceof CreditCard).toEqual(true);
  card.name = "J. Smith";
  // non GET methods are mapped onto the instances
  card.$save();
  // POST: /user/123/card/456 {id:456, number:'1234', name:'J. Smith'}
  // server returns: {id:456, number:'1234', name: 'J. Smith'};
 
  // our custom method is mapped as well.
  card.$charge({amount:9.99});
  // POST: /user/123/card/456?amount=9.99&charge=true {id:456, number:'1234', name:'J. Smith'}
});
 
// we can create an instance as well
var newCard = new CreditCard({number:'0123'});
newCard.name = "Mike Smith";
newCard.$save();
// POST: /user/123/card {number:'0123', name:'Mike Smith'}
// server returns: {id:789, number:'0123', name: 'Mike Smith'};
expect(newCard.id).toEqual(789);

1.Services.Location.js

 angular.module('mascrm.controllers', [])
  .controller('Organizations', ['$scope', '$location',
 
     function($scope, $location) {
     
       $scope.view = function(org) {
         // Page Redirection
         $location.path("/organizations/show").search({
          "orgid": org._id
         }); // URL with query string
         $location.replace();  // Block the Backup button
         
         
       };
       
     }
   ]);