0

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 ?

1 Answer 1

1
  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>

1
  • Obviously. Because i haven't added angular dependency, don't run my code snippet. Make changes in your's one.
    – psycho
    Commented Mar 7, 2017 at 4:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.