<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>Service vs. Factory vs. Provider</h2>
<hr />
<script>
var app = angular.module("app", []);
// create utility function with service
app.service("myService", function () {
// here we expose the function on this object
this.Hello = function () {
return "Hello";
};
this.Sum = function (a, b) {
return a + b;
};
});
// create utility function with factory
app.factory("myFactory", function () {
// here we return the object
var factoryObject = {};
factoryObject.Hello = function () {
return "Hello";
}
factoryObject.Sum = function (a, b) {
return a + b;
}
return factoryObject;
});
// create utlity function with provider
app.provider("myProvider", function () {
this.$get = function () {
return {
Hello: function () {
return "Hello";
},
Sum: function (a, b) {
return a + b;
}
};
};
});
// , myFactory, myProvider
app.controller("myController", function ($scope, myService, myFactory, myProvider) {
// service function call
$scope.ServiceOutput = "Look for service output here.";
$scope.HelloService = function () {
$scope.ServiceOutput = myService.Hello();
};
$scope.SumService = function () {
$scope.ServiceOutput = "The sum is : " + myService.Sum(2, 5);
};
// factory function call
$scope.FactoryOutput = "Look for factory output here.";
$scope.HelloFactory = function () {
$scope.FactoryOutput = myFactory.Hello();
};
$scope.SumFactory = function () {
$scope.FactoryOutput = "The sum is : " + myFactory.Sum(22, 5);
};
// provider function call
$scope.ProviderOutput = "Look for factory output here.";
$scope.HelloProvider = function () {
$scope.ProviderOutput = myProvider.Hello();
};
$scope.SumProvider = function () {
$scope.ProviderOutput = "The sum is : " + myProvider.Sum(22, 52);
};
});
</script>
<div ng-app="app" ng-controller="myController">
<h3>Using Service</h3>
<button ng-click="HelloService()">Hello Service</button>
<button ng-click="SumService()">Sum Service</button>
<div ng-bind="ServiceOutput"></div>
<h3>Using Factory</h3>
<button ng-click="HelloFactory()">Hello Factory</button>
<button ng-click="SumFactory()">Sum Factory</button>
<div ng-bind="FactoryOutput"></div>
<h3>Using Provider</h3>
<button ng-click="HelloProvider()">Hello Service</button>
<button ng-click="SumProvider()">Sum Service</button>
<div ng-bind="ProviderOutput"></div>
</div>
</body>
</html>
<html>
<head>
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>Service vs. Factory vs. Provider</h2>
<hr />
<script>
var app = angular.module("app", []);
// create utility function with service
app.service("myService", function () {
// here we expose the function on this object
this.Hello = function () {
return "Hello";
};
this.Sum = function (a, b) {
return a + b;
};
});
// create utility function with factory
app.factory("myFactory", function () {
// here we return the object
var factoryObject = {};
factoryObject.Hello = function () {
return "Hello";
}
factoryObject.Sum = function (a, b) {
return a + b;
}
return factoryObject;
});
// create utlity function with provider
app.provider("myProvider", function () {
this.$get = function () {
return {
Hello: function () {
return "Hello";
},
Sum: function (a, b) {
return a + b;
}
};
};
});
// , myFactory, myProvider
app.controller("myController", function ($scope, myService, myFactory, myProvider) {
// service function call
$scope.ServiceOutput = "Look for service output here.";
$scope.HelloService = function () {
$scope.ServiceOutput = myService.Hello();
};
$scope.SumService = function () {
$scope.ServiceOutput = "The sum is : " + myService.Sum(2, 5);
};
// factory function call
$scope.FactoryOutput = "Look for factory output here.";
$scope.HelloFactory = function () {
$scope.FactoryOutput = myFactory.Hello();
};
$scope.SumFactory = function () {
$scope.FactoryOutput = "The sum is : " + myFactory.Sum(22, 5);
};
// provider function call
$scope.ProviderOutput = "Look for factory output here.";
$scope.HelloProvider = function () {
$scope.ProviderOutput = myProvider.Hello();
};
$scope.SumProvider = function () {
$scope.ProviderOutput = "The sum is : " + myProvider.Sum(22, 52);
};
});
</script>
<div ng-app="app" ng-controller="myController">
<h3>Using Service</h3>
<button ng-click="HelloService()">Hello Service</button>
<button ng-click="SumService()">Sum Service</button>
<div ng-bind="ServiceOutput"></div>
<h3>Using Factory</h3>
<button ng-click="HelloFactory()">Hello Factory</button>
<button ng-click="SumFactory()">Sum Factory</button>
<div ng-bind="FactoryOutput"></div>
<h3>Using Provider</h3>
<button ng-click="HelloProvider()">Hello Service</button>
<button ng-click="SumProvider()">Sum Service</button>
<div ng-bind="ProviderOutput"></div>
</div>
</body>
</html>
No comments:
Post a Comment