キーポイント

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

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

前述のように、

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

ngrouteの制限

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

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

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

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

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

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

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

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

テンプレート間でナビゲート 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

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

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

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

が得られます

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';
  }])

これらの規(guī)則は

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

以下は、上記で使用されたコンポーネントと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';
  }])

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

以上がAngularjsの未來的な新しいルーターの紹介の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。