Learn Angular JS In 10 minutes

Config/Factory/Service/Controller Example

This example provides the usage of following components in angular -js., in a simple example.

The following example provides the details of all the below components, so we can use it for an enterprise application very easily.

Config
Factory
Service
Constants
Controller

Config – Config is nothing but the Configuration block which is called during angular-js startup.

Set a default value in configuration.
Initialise a factory method in configuration.
Inject a directive during angular js startup in the application.

Angular JS(Config/factory/Service/controller) Example:

mainApp.config(function($provider) {
     $provider.value("initialValue", 123);
     $provider.factory("getInUpperCase", 
               function(wordStr) { 
                    return wordStr.toUpperCase(); 
               });
  }

mainApp.config(function($provider) {

$provider.value("initialValue", 123);

$provider.factory("getInUpperCase",

function(wordStr) {

return wordStr.toUpperCase();

});

}

<title>AngularJS - All in One- Simple Example</title> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script> 

<script>
  var mainApp = angular.module("sampleNgApp", []);
  // Just a constant value for the webpages…      
  mainApp.constant("SITE_HEADER", "tutorialflow.com"); 
  // Initialize any value for the angular JS application… 

  mainApp.value("initialWord", "Hello Word"); 

  mainApp.config(function($provide) {   
        $provide.provider('WordCountProvider', function() { 
            this.$get = function() { 
                var methodImpl = {}; 
                console.log("Called Provider Implmentation -- WordCountProvider (Called Angular-JS Initialization)"); 

                methodImpl.wordcount = function(wordStr) { 
                     wordStr = wordStr.replace(/[ ]{2,}/gi," "); 
                     var len = wordStr.split(' ').length; 
                     return len; 
                } 
              return methodImpl; 
             }; 
           }); 
          }); 
// Just a factory method called once the Config/Provider variables and methods are initialized… 
     
 mainApp.factory('LetterCountFactory', function() { 
          console.log("Called Factory Implmentation -- LetterCountFactory"); 
           var methodImpl = {};
           methodImpl.letterCount = function(wordStr) { 
                 wordStr = wordStr.replace(" ",""); 
                 var len = wordStr.length; 
                 return len; 
           } return methodImpl; 
       }); 

// Service will be called after all the Factory and Config implementations are initialized and loaded….. 

       mainApp.service('AbstractService', function(WordCountProvider, LetterCountFactory) { 
           console.log("Called Service Implmentation -- AbstractService"); 
           this.countword = function(str) { 
              return WordCountProvider.wordcount(str); 
           }; 
           this.countLetter = function(str) { 
              return LetterCountFactory.letterCount(str); 
           }; 
       }); 
  
// Controller acts a bridge between data present in $scope of angular JS, 
// and the HTML ng-app->ng-controller scope data 
// All the scope data and functions can be called/used within HTML (ng-controller) as shown below 

       mainApp.controller('MyController', function($scope, SITE_HEADER, AbstractService, initialWord) { 
            console.log("Called Controller -- MyController"+SITE_HEADER); 
            // Called Initially when during page load…
            ng-app = "sampleNgApp" 
            $scope.siteHeader = SITE_HEADER; 
            $scope.inputwords = initialWord;   
            $scope.wordcountresult = AbstractService.countword($scope.inputwords); 
           $scope.lettercountresult = AbstractService.countLetter($scope.inputwords); 

           // This scope function can be called only when called with HTML ng-controller tag, as present in the HTML Code…      
           $scope.executeAllMethods =function() { 
                console.log("Called Only when there is a ng-change -- executeAllMethods"); 
                $scope.wordcountresult = AbstractService.countword($scope.inputwords); 
                $scope.lettercountresult = AbstractService.countLetter($scope.inputwords); 
            } 
       }); 
</script> 
<div ng-app="sampleNgApp" ng-controller="MyController">
 
<h2>AngularJS Sample Application - {{siteHeader}}</h2> 

<p>Enter anything to count: 
      <input type="text" ng-model="inputwords" ng-change="executeAllMethods()">
</p> <br>
 
<h3>Word Count: {{wordcountresult}}</h3> 

<h3>Letter Count: {{lettercountresult}}</h3>

<title>AngularJS - All in One- Simple Example</title>

var mainApp = angular.module("sampleNgApp", []);

// Just a constant value for the webpages…

mainApp.constant("SITE_HEADER", "tutorialflow.com");

// Initialize any value for the angular JS application…

mainApp.value("initialWord", "Hello Word");

mainApp.config(function($provide) {

$provide.provider('WordCountProvider', function() {

this.$get = function() {

var methodImpl = {};

console.log("Called Provider Implmentation -- WordCountProvider (Called Angular-JS Initialization)");

methodImpl.wordcount = function(wordStr) {

wordStr = wordStr.replace(/[ ]{2,}/gi," ");

var len = wordStr.split(' ').length;

return len;

}

return methodImpl;

};

});

// Just a factory method called once the Config/Provider variables and methods are initialized…

mainApp.factory('LetterCountFactory', function() {

console.log("Called Factory Implmentation -- LetterCountFactory");

var methodImpl = {};

methodImpl.letterCount = function(wordStr) {

wordStr = wordStr.replace(" ","");

var len = wordStr.length;

return len;

} return methodImpl;

});

// Service will be called after all the Factory and Config implementations are initialized and loaded…..

mainApp.service('AbstractService', function(WordCountProvider, LetterCountFactory) {

console.log("Called Service Implmentation -- AbstractService");

this.countword = function(str) {

return WordCountProvider.wordcount(str);

};

this.countLetter = function(str) {

return LetterCountFactory.letterCount(str);

};

});

// Controller acts a bridge between data present in $scope of angular JS,

// and the HTML ng-app->ng-controller scope data

// All the scope data and functions can be called/used within HTML (ng-controller) as shown below

mainApp.controller('MyController', function($scope, SITE_HEADER, AbstractService, initialWord) {

console.log("Called Controller -- MyController"+SITE_HEADER);

// Called Initially when during page load…

ng-app = "sampleNgApp"

$scope.siteHeader = SITE_HEADER;

$scope.inputwords = initialWord;

$scope.wordcountresult = AbstractService.countword($scope.inputwords);

$scope.lettercountresult = AbstractService.countLetter($scope.inputwords);

// This scope function can be called only when called with HTML ng-controller tag, as present in the HTML Code…

$scope.executeAllMethods =function() {

console.log("Called Only when there is a ng-change -- executeAllMethods");

$scope.wordcountresult = AbstractService.countword($scope.inputwords);

$scope.lettercountresult = AbstractService.countLetter($scope.inputwords);

}

});

</script>

<h2>AngularJS Sample Application - {{siteHeader}}</h2>

<p>Enter anything to count:

</p> <br>

<h3>Word Count: {{wordcountresult}}</h3>

<h3>Letter Count: {{lettercountresult}}</h3>

HTML Page Output:

AngularJS – All in One- Simple Example

AngularJS Sample Application – {{siteHeader}}

Enter anything to count:

Word Count: {{wordcountresult}}

Letter Count: {{lettercountresult}}

Once the HTML/Angular-JS is executed, the console.log(“”) statements will be printed in the browser developer tools->console tab

(Press F12 for most browsers)

It will display the Order of methods initialised and called for the code above.

Console Output (F12 – Inspect – Browser Console)

Called Provider Implmentation — WordCountProvider (Called Angular-JS Initialization)
Called Factory Implmentation — LetterCountFactory
Called Service Implmentation — AbstractService
Called Controller — MyControllertutorialflow.com

Called Provider Implmentation — WordCountProvider (Called Angular-JS Initialization)

Called Factory Implmentation — LetterCountFactory

Called Service Implmentation — AbstractService

Called Controller — MyControllertutorialflow.com