The difference between providers and the viewProviders property

The viewProviders property allows us to make providers available to the component's view only, whereas the providers property makes a provider available to its content children and view children.

The providers property creates a service instance only once and provides the same to whichever component asks for it. We have already seen how viewProviders works. Let's look at an example of how providers works. Place this code above the App component's code:

var counter = 1;

var Service5 = ng.core.Class({
  constructor: function(){}
})

var ServiceTest2 = ng.core.Component({
  selector: "st2",
  template: ""
}).Class({
  constructor: [Service5, function(s5){
    console.log(s5);
  }]
})

var ServiceTest3 = ng.core.Component({
  selector: "st3",
  providers: [ng.core.provide(Service5, {useFactory: function(){
    counter++;
    return counter;
  }})],
  directives: [ServiceTest2],
  template: "<st2></st2>"
}).Class({
  constructor...