Angularjsの未来的な新しいルーターの紹介

キーポイント

AngularJSは、Angular 2で現在開発されている新しいルーターでルーティング機能を強化しており、Angular 1.4にバックポートされます。このルーターは、ネストされたビュー、平行ビュー、ビューシーケンスなどの複雑なシナリオをサポートできないなど、ngrouteモジュールの制限を解決します。
新しいルーターは、ルーティングの作成を簡素化し、テンプレート間のナビゲーションを可能にし、ページ上の複数の並列ビューを管理できるようにします。また、コンポーネントのライフサイクルを柔軟に制御し、インターセプトと制御ナビゲーションを可能にします。
• まだ開発中ですが、新しいルーターはAngular 2への移行を簡素化することを約束し、複雑なアプリケーションシナリオを効率的に処理するように設計されているため、試してみる価値があります。
AngularJSは、最も人気のあるJavaScript MV*フレームワークの1つであり、シングルページアプリケーション（SPA）の構築に広く使用されています。スパで最も挑戦的な機能の1つはルーティングです。クライアントルーティングには、ビューの一部を変更し、ブラウザナビゲーション履歴にエントリを作成することが含まれます。完全に機能するクライアントフレームワークとして、AngularJSは常にngrouteモジュールを介したルーティングをサポートしてきました。これは基本的なルーティングには十分ですが、ネストされたビュー、平行ビュー、ビューシーケンスなどのより複雑なシナリオをサポートしていません。

新しいAngular 2ルーターが現在開発中であり、Angular 1.4にバックポートされます。この記事では、新しいルーターを使用してルートを定義する方法と、Ngrouteが解決できない問題のいくつかを解決する方法を学びます。

前述のように、

執筆時点では新しいルーターの開発がまだ進行中であり、一部のAPIは後で変化する可能性があります。 Angularチームはまだ新しいルーターに名前を付けていないため、現在はFuture Routerと呼ばれています。

ngrouteの制限

ngrouteは、複雑なエンタープライズアプリケーションを念頭に置いて作成されていません。ページの特定の部分をいくつかのステップでロードする必要があるアプリケーションを個人的に見てきました。このようなアプリケーションは、ngrouteを使用して構築できますが、ビューに適用されるすべての変更に対してURL状態を持つことはほとんど不可能です。

ng-viewディレクティブは、ng-appディレクティブのインスタンス内でのみ1回使用できます。これにより、2つの並列ビューを同時にロードできないため、平行ルートを作成することができなくなります。

NG-View内でレンダリングされたテンプレートの表示は、別のNG-Viewディレクティブを含めることはできません。これにより、ネストされたビューを作成することができなくなります。

新しいルーターはこれらの問題を解決し、ルーティングを定義および使用する柔軟な方法を提供します。新しいルーターは、「コントローラーとして」構文も使用します。 「コントローラー」を構文として使用することを強くお勧めします。これは、Angular 2の準備に今日従うべき規則の1つであるためです。

単純なルートを作成します

新しいルーターは、Angular 2を念頭に置いて作成されます。 Angular 2は、モジュール構成フェーズを排除することにより依存関係のインジェクションを簡素化します。つまり、ルートを定義するために構成ブロックを書き込む必要はありません。どこでも定義できます。 新しいルーターに追加される各ルートには、2つの部分が含まれています。

• パス：ルーティングテンプレートのurl
• コンポーネント：テンプレートとコントローラーの組み合わせ。慣習により、コントローラーとテンプレートの両方にコンポーネントにちなんで命名する必要があります

ルーティングは、$routerサービスを使用して構成されています。 $routerはサービスであるため、アプリケーションのどこにでもルートを定義できます（プロバイダーまたは構成ブロックを除く）。ただし、ルートを定義するコードブロックが、アプリケーションの負荷直後に実行されることを確認する必要があります。たとえば、ルートがコントローラーで定義されている場合（すぐにそうします）、ページが読み込まれるときにコントローラーを実行する必要があります。それらがサービスで定義されている場合、サービス方法は実行ブロックで実行する必要があります。

テンプレート間でナビゲート 2つの単純なルートを定義し、新しいルーターを使用してそれらの間をナビゲートしましょう。このコードの使用を続けたい場合は、新しいルーターのコピーを取得する必要があります。

それを行う方法を教えてください

。 NPMを介してプロジェクトごとに新しいルーターをインストールできます。

これにより、プロジェクトディレクトリにnode_modulesという名前のフォルダーが作成されます。新しいルーターは、node_modules/angular-new-router/dist/router.es5.min.jsにあります。 Angularjs自体の後にプロジェクトにそれを含めてください。

mkdir new-router && cd new-router
npm install angular-new-router

最初に、モジュールを定義してルートを構成しましょう。

上記のコードスニペットのコントローラーは、3つのルートを定義します。ルートルートは最初のテンプレートにリダイレクトされ、3番目のルートがURLからパラメーターを受け入れることに注意してください。ご覧のとおり、指定されたパラメーターの構文はngrouteと同じです。

前述のように、各コンポーネントには、対応するビューテンプレートとコントローラーが必要です。慣習により、コントローラーの名前は「コントローラー」（この例ではFirstControllerとSecondController）で接尾辞が付いているコンポーネント名でなければなりません。ビューテンプレートの名前は、コンポーネントの名前と同じでなければなりません。また、コンポーネントと同じ名前の名前のあるコンポーネント内にあるフォルダーにも含まれている必要があります。これにより、

が得られます

angular.module('simpleRouterDemo', ['ngNewRouter'])
  .controller('RouteController', ['$router', function($router){
    $router.config([
      { path:'/', redirectTo:'/first' },
      { path:'/first', component:'first' },
      { path:'/second/:name', component:'second' }
    ]);

    this.name='visitor';
  }])

これらの規則は

でカバーできます。後で例を見てみましょうが、今のところこれらの慣習に固執しましょう。

以下は、上記で使用されたコンポーネントと2番目のコンポーネントのビューです。 NG-Templateディレクティブを使用してそれらをインラインで定義します（したがって、実行可能なデモを再作成できます）が、理想的には別のHTMLファイルにある必要があります。

<code>projectRoot/
  components/
    first/
      first.html
    second/
      second.html</code>

ビューは非常にシンプルであるため、コントローラーも非常にシンプルです：$componentLoaderProvider

両方のコントローラーは、「コントローラー」として使用するために作成されているため、

を受け入れません。

<🎜>

<🎜>

このサービスは、ルートで渡されたパラメーターの値を取得するために使用されます。

ここで、このコントローラーをロードしてルートを登録する必要があります。

mkdir new-router && cd new-router
npm install angular-new-router

最後に、これらのルートをリンクしてページにロードする必要があります。新しいルーターは、NG-LinkディレクティブとNG-Viewportディレクティブをもたらし、ビューをそれぞれリンクしてテンプレートをロードします。 NG-Viewportディレクティブは、NG-Viewに似ています。

次のコードスニペットは、これらの命令の使用方法を示しています。

angular.module('simpleRouterDemo', ['ngNewRouter'])
  .controller('RouteController', ['$router', function($router){
    $router.config([
      { path:'/', redirectTo:'/first' },
      { path:'/first', component:'first' },
      { path:'/second/:name', component:'second' }
    ]);

    this.name='visitor';
  }])

（後続のセクション、並列ビュー、コンポーネントのライフサイクル管理、および結論に関して、スペースの制限により、ここでは省略されています。元のテキストの残りの部分は、必要に応じて書き直すことができます。）

以上がAngularjsの未来的な新しいルーターの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。