Saturday 9 January 2016

Display the collection and total no of records along with the delete operation in angular js

In this post we are going to see How to display the collection in Html and the Total number of records using angular js, additionally we will have the delete operation so whenever a delete happens the records should be updated the count in the UI.

HTML :
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


<div ng-controller="HomeController">
</head>
<body ng-app="app">

<script src="angular.js"  type="application/javascript"></script>
<script src="app.js" type="application/javascript"></script>


    <ul style="list-style: none;">
        <li style="padding: 10px;background-color: lightgray;margin: 5px;width: 300px;
                      text-align: center"
            ng-repeat="item in DataItems">
            <span>{{item}}</span>
            <span style="position: relative;right: -140px;">
                <input type="button" ng-click="remove(item)" value="X"> </span>
        </li>
        <div>Total Records : {{DataItems.length}}</div>
    </ul>
</div>


</body>
</html>

App.Js
var app = angular.module('app',[]);

app.controller('HomeController', ['$scope',function ($scope) {


        $scope.DataItems = [1,2,3,4,5,6,7];

        $scope.remove = function (id) {
            $scope.DataItems.splice($scope.DataItems.indexOf(id),1);
        }

    }]);


you can see the below output , that the initial collection is display as List along with the total records count, when the user delete the data, then automatically the count is updated correctly

Output







From this post you can learn how to do the iteration in collection and display in the UI along with delete operation

Thursday 7 January 2016

$provide service in angular js and there usages along with methods Factory, Service, Provider, Decorator, Value, Constant explanation

In this post we are going to see the $provide service in angular Js, actually what is the $provide service where it is used in angular js, How we can use it in our application

$provide is a service which is used register the components with the $injector

Below statement is a reference from the Angular Website: 
An angular Service is a singleton object created by a ServiceFactory,
ServiceFactory are functions which are created by a ServiceProvider
ServiceProvider are constructor functions must have $get property which holds the ServiceFactory.

so from above statement we came to know that service is created by combination of ServiceFactory, which is holds inside the ServiceProvider $get property.

factory(fn)  - register a factory function, wrapped in a serviceprovider, $get  property contains a fn
service(class) - register a constructor function wrapped in a serviceprovider, $get property instantiate the new object
provider(provider) - register a service provider with $injector
value(obj)   -  register a name/value, access by service, not providers
constant(obj)   - register a name/value, access by service ,providers

Methods Present in the $provide
**************************************

Provider:
provider(name,provider)
Service provider name starts with the name of the service + 'Provider', like $routeProvider, $logProvider

name =  name of the provider
provider = it may be function or object  , 

 if it is a function , then it must be a constructor function $injector.instantiate() will be invoked when an instance needs to be created

if it is a object then it must have a $get method, $get will be invoked using $injector.invoke() when an  instance needs to be created


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


  app.provider('Database', function () {
    var prop = {
        ConnectionString: ""
    }

    return {
        setConnectionString: function (data) {
            prop.ConnectionString = data;
        },
        $get: function () {
            return ({
                ConnectionString: function () {
                    return (prop.ConnectionString);
                }
            });
        }
    }

  });



  app.config(function (DatabaseProvider) {
    DatabaseProvider.setConnectionString("Server=local;Username=Rajesh;pwd=******");
  } );


  app.controller('main', function ($scope, Database) {

    $scope.Title = "Sample Angular Application";   
    $scope.providerString = Database.ConnectionString();

  });





 Decorator:
 decorator(name,decorator)
This is used to override or modify the service implementation , this is called by $injector.invoke() , it must have one parameter $delegate which the actual implementation of the function, if we want we can use it  by executing it.

   var app = angular.module('app',[]);
    app.config(function ($provide) {
       $provide.decorator("$exceptionHandler",['$delegate','$log',function ($delegate,$log) {
           return function (exception, cause) {
               $delegate(exception,cause);
               $log.info(exception.message + " (because of  "+ cause + "  )");
           }
       }]);
    });





Factory:
factory(name,$getFn) 
 Factory is a alternate way of creating objects once we create a Factory, we can use it in the controllers or in the another Factory through dependency injection.

  var app = angular.module('app', []);
  app.factory('DBFactory', function () {

    return {
        ConnectionString: function () {
            return "DataSource=233.44.1.3;Username=rajesh;Password=Pass12#";
        },
        GetData: function () {
            return [{ name: 'Rajesh', Id: 1 }, { name: 'Ramu', Id: 2 }];
        }
    }

  });

  app.controller('main', function ($scope, DBFactory) {

    $scope.Title = "Sample Angular Application";  
    $scope.Fstring = DBFactory.ConnectionString();

   });




Service:
service(name,constructor)
register a service with the $injector, which can be invoked by new to create a instance.Service is a singleton object in Angular.

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

  app.service('DBService', function () {

    this.ConnectionString = function () {
        return "DataSource=123.23.2.11;Username=rajesh;Password=pass12*";
    }

    this.Login = function (username, password) {
        if (username == "Rajesh") {
            return true;
        }
        else {
            return false;
        }
    }

  });

app.controller('main', function ($scope, DBService) { $scope.Title = "Sample Angular Application"; $scope.Cstring = DBService.ConnectionString(); });




Value:
value(name,value)
Register in to $injector, such as string, number, array, object or function, it cant be injected as module, can be override by 
decorator.

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

    app.value('Movie','Batman');




Constant:
constant(name,value)
Register in to $injector, such as string, number, array, object or function, it can be injected as module, but can be override by decorator

   var app = angular.module('app',[]);
    app.constant('Application',{
        Version:'1.0.0',
        Name:'Angular'
    }); 




Below table will list out the options that which options are possible and not possible

ProviderSingletonInstanceConfig
ProviderYesYesYes
DecoratorYesNoNo
ServiceYesNoNo
FactoryYesYesNo
ConstantYesNoNo
ValueYesNoNo





From this post you can see the methods present in the $provide  and as well as the functionalities of $provide service


Override the $exceptionHandler to handle the unhandled error in application with custom logic globally in angular js

In this post we are going to see how to handle the errors globally with custom logic which are unhandled in application, Generally Angular js application handle the unhandled errors and result the errors in Browser console. some times we need to handle the errors globally with some additional functionality. Now we can see how to do that in Angular JS.

They are multiple ways , but we can see the Two ways here. To achieve this we must Override the $exceptionHandler service which handles the Error messages globally.

Way 1:
We can override the service code using the $provide.decorator method, by passing the service name as first parameter, second as function which takes the $delegate as input parameter as mandatory. it must return a function which have two input  parameters exception, cause





output
First Error is because of $delegate execution
Second is because of $log 





















Way 2:
We can Override the service code by create a factory method again in the same name by giving new functionalities like below. It must return a function which must take a two input parameters exception, cause. We have to inject the module to the main module






Output







you may have question in your mind that , why we have to throw exception here instead of calling $delegate, because if we try to inject the $delegate in this factory , it will throw error, i.e it can't be injected or unknown provider, below is the error message sample












Full Source code including both the way of code



























From this post you can learn how to handle the unhandled Error globally and write a custom logic in the application for the Errors