AngularJS를 사용한 하위 응용 프로그램 모듈 구성

작은 응용 프로그램과 함께 각도 응용 프로그램을 구성하는 가장 좋은 방법은 무엇입니까?AngularJS를 사용한 하위 응용 프로그램 모듈 구성

응집력이있는 응용 프로그램을 다루는 조직 주제를 다루는 많은 기사를 읽었지만, '큰 응용 프로그램'이 작은 응용 프로그램이나 관련성이없는 응용 프로그램의 셸 역할을하는 곳은 없습니다.

특히 내가 고민하고있는 곳은 angular.module (s)의 생성입니다. 나의 첫번째 본능은 자신의 자기 포함 된 응용 프로그램이 될 것

var portal = angular.module('Portal', [ 'Admin', 'SubApp1', 'SubApp2']); 

/** 
* Each of the sub-applications will have their own controllers, etc 
*/ 
var admin = angular.module('Admin', []); 
var subApp1 = angular.module('SubApp1', []); 
var subApp2 = angular.module('SubApp2', []);

각 subApp 모듈과 같은 일을 할 것입니다.

하위 응용 프로그램 모듈을 포털 모듈/상위 응용 프로그램에 '각도 방식'으로 주입하고 있습니까?

출처

2013-07-09 Daniel

이 완벽하게 좋은 방법입니다. – Chandermani

모듈이 작고 관련이없는 경우 더 좋은 방법은 AngularJS 응용 프로그램의 여러 인스턴스를 만들어 별도로 부트 스트랩하는 것입니다.

이러한 접근 방식의 장점은 다음과 같습니다

성능 : 각 응용 프로그램에 대한 $digest 단계로 구분
분리 $rootScopes 변수의 응용 프로그램에 대한
분리 CSS와 축소 된 JS 파일
큰 응용 프로그램

와 모듈과 같은 응용 프로그램을 사용할 수 있습니다 당신은 수동 방법을 사용하여 각 응용 프로그램을 부트 스트랩 할 수 있습니다

<!doctype html> 
<html xmlns:ng="http://angularjs.org"> 
<head> 
    <script src="http://code.angularjs.org/angular.js"></script> 
</head> 
<body> 

    <div id="portlet1"> 
    Hello {{'World1'}}! 
    </div> 
    <script src="apps/app1.js"></script> 

    <div id="portlet2"> 
    Hello {{'World2'}}! 
    </div> 
    <script src="apps/app2.js"></script> 

    <script> 
    angular.element(document).ready(function() { 
     angular.bootstrap(document.getElementById('portlet1'), ['app1']); 
     angular.bootstrap(document.getElementById('portlet2'), ['app2']); 
    }); 
    </script> 

</body> 
</html>

출처

2013-10-11 21:15:10 kseb

AngularJS를 사용한 하위 응용 프로그램 모듈 구성

답변

관련 문제