각도 작성동적 모듈 집합이 있는 JS 앱

각도 작성동적 모듈 집합이 있는 JS 앱

사용자가 미리 정의된 100개 이상의 위젯 세트에서 위젯을 배치(드래그/드롭)할 수 있는 복잡한 레이아웃을 가진 애플리케이션이 있습니다.여기서 모든 위젯은 특정 방식으로 데이터 세트(REST 호출을 사용하여 가져오기)를 표시하는 커스텀 구현입니다.블로그 투고, 스택오버플로우 질문, 공식 Angular를 많이 읽었습니다.JS docs는 이러한 요건을 처리하기 위해 어플리케이션을 어떻게 설계해야 하는지 알 수 없습니다.데모 앱을 보면 단일 모듈(ng-app)이 있으며, 이를 .js 파일에 구성할 때 종속 모듈이 종속 모듈로 선언되지만, 저는 위젯 세트를 많이 가지고 있기 때문에 여기에 모두 설명하는 것은 권장되지 않습니다.다음 질문에 대한 제안이 필요합니다.

• 앱과 위젯을 설계하는 방법 - 별도의 Angular가 있어야 합니까?JS 모듈 또는 각 위젯은 메인 모듈에 대한 지시사항이어야 합니까?
• 위젯을 디렉티브로 설계할 경우 디렉티브 내에서 종속성을 정의하는 방법이 있습니까?예를 들어, 내 지시가 구현에 ng-calender를 사용한다고 말하는가?
• 각 위젯을 별도의 모듈로 설계할 경우 위젯 모듈을 메인 모듈에 종속적으로 동적으로 추가할 수 있는 방법이 있습니까?
• 컨트롤러를 어떻게 설계해야 할까요? 위젯당 하나의 컨트롤러가 필요할 수 있습니다.
• 보기에 동일한 유형의 위젯이 여러 개 있는 경우 상태(범위)를 어떻게 구분해야 합니까?
• AngularJs를 사용하여 재사용 가능한 위젯을 설계하기 위한 베스트 프랙티스가 있습니까?

편집

유용한 참고 자료:

• ocLazyLoad - Angular를 위한 매우 느린 로드 libJS
• 시드 프로젝트 - 모듈 + 루트 변경 시 느린 로드(ES6, systemjs, ocLazyLoad)
• 각도에서의 느린 로딩JS
• 각도가 있는 컨트롤러 및 뷰의 동적 로드JS 및 요구JS
• 각도 로드필요한 JS 컴포넌트응용 프로그램 부트스트랩 후 JS
• Angular의 느린 로드에 대한 데모 프로젝트GitHub의 JS 리소스
• 온 디맨드 로드 프로젝트
• 필요한 경우에만 모듈을 동적으로 주입합니다.
• Angular 기사의 또 다른 게으른 로딩
• 큰 각도에서의 코드 구성JS 및 JavaScript 응용 프로그램

이것들은 일반적인 조언일 뿐입니다.

앱과 위젯을 설계하는 방법 - 별도의 Angular가 있어야 합니까?JS 모듈 또는 각 위젯은 메인 모듈에 대한 지시사항이어야 합니까?

위젯을 여러 개로 분할하는 것은 당연하다고 생각됩니다.일부 위젯은 다른 위젯보다 더 많은 공통점을 가질 수 있습니다.어떤 것은 매우 일반적이고 다른 프로젝트에 적합할 수도 있고, 어떤 것은 더 구체적일 수도 있습니다.

위젯을 디렉티브로 설계할 경우 디렉티브 내에서 종속성을 정의하는 방법이 있습니까?예를 들어, 내 지시가 구현에 ng-calender를 사용한다고 말하는가?

모듈이다는 .A에 .B 둘 다A ★★★★★★★★★★★★★★★★★」B에 .C는 Angular에서하기 위한 디렉티브는 Angular에서 위젯을 작성하기 위한 자연스러운 선택입니다.디렉티브가 다른 디렉티브에 의존하고 있는 경우는, 같은 모듈에서 디렉티브를 정의하거나 모듈러 레벨에 의존 관계를 작성합니다.

