javascript - Angular 提示缺少一个根本没有声明的模块我

Question

我正在尝试定义两个 Angular 模块myApp1和myApp2。

从 myApp1 中，我正在使用 myApp2 的服务。

这是我在 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!")
        ];

}]);

但是当我检查控制台日志时， Angular 提示没有模块:myApp。

JSfiddle 在这里 http://jsfiddle.net/PxdSP/3050/

有人可以帮我解决这个问题吗？

Answer 1

1. 这是命名约定的问题，模块名称中不能使用数字。我将它们重命名为 myApp1 -> myApp & myApp2 -> myApptwo .
2. 第二个问题是您还没有注入(inject)myApptwo在myApp ，没有它您将无法访问 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>