18

AngularJSのシードアプリで遊んでいますが、アプリのほとんどの依存関係（コントローラー、ディレクティブ、フィルター、サービス）が事前に読み込まれていることに気付きました。Angularアプリをより小さなバイトにモジュール化する方法を考えていました。そこでは、必要な場合を除いて依存関係が読み込まれません。

たとえば、カート、配送先住所、検索結果、商品の詳細、商品リストなどを含む大規模なアプリケーションがある場合、ショッピングサイトのユーザーはこれらのビューに遭遇することはありませんが、見た目は（シードアプリから）これらすべてのビューのコードが起動時に読み込まれるようなものです。

AngularJSでモジュール性はどのように軽減されますか？

4

3 に答える 3

21

モジュール性に関するこの質問は、ここSOとGoogleグループで頻繁に尋ねられます。私はコアチームの一員ではありませんが、私の理解は次のとおりです。

  1. パーシャル（HTML /テンプレートフラグメント）をインクルード（ngInclude）するか、ディレクティブ/ルートで参照することにより、オンデマンドで簡単にロードできます。したがって、少なくともすべてのパーシャルを事前にダウンロードする必要はありません（ダウンロードしたい場合もありますが、ここで他の質問を参照してください：AngularJSに必要なときにではなく最初にパーシャルをロードさせる方法はありますか？）

  2. JavaScript（コントローラー、ディレクティブ、フィルターなど-基本的にAngularJsモジュールで定義されているすべてのもの）に関しては、現在のところ、AngularJSでのモジュールのオンデマンドロードはサポートされていないと思います。コアチームによってクローズされたこの問題は、これの証拠です：https ://github.com/angular/angular.js/issues/1382

AngularJSモジュールのオンデマンドロードの欠如は大きな制限のように聞こえるかもしれませんが、次のとおりです。

  • パフォーマンスに関しては、物事が測定されるまで確信が持てません。だから私はこれがあなたにとって本当の問題であるかどうかを単に測定することをお勧めします
  • 通常、AngularJSで記述されたコードは非常に小さい、つまり、非常に小さいです。この小さなコードベースを縮小してgzipで圧縮すると、ダウンロードするアーティファクトが非常に小さくなる可能性があります

さて、この質問は頻繁に戻ってくるので、AngularJSチームはこれを認識していると確信しています。実際、最近いくつかの実験的なコミット（https://github.com/mhevery/angular.js/commit/1d674d5bfc47d18dc4a14ee0feffe4d1f77ea23b#L0R396）を見て、サポートが進行中である可能性があることを示唆しています（または少なくともいくつかの実験があります）。

于 2012-09-28T19:40:13.237 に答える
14

最近、requireモジュールとAngularで遊んでいて、パーシャルとコントローラーの遅延読み込みを実装しました。

Angularソース（バージョン1.0.2）を変更せずに簡単に実行できます。

リポジトリ：https ：//github.com/matys84pl/angularjs-requirejs-lazy-controllers 。

Charles Fulneckyによって作成されたyepnope（ https://github.com/cmelion/angular-yepnope ）を使用する実装もあります。

于 2012-11-21T18:57:06.633 に答える
0

必要なのは、次のように、このコードをアプリケーション構成に配置することだけです。

  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

  ]

また、すべてのコンポーネントには、必要な場所に「遅延」ロードがあります。

于 2015-01-21T20:43:38.600 に答える