동적 모듈 세트로 AngularJS 앱 개발
사용자가 미리 정의 된 100 개 이상의 위젯 세트에서 선택하여 위젯을 배치 (드래그 / 드롭) 할 수있는 복잡한 레이아웃의 애플리케이션이 있습니다. 여기서 모든 위젯은 데이터 세트 (REST 호출을 사용하여 가져옴)를 표시하는 사용자 정의 구현입니다. 특정 방식으로. 수많은 블로그 게시물, stackoverflow 질문 및 공식 AngularJS 문서를 읽었지만 요구 사항을 처리하기 위해 내 애플리케이션을 어떻게 설계해야하는지 알 수 없습니다. 데모 앱을 살펴보면 단일 모듈 (ng-app)이 있으며 .js 파일에서이를 구성 할 때 종속 모듈이 종속성으로 선언되지만 많은 위젯 세트가 있으며 어떻게 든 모두 설명하는 것은 바람직하지 않습니다. 그곳에. 다음 질문에 대한 제안이 필요합니다.
- 앱과 위젯을 어떻게 디자인해야하나요? 별도의 AngularJS 모듈이 있어야하나요? 아니면 각 위젯이 메인 모듈에 대한 지시문이어야하나요?
- 내 위젯을 지시문으로 디자인하면 지시문 내에서 종속성을 정의하는 방법이 있습니까? 즉, 내 지시문이 구현에서 ng-calender를 사용한다고 말합니까?
- 각 위젯을 별도의 모듈로 디자인하면 위젯 모듈을 기본 모듈에 대한 종속성으로 동적으로 추가하는 방법이 있습니까?
- 컨트롤러를 어떻게 설계해야합니까? 위젯 당 하나의 컨트롤러 일 것입니다.
- 뷰에 동일한 유형의 위젯이 여러 개있는 경우 상태 (범위)를 어떻게 분리해야합니까?
- AngularJS로 재사용 가능한 위젯을 디자인하기위한 모범 사례가 있습니까?
편집하다
유용한 참고 자료 :
- ocLazyLoad-AngularJS를위한 훌륭한 지연 로딩 라이브러리
- Seed 프로젝트-모듈 + 경로 변경시 지연로드 (ES6, systemjs, ocLazyLoad)
- AngularJS의 지연 로딩
- AngularJS 및 RequireJS를 사용하여 동적으로 컨트롤러 및 뷰로드
- 애플리케이션 부트 스트랩 후 RequireJS로 AngularJS 구성 요소로드
- GitHub에서 AngularJS 리소스의 지연로드에 대한 데모 프로젝트
- Load On Demand 프로젝트
- 필요한 경우에만 동적으로 모듈 주입
- Angular 기사의 또 다른 지연 로딩
- 대규모 AngularJS 및 JavaScript 애플리케이션의 코드 구성
이것은 일반적인 조언입니다.
앱과 위젯을 어떻게 디자인해야하나요? 별도의 AngularJS 모듈이 있어야하나요? 아니면 각 위젯이 메인 모듈에 대한 지시문이어야하나요?
수백 개의 위젯에 대해 이야기하고 있는데, 여러 모듈로 분할하는 것이 자연스러워 보입니다. 일부 위젯은 다른 위젯보다 공통점이 더 많을 수 있습니다. 일부는 매우 일반적이고 다른 프로젝트에 적합 할 수 있으며 다른 일부는 더 구체적 일 수 있습니다.
내 위젯을 지시문으로 디자인하면 지시문 내에서 종속성을 정의하는 방법이 있습니까? 즉, 내 지시문이 구현에서 ng-calender를 사용한다고 말합니까?
다른 모듈에 대한 종속성은 모듈 수준에서 이루어 지지만 A모듈이 모듈 B과 둘 모두 A에 B의존 하고 모듈에 의존하는 경우 문제가 없습니다 C. 지시문은 Angular에서 위젯을 만들기위한 자연스러운 선택입니다. 지시문이 다른 지시문에 종속 된 경우 동일한 모듈에서 정의하거나 모듈 수준에서 종속성을 만듭니다.
각 위젯을 별도의 모듈로 디자인하면 위젯 모듈을 기본 모듈에 대한 종속성으로 동적으로 추가하는 방법이 있습니까?
왜 이렇게 하려는지 잘 모르겠고 어떻게해야하는지 모르겠습니다. 지시문과 서비스는 Angular에서 사용되기 전에 초기화되지 않습니다. 방대한 지시문 (위젯) 라이브러리가 있고 일부는 사용할 수 있지만 전부는 아님을 알고 있지만 응용 프로그램이 초기화 될 때 어떤 것이 사용될 것인지 모르면 실제로 "게으른"수 있습니다. 모듈이로드 된 후 지시문을로드 "합니다. 여기 에 예제를 만들었습니다.
이점은 스크립트가 필요하기 전에 스크립트를로드 할 필요가 없기 때문에 코드가 많더라도 애플리케이션을 빠르게로드 할 수 있다는 것입니다. 단점은 새 지시문이 처음로드 될 때 상당히 지연 될 수 있다는 것입니다.
컨트롤러를 어떻게 설계해야합니까? 위젯 당 하나의 컨트롤러 일 것입니다.
위젯에는 아마도 자체 컨트롤러가 필요할 것입니다. 컨트롤러는 일반적으로 작아야합니다. 컨트롤러가 커지면 서비스에 더 적합한 기능이 있는지 고려할 수 있습니다.
뷰에 동일한 유형의 위젯이 여러 개있는 경우 상태 (범위)를 어떻게 분리해야합니까?
범위 변수가 필요한 위젯은 의심 할 여지없이 자신의 격리 된 범위를 가져야 scope:{ ... }합니다 (디렉티브 구성에서).
AngularJS로 재사용 가능한 위젯을 디자인하기위한 모범 사례가 있습니까?
범위를 분리하고 종속성을 필요한 최소한으로 유지하십시오. Angular의 모범 사례에 대한 Misko의 비디오를 참조하십시오.
Brian Ford는 Angular에서 거대한 애플리케이션을 작성하는 방법에 대한 기사도 작성했습니다.
이 질문은 나에게도 매우 중요합니다. AngularJS 홈페이지에는 몇 가지 예제가 있습니다 (위젯이라고 부를 수 있음). 그래서 저는 그들의 소스 코드를 살펴보고 그들이 어떻게 위젯을 분리했는지 확인했습니다.
첫째, "ng-app"속성을 선언하지 않습니다. 그들은 사용
function bootstrap() {
if (window.prettyPrint && window.$ && $.fn.popover && angular.bootstrap &&
hasModule('ngLocal.sk') && hasModule('ngLocal.us') && hasModule('homepage') && hasModule('ngResource')) {
$(function(){
angular.bootstrap(document, ['homepage', 'ngLocal.us']);
});
}
}
모든 것이 올바르게로드되었는지 확인합니다. 깔끔한 아이디어이지만, ng-app 속성을 너무 많이 밀어 넣고 스스로 사용하지 않는 것이 이상합니다. 어쨌든 여기에 그들이 앱과 함께로드하는 홈페이지 모듈이 있습니다-http: //angularjs.org/js/homepage.js
appRun이라는 지시문이 있습니다.
.directive('appRun', function(fetchCode, $templateCache, $browser) {
return {
terminal: true,
link: function(scope, element, attrs) {
var modules = [];
modules.push(function($provide, $locationProvider) {
$provide.value('$templateCache', {
get: function(key) {
var value = $templateCache.get(key);
if (value) {
value = value.replace(/\#\//mg, '/');
}
return value;
}
});
$provide.value('$anchorScroll', angular.noop);
$provide.value('$browser', $browser);
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
});
if (attrs.module) {
modules.push(attrs.module);
}
element.html(fetchCode(attrs.appRun));
element.bind('click', function(event) {
if (event.target.attributes.getNamedItem('ng-click')) {
event.preventDefault();
}
});
angular.bootstrap(element, modules);
}
};
})
ToDo 목록을 예로 사용하겠습니다. html의 경우
<div app-run="todo.html" class="well"></div>
그런 다음 페이지 하단에
<script type="text/ng-template" id="todo.html">
<h2>Todo</h2>
<div ng-controller="TodoCtrl">
<span>{{remaining()}} of {{todos.length}} remaining</span>
[ <a href="" ng-click="archive()">archive</a> ]
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText" size="30"
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
</script>
그들은 또한 가지고 있습니다
<style type="text/css" id="todo.css"> //style stuff here </style>
<script id="todo.js"> //controller stuff here </script>
The code is used, but the id attributes on those scripts aren't important for running the app. That's just for the source code display to the left of the app.
Basically, they have a directive called appRun which uses a function fetchCode
.factory('fetchCode', function(indent) {
return function get(id, spaces) {
return indent(angular.element(document.getElementById(id)).html(), spaces);
}
})
to fetch the code. Then they use angular.bootstrap() to create a new application. They can also load modules though app-run. The JavaScript Project example is initialized like
<div app-run="project.html" module="project" class="well"></div>
Hopefully this helps. I'm still not sure what's the "best" technique, but it appears as though the AngularJS homepage simply uses a totally separate angular application (ng-app) for each example/widget. I think I'm going to do the same, except change the fetchCode function to get stuff with AJAX.
참고URL : https://stackoverflow.com/questions/16806901/developing-an-angularjs-app-with-dynamic-set-of-modules
'programing tip' 카테고리의 다른 글
| Amazon EC2 : 기존 PV AMI를 HVM으로 변환하는 방법 (0) | 2020.10.06 |
|---|---|
| URL Shortener는 어떻게 작동합니까? (0) | 2020.10.06 |
| React Native-StyleSheet와 일반 객체를 사용하면 어떤 이점이 있습니까? (0) | 2020.10.06 |
| 클래스 기반보기의 장점은 무엇입니까? (0) | 2020.10.06 |
| 게시 중 새 사전 컴파일 옵션은 MVC4 응용 프로그램에 어떤 영향을 미칩니 까? (0) | 2020.10.06 |