[javascript] 동적 모듈 세트로 AngularJS 앱 개발

이 질문은 나에게도 매우 중요합니다. 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>

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

기본적으로 fetchCode 함수를 사용하는 appRun이라는 지시문이 있습니다.

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

코드를 가져옵니다. 그런 다음 angular.bootstrap ()을 사용하여 새 응용 프로그램을 만듭니다. 앱 실행을 통해 모듈을로드 할 수도 있습니다. JavaScript 프로젝트 예제는 다음과 같이 초기화됩니다.

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

도움이 되었기를 바랍니다. 여전히 “최고의”기술이 뭔지 잘 모르겠지만 AngularJS 홈페이지는 각 예제 / 위젯에 대해 완전히 별도의 각도 응용 프로그램 (ng-app)을 사용하는 것처럼 보입니다. AJAX로 물건을 얻기 위해 fetchCode 함수를 변경하는 것을 제외하고는 똑같이 할 것이라고 생각합니다.