I'm trying to define two angular modules myApp1
& myApp2
.
And from myApp1
I'm consuming a service of myApp2
.
Here's what I tried in JSfiddle
html
<div ng-app="myApp1" ng-controller="mycontroller">
{{saycheese}}
</div>
js
var myApp2 = angular.module('myApp2', []);
var myApp1 = angular.module('myApp1', []);
myApp1.service('myservice', function() {
this.sayHello = function(test) {
return "from service" + test;
};
this.sayHello1 = function() {
return "from service - sayHello1"
};
});
myApp2.service('myservice2', function() {
this.sayCheese = function(test) {
return "from service of myApp2" + test;
};
});
myApp1.factory('myfactory', function() {
return {
sayHello: function() {
return "from factory!"
}
};
});
//defining a controller over here
myApp1.controller("mycontroller", ["$scope", "myfactory", "myservice", "myservice2", function($scope, myfactory, myservice, myservice2) {
$scope.saycheese = [
myfactory.sayHello(),
myservice.sayHello("abcd"),
myservice.sayHello1(),
myservice2.sayCheese("abcdefghij!")
];
}]);
But when I check CONSOLE LOGS, angular complains about no module: myApp
.
The JSfiddle is here http://jsfiddle.net/PxdSP/3050/
Can someone help me with this ?