Angular Service and Factory Tutorial

Angular Service and Factory Tutorial

Today, We want to share with you Angular Service and Factory Tutorial.
In this post we will show you Angular Service and Factory Tutorial, hear for Angular Service and Factory Tutorial we will give you demo and example for implement.
In this post, we will learn about Angular Service and Factory Tutorial with an example.

AngularJS Service and Factory

AngularJS provides many more useful inbuilt services for example Like, $https:, $route, $window and $location etc.

All angularjs internal services starts with $ sign.)

AngularJS most supports the concepts of “Separation of Concerns” slogan using services architecture.

READ :  isset vs empty vs is_null in PHP Example

There are two most useful ways to create a service.

  • factory
  • service

AngularJS internal services

module.controller('myfirstController', function($http){
	//...something code

module.controller('mysecondController', function($window){
	//......something code

AngularJS custom services : example

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

  1. The Top 10+ Best Webinar Software Platforms For 2020-2021
  2. Build Your Future Godaddy Careers And Jobs
  3. Introduction To Web Hosting Services

var module = angular.module('myapp', []);
module.service('userService', function(){
	this.users = ['Ravi', 'Jignesh', 'Harshad'];

AngularJS factory Method : Example

module.factory('userService', function(){
	var fac = {};
	fac.users = ['Ravi', 'Jignesh', 'Harshad']; 
	return fac;

AngularJS Service vs Factory : Example

module.service( 'serviceName', function );

module.factory( 'factoryName', function );

what is factory?

AngularJS factory is a simple Javascript function(js function) which allows you to add some (logic data and return)logic before creating the object(recreated object). and It returns the created new object.

AngularJS Factory Syntax with Example

Factory Syntax

    var module = angular.module('infinityknowApp', []);    
    module.factory('yourserviceName', function(){    
        return serviceObject;   //return something...

Factory Example

 <!-- -->      
<title>My first AngularJS Factory and Service code</title>      
<a href=""></a>      
//Simple Defining Factory      
var infinityknowApp = angular.module('app', []);      
infinityknowApp.factory('calculatorService', function(){        
    var calculator = {};       
    calculator.multiply = function(a, b) { return a * b };      
    calculator.add = function(a, b) { return a + b };     
    calculator.substract = function(a, b) { return a - b };     
    calculator.divide = function(a, b) { return a / b };     
    return calculator;        
infinityknowApp.controller('CalculatorController', function($scope, calculatorService) {      
    $scope.do_simple_mul = function() {     
        $scope.answer = calculatorService.multiply($scope.number,$scope.number);      
    $scope.do_simple_add = function() {     
        $scope.answer = calculatorService.add($scope.number,$scope.number);      
    $scope.do_simple_sub = function() {     
        $scope.answer = calculatorService.substract($scope.number,$scope.number);      
    $scope.do_simple_div = function() {     
        $scope.answer = calculatorService.divide($scope.number,$scope.number);      
<fieldset style="background-color:#DDE4E9">            
    <legend>AngulerJS Factory Example</legend>         
        Enter your Valid Number:      
      Enter your Valid Number:    
        <button>Addition(+)</button> </br>   
      Enter your Valid Number:    
        <button>Substraction(-)</button> </br>   
      Enter your Valid Number:    
      <p>Your Calculator Answer <mark>: {{answer}}</mark></p>     
	<hr />
	<h1>Solution of AngularJs All Problems For</h1>
	<a href="">My First Web-Application in angularjs, So I am very happy and 1000+  more then people are used of </a>