AngularJS Modularization

There are many custom module provide in angularjs to develop the user friendly code. Angulajs comes with a built-in dependency injection machanism. you can devided into application into multiple different types of components which Angularjs can inject into each other.

Modularizing your application makes it easier to reuse, configure and test the components in your application.

Angularjs contains following types of core objects and components.

1. Value
2. Service
3. Provider
4. Factory
5. Constant

1. Value
   A value is simple object in angularjs. it can be a number, string or javascript object. value are typically used as configuration which is injected into factories, services, or controllers.
   
   A value is global type of variable/object declaration in angularjs. That variable/object you can inject with any others angularjs module.
   
   A value has to belong to an Angularjs module. value are defined using value() function on the module. there are contains two parameter.
   
   
   • First parameter contains name of the value.
   • Second parameter is the value itself.
   
   Syntax : modulename.value('value_name','value_it_self');
   
   Example :
   var myApp = angular.module("myApp", []);
   myApp.value("numbervalue",'123456');
   myApp.value("stringvalue",'Kaushik Parmar');
   myApp.value("objectvalue",{key1: val1, key2: val2, key3: val3});
   
   Factories, Services and controllers can now reference these values by their name.
   
   Injecting a Value:
   Injectiong value into angularjs controller function is done simply by adding parameter with the same name as the value.
   
   Example :
   var myApp = angular.module("myApp", []);
   myApp.value("numberValue",'123456');
   myApp.controller("MyController", ['$scope', 'numberValue', function($scope, numberValue){
            console.log(numberValue);
   }]);
   
   
2. Service
   The service are singleton object or function that carry out specific tasks. it holds some business logic.Separation of concern is at the heart while designing an AngularJS application. Your controller must be responsible for binding model data to views using $scope. It does not contain logic to fetch the data or manipulating it.
   
   Thus service is a stateless object that contains some useful functions. These functions can be called from anywhere; Controllers, Directive, Filters etc. Thus we can divide our application in logical units. The business logic or logic to call HTTP url to fetch data from server can be put within a service object.
   
   Putting business and other logic within services has many advantages. First it fulfills the principle of separation of concern or segregation of duties. Each component is responsible for its own work making application more manageable. Second this way each component can be more testable. AngularJS provides first class support for unit testing. Thus we can quickly write tests for our services making them robust and less error prone.
   
   There are two types of services available in AngularJS
   
   
   1. Internal Service
      
      AngularJS provides internally many services that we can use in our application. $http is best example of internal services. There are other useful internal services such as $routre, $window, $location.
      
      These services can be used with in controller by just declaring them as dependencies.
      
      Example :
      
      app.controller('myController', ['$scope', '$http', '$location', function($scope, $http, $location){
          // your business logic put here.
      }])
      
      
   2. External Service (Custom Services)
      
      We can define our own services in angularjs app and use them wherever required. There are way to declare services in your angularjs application.
      
      Example.
      
      var app = angular.module('myapp', []);
      app.service('my_own_service', function(){
                 this.users = ['John', 'James', 'Jake'];
      });
      
      or
      
      app.service('my_own_service', function() {
          this.method1 = function() {
                   //..
          }
          this.method2 = function() {
                   //..
          }
      });
      
      
3. Provider
4. Factory
5. Constant