<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container" style="padding-top:20px;">
<div ng-app="myApp" ng-controller="myController">
<p>From Service: {{serviceName}}</p>
<p>From Factory: {{factoryName}}</p>
<p>From Provider: {{providerName}}</p>
</div>
</div>
</body>
</html>
// Also see $provide usage with angular.config - http://plnkr.co/1hu8be
//defining module
var app = angular.module('myApp', []);
//defining service
app.service('myService', function () {
this.name = '';
this.setName = function (newName) {
this.name = newName;
return this.name;
};
});
//defining factory
app.factory('myFactory', function () {
var serviceObj = {};
serviceObj.name = '';
serviceObj.setName = function (newName) {
serviceObj.name = newName;
};
return serviceObj;
});
//defining provider
app.provider('configurable', function () {
var privateName = '';
this.setName = function (newName) {
privateName = newName;
};
this.$get = function () {
return {
name: privateName
};
};
});
//configuring provider
app.config(function (configurableProvider) {
configurableProvider.setName("Angular Provider Value");
});
//defining controller
app.controller('myController', function ($scope, myService, myFactory, configurable) {
$scope.serviceName = myService.setName("Angular Service Value");
myFactory.setName("Angular Factory Value");
$scope.factoryName = myFactory.name;
$scope.providerName = configurable.name;
});
/* Styles go here */