<!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>
var qpp = angular.module('myApp', []);
qpp.factory('myFactory', function() {
var displayFact;
var addMSG = function(msg) {
displayFact = ' Hi Anil, This is ' + msg;
}
return {
setMSG: function(msg) {
addMSG(msg);
},
getMSG: function() {
return displayFact;
}
};
});
qpp.service('myService', function() {
var displayServ;
var addMSG = function(msg) {
displayServ = 'Hi Anil, This is ' + msg;
}
this.setMSG = function(msg) {
addMSG(msg);
}
this.getMSG = function() {
return displayServ;
}
});
qpp.controller("MyCtrl", function($scope, myService, myFactory) {
//Inject to factory and controller both.
myFactory.setMSG("SetFactory");
myService.setMSG("SetService");
//Pfrepare a collection
$scope.myCollections = [
myFactory.getMSG(),
myService.getMSG()
];
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="coll in myCollections">
{{coll}}
</div>
</div>
</body>
</html>
// Code goes here
/* Styles go here */