각 위젯을 별도의 모듈로 설계할 경우 위젯 모듈을 메인 모듈에 종속적으로 동적으로 추가할 수 있는 방법이 있습니까?

네가 왜 이걸 하고 싶어 하는지 나도 모르겠어 어떻게 해야 할지 모르겠어지침 및 서비스는 Angular에서 사용하기 전에 초기화되지 않습니다.방대한 디렉티브 라이브러리(위젯)를 가지고 있고, 그 중 일부를 사용할지 모르지만, 어플리케이션이 초기화되었을 때 어떤 것을 사용할지 모르는 경우는, 실제로 모듈을 로드한 후에 디렉티브를 「느긋하게 로드」할 수 있습니다.여기에 예를 하나 작성했습니다.

많은 코드가 있어도 애플리케이션을 빠르게 로드할 수 있다는 장점이 있습니다.필요하기 전에 스크립트를 로드할 필요가 없기 때문입니다.단점은 새로운 디렉티브가 처음 로드될 때 상당한 지연이 발생할 수 있다는 것입니다.

컨트롤러를 어떻게 설계해야 할까요? 위젯당 하나의 컨트롤러가 필요할 수 있습니다.

위젯에는 자체 컨트롤러가 필요할 수 있습니다.컨트롤러는 일반적으로 크기가 작아야 합니다. 크기가 커지면 서비스에 더 적합한 기능이 있는지 검토할 수 있습니다.

보기에 동일한 유형의 위젯이 여러 개 있는 경우 상태(범위)를 어떻게 구분해야 합니까?

범위 변수가 필요한 위젯에는 반드시 분리된 범위가 있어야 합니다.scope:{ ... }를 참조해 주세요).

AngularJs를 사용하여 재사용 가능한 위젯을 설계하기 위한 베스트 프랙티스가 있습니까?

범위를 분리하여 종속성을 최소로 유지합니다.Misko의 Angular 베스트 프랙티스에 대한 비디오 보기

Brian Ford는 또한 Angular에서 거대한 애플리케이션을 쓰는 것에 대한 기사를 썼다.

이 질문 또한 나에게 매우 중요합니다.앵귤러JS 홈페이지에는 몇 가지 예가 있습니다(위젯이라고 부를 수 있습니다).그래서 소스코드를 조사해서 위젯을 어떻게 분리했는지 확인했습니다.

첫째, "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>

코드가 사용되지만 이러한 스크립트의 ID 속성은 앱을 실행하는 데 중요하지 않습니다.이는 앱 왼쪽에 있는 소스 코드 표시를 위한 것입니다.

기본적으로 fetchCode 함수를 사용하는 appRun이라는 명령어가 있습니다.

  .factory('fetchCode', function(indent) {
    return function get(id, spaces) {
      return indent(angular.element(document.getElementById(id)).html(), spaces);
    }
  })

코드를 가져옵니다.그리고 그들은 각진 것을 사용한다.bootstrap()을 사용하여 새 응용 프로그램을 만듭니다.앱을 실행해도 모듈을 로드할 수 있습니다.JavaScript 프로젝트의 예는 다음과 같이 초기화됩니다.

<div app-run="project.html" module="project" class="well"></div>

이게 도움이 됐으면 좋겠다.'최고의' 기술이 뭔지 아직 잘 모르겠지만 앵글은 마치...JS 홈페이지는 예/위젯별로 완전히 다른 각도 애플리케이션(ng-app)을 사용합니다.FetchCode 함수를 변경하여 AJAX로 정보를 가져오는 것 이외에는 같은 작업을 할 예정입니다.

언급URL : https://stackoverflow.com/questions/16806901/developing-an-angularjs-app-with-dynamic-set-of-modules