Question

我将两个控制器放在一个单独的js文件中，该文件与一个名为messages

的服务有依赖关系

在app.js文件中我有2个控制器

var learnModule = angular.module('myApp', []);
learnModule.controller('ListCtrl', function (messages) {
    this.messages = messages.list;
});

learnModule.controller('PostCtrl', function (messages) {
    this.addMessage = function (message) {
        messages.add(message);
    }
});

在Services.js我有我的服务

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

myApp.factory('messages', function () {
    var messages = {};
    messages.list = [];
    messages.add = function (message) {
        messages.list.push({ id: messages.list.length, text: message });
    }
    return messages;
});

在我的模板文件的<head>部分，我已经注册了两个js文件，如下所示

  <script src="../Scripts/angular.min.js" runat="server" type="text/javascript"></script>
    <script src="../Scripts/Services.js" runat="server" type="text/javascript"></script>
    <script src="../Scripts/app.js" runat="server" type="text/javascript"></script>

注意::如果我在我的控制器js文件（即app.js）中复制服务，应用程序工作正常..

感谢您的帮助...

Answer 1

问题是，您有两个名称相同的模块myApp。只需重命名第二个模块，

var myApp = angular.module('mySecondApp', []);    
myApp.factory('messages', function () {
    var messages = {};
    messages.list = [];
    messages.add = function (message) {
        messages.list.push({ id: messages.list.length, text: message });
    }
    return messages;
});

首先将它添加为依赖项，然后你就可以了。

var learnModule = angular.module('myApp', ['mySecondApp']);
learnModule.controller('ListCtrl', function (messages) {
    this.messages = messages.list;
});

learnModule.controller('PostCtrl', function (messages) {
    this.addMessage = function (message) {
        messages.add(message);
    }
});

干杯！

Answer 2

对angular.module函数的调用有两个不同的函数

如果它有一个带数组的第二个参数，它会尝试创建一个新模块（它依赖于列表中列出的其他模块的名称）
如果它没有第二个参数，它会尝试访问已存在的模块

如果已经有一个具有该名称的模块并且您尝试创建一个模块，或者没有创建一个模块并且您尝试访问它，则会出现错误。

解决方案是仅使用数组作为第二个参数调用函数angular.module('myApp', [])，并在页面中引用的第一个文件的顶部。在其他人中使用没有第二个参数angular.module('myApp')的表单来访问之前创建的模块。

Answer 3

您再次重新声明myApp。尝试将您的服务命名为新名称并将其作为依赖项添加到主模块

我们将服务放在不同的js文件中时出错

3 个答案: