Angular complains about a missing module which haven't been declared at allI

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 ?

Upvotes: 0

Views: 105

Answers (1)

psycho
psycho

Reputation: 102

  1. Its the problem with the naming convention, you can't use numbers in a module name. I renamed them as myApp1 -> myApp & myApp2 -> myApptwo.
  2. Second issue is you haven't injected myApptwo in myApp, without which you won't be able to access services of myApptwo

var myApptwo = angular.module('myApptwo', []);
var myApp = angular.module('myApp', ['myApptwo']);

myApp.service('myservice', function() {
    this.sayHello = function(test) {
        return "from service" + test;
    };
    this.sayHello1 = function() {
    		return "from service - sayHello1"
    };
});

myApptwo.service('myservice2', function() {
		this.sayCheese = function(test) {
    		 return "from service of myApp2" + test;
    };
});

myApp.factory('myfactory', function() {
    return {
        sayHello: function() {
            return "from factory!"
        }
        
        
    };
});
    
//defining a controller over here      
myApp.controller("mycontroller", ["$scope", "myfactory", "myservice", "myservice2", function($scope, myfactory, myservice, myservice2) {

    $scope.saycheese = [
        myfactory.sayHello(),
        myservice.sayHello("abcd"),
        myservice.sayHello1(),
        myservice2.sayCheese("abcdefghij!")
        ];

}]);
<div ng-app="myApp" ng-controller="mycontroller">
    {{saycheese}}
</div>

Upvotes: 1

Related Questions