AngularJSアプリケーションでrequirejsを使用します

コアポイント

• requirejsは、JavaScriptの依存関係を簡素化し、コードベースの保守性を向上させるJavaScriptライブラリです。大規模なプロジェクトでの依存関係を追跡することは困難な場合があるため、大規模なプロジェクトでは特に役立ちます。
• Angularの依存関係インジェクションシステムと要求JSの依存関係管理には、機能が異なります。 AngularJSはコンポーネント内の必要なオブジェクトを処理しますが、必要なのはモジュールまたはjavaScriptファイルを処理します。
• AngularJSコンポーネントは、必要なスクリプトファイルを非同期にロードする必要があるため、requirejsモジュールとして定義でき、手動で起動できます。
• のようなツールを使用して、展開用の要件モジュールを結合および圧縮するために、スクリプトファイルのダウンロード速度を最適化することができます。このプロセスは自動化でき、展開の各段階では異なる構成を行うことができます。

大規模なJavaScriptアプリケーションを記述する最も簡単な方法の1つは、コードベースを複数のファイルに分割することです。そうすることで、コードの保守性を向上させることができますが、メインのHTMLドキュメントでスクリプトタグが欠落または誤ったタグの可能性を高めることができます。ファイルの数が増えると、依存関係の追跡が困難になります。この問題は、大規模なAngularJSアプリケーションにも存在します。すでにアプリケーションで依存関係の負荷を処理するための多くのツールがあります。この記事では、AngularJを使用してRequireJSを使用する方法を学習して、依存関係の負荷作業を簡素化します。また、gruntを使用して、requirejsモジュールを含むコンボファイルを生成する方法についても検討します。

概要を要求する

requirejsは、JavaScriptの依存関係の読み込みを遅らせるのに役立つJavaScriptライブラリです。モジュールには、JS Syntax Sugarを必要とするJavaScriptファイルがいくつか含まれています。 requirejsは、CommonJSによって指定された非同期モジュールを実装します。 requirejsは、モジュールを作成および参照するための簡単なAPIを提供します。 requirejsには、モジュールやシムへのパスなど、基本的な構成データを含むメインファイルが必要です。次のコードスニペットには、main.jsファイルのフレームワークが表示されます。

require.config({
    map: {
        //映射
    },
    paths: {
        //模块的别名和路径
    },
    shim: {
        //模块及其依赖模块
    }
});

アプリケーション内のすべてのモジュールは、パスセクションで指定する必要はありません。他のモジュールは、相対パスを使用してロードできます。モジュールを定義するには、define（）ブロックを使用する必要があります。

define([
    //依赖项
], function (
    //依赖项对象
) {

    function myModule() {
        //可以使用上面接收到的依赖项对象
    }

    return myModule;
});

モジュールには、いくつかの従属モジュールがある場合があります。通常、オブジェクトはモジュールの最後に返されますが、これは必須の要件ではありません。

Angularの依存関係注入と要求依存性管理

Angular開発者から聞いた一般的な質問は、Angularの依存関係管理とRequirejsの依存関係管理の違いについてです。これら2つのライブラリの目的は完全に異なることを覚えておくことが重要です。 AngularJSの組み込み依存関係は、システム処理コンポーネントに必要なオブジェクトを必要とします。要求がモジュールをロードしようとすると、すべての従属モジュールをチェックし、最初にロードします。ロードされたモジュールのオブジェクトはキャッシュされ、同じモジュールが再度要求されると提供されます。一方、AngularJは、名前と対応するオブジェクトのリストを含むインジェクターを維持します。コンポーネントが作成されると、エントリがインジェクターに追加され、オブジェクトが登録名で参照されるたびに提供されます。

requirejsとangularjsの組み合わせ

この記事に付属するダウンロード可能なコードは、2ページの単純なアプリケーションです。次の外部依存関係があります：

requirejs
jQuery
angularjs
角度ルート
角度リソース
角度ui nggrid

これらのファイルは、ここにリストされている順序でページに直接ロードする必要があります。必要なAngularJSコンポーネントのコードを含む5つのカスタムスクリプトファイルがあります。これらのファイルがどのように定義されているか見てみましょう。

