AngularJS에서 다른 모듈의 함수를 사용하는 방법은 무엇입니까?

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에서 인 모듈 : 응용 프로그램의 index.html에서

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

, 나는 다음과 같은 한 코드 :

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

wh 나는 그것이 틀렸다고 믿지 않는다.

그러나, 나는 크롬 자바 스크립트 콘솔에서이 오류를 얻을 :

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/app.js

이전 scripts/models/TodoItem.js을로드해야하지만 당신의 접근 방식은 각 아키텍처 중 작은 것입니다. TodoItemClass 클래스를 만드는 대신 각도의 빌드 된 서비스 (link)를 사용하는 것이 좋습니다.

Answer 3

AngularJS는 RequireJS 인 것처럼 사용하려고 시도하고 있습니다. 귀하의 모듈/애플 리케이션에 다른 모듈을 포함시키지 않아도 클래스 객체를 코드에 추가하지 않습니다. 오히려 외부 모듈을 포함하여 모듈이 모듈에 정의한 services/controllers/directories/etc를 노출하여 사용자의 서비스/컨트롤러/etc에 삽입 할 수 있습니다.

실제로 표시되는 코드 샘플 중 실제로 Angular를 사용하는 것도 없습니다. RequireJS를 사용하는 것보다 모듈화 된 AMD 스타일 종속성 관리자를 찾고 있다면. 컨트롤러/지시문/서비스/팩토리를 단일 페이지 응용 프로그램으로 작성하는 경우 모듈 내에서 해당 구성 요소를 빌드해야합니다.

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; 

}]); 

})(); 

응용 프로그램.https://github.com/angular/angular-seed 및 보좌관을 통해 : - 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]; 
}]); 

})();