Разработка приложения 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);
      }
    };
  })

Я буду использовать список в качестве примера. Для 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 в этих сценариях не важны для запуска приложения. Это только для исходный код отображается слева от приложения.

в основном, у них есть директива под названием appRun, которая использует функцию fetchCode

  .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>

надеюсь, это поможет. Я все еще не уверен, что это "лучшая" техника, но похоже, что домашняя страница AngularJS просто использует совершенно отдельное угловое приложение (ng-app) для каждого примера/виджета. Я думаю, что я собираюсь сделать то же самое, за исключением изменения функции fetchCode, чтобы получить материал с AJAX.