<html
ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9" data-require="angular.js@1.4.x"></script>
<script src="app.js"></script>
</head>
<body
ng-controller="MainCtrl">
<p>{{Hellos}}!</p>
</body>
</html>
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function ($scope, myService,
myFactory, Hello) {
$scope.Hellos = [myService.sayHello(), myFactory.sayHello(),
Hello.sayHello()]
})
.service('myService', function () {
this.sayHello = function () {
return 'Hello From Service'
}
})
.factory('myFactory', function () {
return {
sayHello: function () {
return 'Hello From
Factory'
}
}
})
//We can not inject anything to provider
.provider('Hello', function () {
this.name = 'Default';
this.$get = function () {
var name = this.name;
return {
sayHello: function () {
return name;
}
}
};
this.setName = function (name) {
this.name = name;
}
})
.config(function (HelloProvider) {
HelloProvider.setName('Hello from Provider !');
});
Output
