Question

我正在通过制作Todo列表应用程序来学习AngularJS。但是，我无法弄清楚如何使用彼此的模块。

详细地说，我在app.js：

中有这段代码

var app = angular.module('todoApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ui.router',
    'TodoItem'
    ]);

var TodoItem = angular.module( 'TodoItem' );
app.init = function () {
    var item1 = TodoItem.newItem();
    item1.title = 'Item 1';
    var item2 = TodoItem.newItem();
    item2.title = 'Item 2';

    app.todoList = [ item1, item2
    ];
}

app.init();

模块TodoItem来自TodoItem.js，即：

'use strict';

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

function TodoItemClass() {
    this.id = -1;
    this.title = '';
    this.detail = '';
    this.endDate = null;
    this.startDate = null;
}

TodoItemModule.newItem = function() {
    return new TodoItemClass();
}

在应用的index.html中，我有以下代码：

<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/todo.js"></script>
<script src="scripts/models/TodoItem.js"></script>

我相信其中没有拼写错误。

但是，我在Chrome Javascript控制台中收到此错误：

Uncaught Error: [$injector:nomod] Module 'TodoItem' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.6/$injector/nomod?p0=TodoItem

那么，我在这里做错了什么？非常感谢你。

Answer 1

如果app.js需要TodoItem.js，则需要事先加载。

看起来您创建了TodoItem模块，但您需要注册要在其中使用的任何服务。请参阅http://docs.angularjs.org/guide/module/#configuration-blocks和http://docs.angularjs.org/guide/dev_guide.services.creating_services。

然后，由于将TodoItem指示为todoApp的依赖项，您将可以访问在todoApp中注册的任何服务，控制器或过滤器中在TodoItem中注册的所有服务。

Answer 2

首先，您必须在scripts/models/TodoItem.js

之前加载scripts/app.js

但你的方法几乎没有角度的架构。我建议你不要创建一个类TodoItemClass，而是使用angular的内置服务（link）。

Answer 3

您正在尝试使用AngularJS，就像它是RequireJS一样。在模块/应用程序中包含其他模块不会将其类对象添加到代码中。相反，包括外部模块会公开模块为您的模块定义的服务/控制器/目录/等，以便它们可以注入您的服务/控制器/等。

实际上，上面显示的代码示例中没有一个实际上对Angular执行任何操作。如果您只是寻找模块化的AMD风格的依赖管理器而不是使用RequireJS。如果您将控制器/指令/服务/工厂构建为单页面应用程序，那么您需要开始在模块中构建这些组件。

Answer 4

其他答案解决了当前代码的概念问题以及如何使用AngularJS。我想我会给你一些代码片段来展示他们的意思的基本例子。

TodoItem.js

(function() {
'use strict';

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

todoItem.service('todoItemSvc', [function() {
  var service = {};

  function TodoItemClass() {
    this.id = -1;
    this.title = '';
    this.detail = '';
    this.endDate = null;
    this.startDate = null;
  }

  service.newItem = function() {
    return new TodoItemClass();
  }

  return service;

}]);

})();

app.js

(function() {
'use strict';

var app = angular.module('todoApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ui.router',
    'TodoItem'
    ]);

app.controller('RootCtrl', ['$scope','todoItemSvc', function($scope,todoItemSvc) {
  var item1 = todoItemSvc.newItem();
  item1.title = 'Item 1';
  var item2 = todoItemSvc.newItem();
  item2.title = 'Item 2';

  $scope.todoList = [item1, item2];
}]);

})();

如何使用AngularJS中另一个模块的函数？

4 个答案: