How to use functions from another module in AngularJS?

Question

I am learning AngularJS by making a Todo list app. However, I can't figure out how to use modules from one another.

In detail, I have this code in my 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();

The module TodoItem is from TodoItem.js, which is:

'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();
}

In the index.html of the app, I have the following code:

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

which I believe doesn't have misspelling in it.

However, I get this error in Chrome Javascript console:

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

So, what did I do wrong here? Thank you very much.

ossek · Accepted Answer · 2014-02-24 20:53:33Z

1

If TodoItem.js is required for app.js, it will need to be loaded beforehand.

It looks like you create TodoItem module, but you'll need to register any services you want to use inside of it. See http://docs.angularjs.org/guide/module/#configuration-blocks, and http://docs.angularjs.org/guide/dev_guide.services.creating_services.

Then, as a result of indicating TodoItem as a dependency of todoApp, you'll have access to all of the services registered in TodoItem in any services, controllers, or filters you register in todoApp.

edited Feb 24, 2014 at 20:53

answered Feb 24, 2014 at 20:32

ossek

1,64817 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ossek Over a year ago

Glad this can be helpful -- I'll add that two great architectural starting points can be found via the angular developers themselves: github.com/angular/angular-seed, and via Yeoman: github.com/yeoman/generator-angular.

doodeec · Accepted Answer · 2014-02-24 20:49:11Z

1

First of all, you have to load scripts/models/TodoItem.js before scripts/app.js

But your approach is little out of angular's architecture. Instead of creating a class TodoItemClass, I'd recommend you to make use of angular's built it services (link).

answered Feb 24, 2014 at 20:49

doodeec

2,92722 silver badges23 bronze badges

Comments

Matt Pileggi · Accepted Answer · 2014-02-24 20:59:09Z

1

You are attempting to use AngularJS as if it were RequireJS. Including other modules in your module/app does not add their class objects to your code. Rather, including outside modules exposes the services/controllers/directories/etc that the module defines to your module, so that they can be injected into YOUR services/controllers/etc.

In fact, none of the code samples you show above actually do anything with Angular. If you are simply looking for a modularized AMD-style dependency manager than go with RequireJS. If you are building controllers/directives/services/factories as a single-page application then you need to start building those components within your modules.

answered Feb 24, 2014 at 20:59

Matt Pileggi

7,2364 gold badges19 silver badges20 bronze badges

Comments

Rich · Accepted Answer · 2014-02-24 21:24:23Z

The other answers address the conceptual problems with your current code and how AngularJS is used. I thought I'd offer you a little code snippet to show a basic example of what they mean.

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];
}]);

})();

Collectives™ on Stack Overflow

How to use functions from another module in AngularJS?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related