AngularJS Services

Introduction

* What is a service?

* Dependencies and function declaration

* How to use your services inside a controller or a directive

* What is a factory?

* Differences between services and factories   

What is a service?

The service (in AngularJS) is like the model of the MVC Framework, so that means it can contain data which you can get or set.

How to build an AngularJS service

(function () {
    angular
        .module('yourApp')
        .service('yourService', function (
            //Your dependencies
        ) {
            //The service code
        });
})();

http://jsfiddle.net/Dsuijker/4Ld2rnwz/1/

Dependencies and function declaration

Dependencies are mostly other factories, services or providers(libraries) in your application that you want to use inside of this service.

How to use a dependencie in your service and how to declare functions

(function () {
    angular
        .module('yourApp')
        .service('yourService', function (
            //Your dependencies
        ) {
            //Below we declare the chat function
            this.chat = function (){
                console.log("Hello World!");
            }
        })
        .service('yourSecondService', function (
            yourService    
        ) {
            this.chat = function () {
                //Calling a function from a dependencie
                yourService.chat();
            };
        });
})();

http://jsfiddle.net/Dsuijker/qg6Lmh5u/

How to use your services inside a controller or a directive

Services are most of the time used inside controllers and directives to set data on the scope.

Controller

(function () {
    angular
        .module('yourApp')
        .service('yourService', function (
            //Your dependencies
        ) {
            //Below we declare a function
            this.getMessage = function (){
                return "Hello world!";
            }
        })
        .controller('yourController', function (
            $scope,
            yourService
        ) {
            $scope.message = yourService.getMessage();
        });
})();

Directive

(function () {
    angular
        .module('yourApp')
        .service('yourService', function (
            //Your dependencies
        ) {
            //Below we declare a function
            this.getMessage = function (){
                return "Hello world!";
            }
        })
        .directive('yourDirective', function (
            yourService
        ) {
            return {
                template: '<p>{{ Message }}</p>',
                link: function (scope) {
                    scope.Message = yourService.getMessage();
                }
            };
        });
})();

http://jsfiddle.net/Dsuijker/5hnb24u2/

What is a factory?

A factory is almost the same as a service. Factories are functions that return objects like an API.

How to build an AngularJS factory

angular
    .module('yourApp')
    .factory('yourService', function(
        //dependencies
    ) {
    //returning the object
        return {
            someFunction: function() {}
        };
    });

http://jsfiddle.net/Dsuijker/den37uaz/

Differences between services and factories   

The main different between services and factories is the flexibility and the purpose. Factories are functions that return a object like an API, while services are constructor functions of the object.

Resources

Great thanks to Ian for making this blog post

http://codepamoja.org/blog/2016/02/12/angularjs-factories-and-services/