2014-06-17 2 views
0

제가 일하고있는 Grails 애플리케이션에 AngularJS를 추가하려고합니다.AngularJS 앱에서 주 모듈 하나 또는 여러 모듈을 사용해야합니까?

특히 사용자의 모든 페이지와 같이 내 사이트의 한 부분에 각도 기능을 추가하고 있습니다.

컨트롤러와 서비스를 추가하는 사용자 모듈을 만들기 시작했습니다. 그런 다음 내 사이트의 다른 영역 (http 매개 변수를 변형하여 백엔드에서 이해할 수 있도록)에서 원하는 기본 구성 코드가 필요한 시점에 도달했습니다 (http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/).

이렇게하면 전체 응용 프로그램에 기본 모듈이 필요하다고 생각합니다. 그러나 저는 여전히 Angular를 처음 접했고 사용자 모듈이 기본 모듈에서이 구성을 상속하는 방식을 이해하지 못합니다. 그게 가능한가? 아니면 모든 컨트롤러와 서비스를 내 전체 앱에 추가 할 수있는 기본 모듈이 하나만 있어야합니까?

편집 :

var moduleB = angular.module('ModuleB', ["ModuleA"]) 

ModuleA에서 내 구성이 ModuleB 내에서 존중되어야합니다 : 그것은 내가 모듈을 정의하고 다른 사람의 종속성으로 제공하는 경우처럼 보이는 몇 가지 테스트 후. 이것은 나에게 어떤 의미가 없지만, 충돌하는 구성으로 두 가지 종속성을 나열하면 어떨까요?

답변

1

우리는이 같은이 문제를 해결 :

  1. 모든 기본 기능을 구성 '코어'모듈을 만들고 ('baseHttp', 일부 유틸 공장, 템플릿 캐시 공장 및 기타 기본 서비스, 예를 들어).
  2. 특정 모듈을 만듭니다. 예 : 다음 그것은 우리가 '작업'컨트롤러 또는 서비스 (유틸 공장 등) 기본 서비스를 주입하고 바로 사용할 필요하다면

    var task = angular.module('task', ["core"]);

. 그러나 기본 서비스를 상속하고 메서드를 추가/재정의해야 할 때가 있습니다. 이를 위해 klass.js를 사용합니다 (다른 상속 라이브러리를 사용할 수도 있음). 예를 들어 '핵심'모듈

(function (module) { 
    module.factory("baseHttp", baseHttp); 

    baseHttp.$inject = ['baseRest']; 
    function baseHttp(baseRest) { 

     var api = {    
      createItem: function (item) { 
       return this.post("create", item); 
      },   

      // ... other methods 

     }; 

     return baseRest.extend(api); 
    };  

})(angular.module("core")); 

'baseRest'에서

는 각 '$ HTTP'의 장식입니다.

에서 '작업'모듈 : 우리는 핵심에서 일부 서비스를 상속하거나 코드에서 핵심 서비스를 사용할 수있는 결과

(function (module) { 
    module.factory("baseHttp", taskHttp); 

    taskHttp.$inject = ['baseHttp']; 
    function taskHttp(baseHttp) { 

     var api = { 
      // override base method   
      createItem: function (item) { 
       return this.post("createTask", item); 
      },   

      // add new method 
      read: function (id) { 
       return this.get("readTask", id); 
      }, 

      // ... other methods 

     }; 

     return baseHttp.extend(api); 
    };  

})(angular.module("task")); 

.

1

두 모듈의 지시문이 동일한 요소에 범위를 작성하려고하면 각도가 불만합니다. 같은 이름의 서로 다른 지시문을 사용하면이 문제가 발생할 가능성이 더 높습니다.

지시문 충돌 가능성을 줄이려면 고유 한 네임 스페이스 (ng가 사용됨)가있는 모듈에서 지시문을 정의해야합니다.

종속성이있는 ng-app가 하나있는 것이 좋습니다.

관련 문제