Angularjsコンポーネントをrequirejsモジュール として定義します

AngularJSコンポーネントには：

が含まれます

関数定義
依存関係噴射
Angularモジュールに登録
上記の3つのタスクでは、各モジュール内の最初の2つのタスクを実行し、3番目のタスクがAngularJSモジュールの作成を担当する別のモジュールで実行されます。まず、構成ブロックを定義しましょう。構成ブロックは他のブロックに依存せず、最後に構成関数を返します。ただし、構成モジュールを別のモジュール内にロードする前に、構成ブロックを構成するために必要なすべてをロードする必要があります。 config.jsには、次のコードが含まれています

上記のコードスニペットでの依存関係の噴射方法に注意してください。上記で定義された構成関数は通常のJavaScript関数であるため、依存関係を注入するために

を使用します。モジュールを閉じる前に、構成関数を返して、さらに使用するために従属モジュールに送信できるようにします。また、これらのファイルにコンポーネント固有のコードがないため、他のタイプの角度コンポーネントを定義するために同じアプローチを取ります。次のコードスニペットは、コントローラーの定義を示しています。

require.config({
    map: {
        //映射
    },
    paths: {
        //模块的别名和路径
    },
    shim: {
        //模块及其依赖模块
    }
});

アプリケーションのAngularモジュールは、これまでに定義された各モジュールに依存します。このファイルは、他のすべてのファイルからオブジェクトを取得し、AngularJSモジュールにフックします。このファイルは、このファイルのAngularモジュールを$injectを使用してどこからでも参照できるため、何も返されない場合があります。次のコードブロックは、Angularモジュールを定義します：

require.config({
    map: {
        //映射
    },
    paths: {
        //模块的别名和路径
    },
    shim: {
        //模块及其依赖模块
    }
});

必要なスクリプトファイルは非同期にロードされているため、NG-APPディレクティブを使用してAngularアプリケーションを起動することは不可能です。ここで正しい方法は、手動ブートを使用することです。これは、main.jsという特別なファイルで行う必要があります。これには、Angularモジュールを定義するファイルの最初のロードが必要です。このファイルのコードを以下に示します。

define([
    //依赖项
], function (
    //依赖项对象
) {

    function myModule() {
        //可以使用上面接收到的依赖项对象
    }

    return myModule;
});

gruntを構成して、requirejsモジュール

を組み合わせます

JavaScriptが多いアプリケーションを展開する場合、スクリプトファイルを組み合わせて圧縮して、スクリプトファイルのダウンロード速度を最適化する必要があります。 Gruntなどのツールは、これらのタスクを簡単に自動化できます。多くのタスクを定義し、フロントエンドの展開プロセスを容易にします。 requirejsファイルモジュールを正しい順序で組み合わせて、結果ファイルを圧縮するタスクがあります。他のグラントタスクと同様に、展開の各段階で異なる動作をするように構成できます。次の構成は、デモンストレーションアプリケーションに使用できます。 grunt-contrib-requirejs この構成は、開発オプションでGruntを実行するときに非圧縮ファイルを生成し、リリースオプションでGruntを実行するときに圧縮ファイルを生成します。

define([], function () {
    function config($routeProvider) {
        $routeProvider.when('/home', {templateUrl: 'templates/home.html', controller: 'ideasHomeController'})
            .when('/details/:id', {templateUrl: 'templates/ideaDetails.html', controller: 'ideaDetailsController'})
            .otherwise({redirectTo: '/home'});
    }
    config.$inject = ['$routeProvider'];

    return config;
});

結論

依存関係の管理は、アプリケーションサイズが特定のファイル数を超えると困難になる可能性があります。 requirejsのようなライブラリにより、ファイルの読み込み順序を心配することなく、依存関係を簡単に定義できます。依存関係管理は、JavaScriptアプリケーションの不可欠な部分になりつつあります。 AngularJS 2.0は、内蔵のAMDをサポートします。

（FAQの部分は長すぎて擬似オリジナルの目標と一致しないため、省略されています。必要に応じて、FAQの部分は再生できます。

以上がAngularJSアプリケーションでrequirejsを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。