Как модульность смягчается в AngularJS?

Я играю с семенным приложением для AngularJS, и я заметил, что большинство зависимостей (контроллеры, директивы, фильтры, службы) для приложения загружаются спереди. Мне было интересно, как модулировать приложение Angular в меньшие байты, где зависимости не загружаются, если это не требуется.

Например, если у меня было большое приложение с тележкой, добавьте/измените адрес доставки, результаты поиска, информацию о продукте, списки продуктов и т.д. Пользователь на сайте покупок никогда не столкнется ни с одним из этих видов, но похоже, что (из семенного приложения), что код для всех этих представлений загружается при запуске.

Ответ 1

В последнее время я играл с требуемыми модулями и angular, и я реализовал ленивую загрузку партитур и контроллеров.

Это можно легко сделать без каких-либо изменений в источниках angular (версия 1.0.2).

Репозиторий: https://github.com/matys84pl/angularjs-requirejs-lazy-controllers.

Существует также реализация, которая использует yepnope (https://github.com/cmelion/angular-yepnope), сделанный Чарльзом Фулнеки.

Ответ 2

Этот вопрос о модульности часто задается здесь в SO и группе google. Я не являюсь частью основной команды, но мое понимание следующее:

Вы можете легко загрузить частичные части (фрагменты HTML/шаблонов) по запросу, включив их (ngInclude) или ссылаясь на них в директивах/маршрутах. Так что, по крайней мере, вам не нужно загружать все частичные части вверх (хотя вы можете это сделать, см. Другой вопрос здесь: Есть ли способ сделать частичные нагрузки AngularJS в начале, а не при необходимости?)
Когда дело доходит до JavaScript (контроллер, директивы, фильтры и т.д. - в основном все, что определено в модулях AngularJs), я считаю, что на сегодняшний день нет поддержки загрузки модулей по требованию в AngularJS, Эта проблема, закрытая основной командой, свидетельствует об этом: https://github.com/angular/angular.js/issues/1382

Отсутствие нагрузки по требованию модулей AngularJS может показаться большим ограничением, но:

когда дело доходит до производительности, нельзя быть уверенным, пока все не будет измерено; поэтому я бы предложил просто измерить, если это реальная проблема для вас.
обычно код, написанный с помощью AngularJS, действительно маленький, я имею в виду, действительно маленький. Эта небольшая базовая база кода и gzipped может привести к действительному небольшому артефакту для загрузки

Теперь, поскольку этот вопрос так часто возвращается, я уверен, что команда AngularJS знает об этом. На самом деле я недавно видел некоторые экспериментальные коммиты (https://github.com/mhevery/angular.js/commit/1d674d5bfc47d18dc4a14ee0feffe4d1f77ea23b#L0R396), предполагая, что поддержка может быть выполнена (или, по крайней мере, есть некоторые эксперименты с она).

Ответ 3

Все, что нам нужно, это поместить этот код в нашу конфигурацию приложения, как это:

  application.config [
    "$provide", "$compileProvider", "$controllerProvider", "$routeProvider"
    , ($provide, $compileProvider, $controllerProvider, $routeProvider) ->

      application.controller = $controllerProvider.register
      application.provider = $provide.provider
      application.service = $provide.service
      application.factory = $provide.factory
      application.constant = $provide.constant
      application.value = $provide.value
      application.directive = -> $compileProvider.directive.apply application, arguments

      _when = $routeProvider.when

      $routeProvider.when = (path, route) ->
        loaded = off
        route.resolve = new Object unless route.resolve
        route.resolve[route.controller] = [
          "$q",
          ($q) ->

            return loaded if loaded

            defer = $q.defer()

            require [
              route.controllerUrl
            ], (requiredController) ->
              defer.resolve()
              loaded = on

            defer.promise
        ]

        _when.call $routeProvider, path, route

Для использования добавьте требуемые компоненты в нужные нам модули (поставщик, константа, директива и т.д.). Например:

define [
  "application"
  "services/someService"
], (
  application
) ->

  application.controller "chartController", [
    "$scope", "chart", "someService"
    , ($scope, chart, someService) ->

      $scope.title = chart.data.title

      $scope.message = chart.data.message

  ]

файл someService.coffee:

define [
  "application"
], (
  application
) ->

  application.service "someService", ->

    @name = "Vlad"

И добавьте в controllerUrl наш путь к контроллеру для маршрутизации:

  application.config [
    "$routeProvider"
    , ($routeProvider) ->

      $routeProvider

        .when "/table",
          templateUrl: "views/table.html"
          controller: "tableController"
          controllerUrl: "controllers/tableController"
          resolve:
            table: ($http) ->
              $http
                type: "GET"
                url: "app/data/table.json"
  ]

tableController.coffee файл:

define [
  "application"
  "services/someService"
], (
  application
) ->

  application.controller "tableController", [
    "$scope", "table"
    , ($scope, table) ->

      $scope.title = table.data.title

      $scope.users = table.data.users

  ]

И все компоненты имеют "ленивую" нагрузку, где мы нуждаемся.