Angular 01 - Provider Service examples

by Sky Sigal

HTML

<div data-ng-app="App1">
    <div data-ng-controller="SomeParentCtrl">
        <div data-ng-controller="SomeCtrl">
            <b>Scalar Binding:</b><br/>
            <div>Number:<span data-ng-bind="someNumber"/></div>
            <div>Text:<span data-ng-bind="someText"/></div>
            <!-- to object properties -->
            <div>First:<input data-ng-model="someObject.first"/></div>
            <!-- to behaviour -->
            <div>Last:<span data-ng-bind="someObject.full()"/></div>
       </div>
    </div>
</div>

JavaScript

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

//ABOUT:
//We've already covered Constants, Values, Factories, Services.
//Providers are just like Services, but whereas Services are singletons
//providers return new classes:

//note how '$scope' is mapped to $sc: and 'foo' is DI'ed value:
app1.controller('SomeParentCtrl', ['$scope','barService', function ($sc, barService) {
    $sc.someText = barService.func1();
}]);

app1.controller('SomeCtrl', ['$scope', 'barService', function ($scope, barService) {    
    $scope.someNumber = barService.func2();
    $scope.someObject = {
        first : 'John',
        last : 'Smith',
        full : function(){return this.first + ' ' + this.last;}
    };    
}]);

app1.provider("barService", function (){
    var provider = {};
    provider.$get = function(){
        //Note nesting: provider is created once, but service is created new each time $get is invoked to di:
      var service = {};
      service.func1 = function() {return "blah";}
      service.func2 = function() {return "blah....";}
      return service;
    }
    return provider;
});