コアポイント

• Angular UIルーターは、複雑なWebアプリケーションでさまざまな狀態(tài)を管理するための強(qiáng)力なツールであり、ネイティブのAngularJSルーティングの実裝よりも各ビューをより多くの制御を提供します。 DOT表記を使用して親狀態(tài)內(nèi)の子狀態(tài)を定義し、絶対名を使用してWebアプリケーションの特定の部分が表示される場(chǎng)所を制御し、モジュラーアプリケーション設(shè)計(jì)を可能にします。
• uiルーターを使用すると、開発者はビューの名前とテンプレートへのパスを定義する$stateProvider內(nèi)でviewsオブジェクトを定義できます。名前のないビューは、親狀態(tài)（相対命名と呼ばれる）を指します。名前付きビューは、@構(gòu)文を使用して、コンポーネントを特定の狀態(tài)にマッピングします（Absolute Namingと呼ばれます）。
• 絶対命名により、コードが非常にモジュール化され、開発者がアプリケーションまたは將來のプロジェクト全體でテンプレートを再利用できるようになります。また、ヘッダーやフッターなどのWebアプリケーションのさまざまなコンポーネントを使用する方法を簡(jiǎn)素化し、時(shí)間と労力を節(jié)約します。

簡(jiǎn)潔に書くと、モジュラーコードは、特にチームが協(xié)力して非常に複雑なアプリケーションを開発する場(chǎng)合、Web開発における最も重要な概念の1つです。 Angular Frameworkは、非常に複雑になる可能性のある高度なアプリケーションを作成するように設(shè)計(jì)されており、モジュラーコードの作成がさらに重要になります。 Angular UIルーターは、これを達(dá)成するのに非常に役立つツールであり、Webアプリケーションのさまざまな狀態(tài)を管理するのに役立つように設(shè)計(jì)されています。ネイティブのAngularJSルーティングの実裝と比較して、それぞれのビューを完全に制御できます。

以前にUIルーターを使用したことがある場(chǎng)合は、DOT表記を使用して親狀態(tài)內(nèi)で子供の狀態(tài)を定義する方法を知っているかもしれません。ただし、UIルーターライブラリが親狀態(tài)內(nèi)にネストされた名前の名前のあるビューをどのように処理するかわからない場(chǎng)合があります。これが私が今日説明したいことです。

UIルーターが絶対名を使用して、Webアプリケーションの特定の部分がどこに表示されるかを完全に制御する方法を示します。これにより、さまざまなインターフェイスパーツを簡(jiǎn)単に追加および削除して、さまざまなコンポーネントで構(gòu)成されるモジュラーアプリケーションを作成できます。具體的には、ナビゲーションバー、いくつかのボディコンテンツ、フッターを特定の狀態(tài)にマッピングする方法を紹介します。いつものように、このチュートリアルのコードはGitHubで入手できます。また、記事の最後にデモも見つけることができます。

初心者

このデモを構(gòu)成するファイルを閲覧するために少し時(shí)間を取ってください（上記のGithubリンクにあります）。 AngularJSおよびUI-Routerライブラリがあるindex.htmlファイルがあることがわかります。このファイルには、コンテンツを挿入する2つのUI-Viewディレクティブがあります。次に、Angularアプリケーション用のコードを含むApp.jsファイルと、テンプレートディレクトリがあります。このディレクトリは、さまざまなビューのすべてに対応するために使用されます。このフォルダーは必須ではありませんが、Angularを使用してアプリケーションを構(gòu)築する際に何らかの構(gòu)造を使用することは絶対に最大の関心事です。ご覧のとおり、テンプレートフォルダー內(nèi)にアセットフォルダーを含めます。これは、再利用可能なコンポーネントを保存するのが好きです：ヘッダー、ナビゲーションバー、フッターなど。コードを非常にモジュール化するため、このコンベンションが便利だと思うかもしれません。

ui-router

ui-routerに依存関係を追加

アプリケーションの構(gòu)成を開始しましょう。 App.jsファイルでは、メインのAngularモジュールにUI-Routerに依存関係を追加する必要があります。

angular.module('app', ['ui.router'])

ルートを構(gòu)成します

完了後、アプリケーションの構(gòu)成オブジェクトの構(gòu)成を続けることができます。ここでは、$stateProviderと$urlRouterProviderに対処するため、構(gòu)成オブジェクトを使用して使用する必要があります。

次に、ホームページ狀態(tài)のURLを$urlRouterProvider.otherwise()に渡して、デフォルトでアプリケーションをマッピングするようにしたいと考えています。その後、$stateProviderを使用する必要があります。これは、このチュートリアルの殘りの部分で対処するものになります。 $stateProviderは、開発者がアプリケーションをルーティングするときに使用できるU(xiǎn)Iルーターによって提供されるツールです。ステータスは、アプリケーションの全體的なUIの「位置」とナビゲーションの側(cè)面に対応します。ステータスは、その場(chǎng)所とその機(jī)能のUIについて説明します。 NgrouteがRouteProviderを使用するのと同じように機(jī)能します。

以下は、現(xiàn)時(shí)點(diǎn)でapp.jsファイルがどのように見えるかです。 urlRouterProviderを構(gòu)成した後、$stateProviderを使用して、アプリケーションの異なる狀態(tài)を定義します。この例では、Homeと呼ばれる狀態(tài)を定義し、URLのみを構(gòu)成します。

angular.module('app', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
      .state('home', {
        url: '/'
      });
    }
  ]);

オブジェクトを表示

ベースフレームワークをセットアップしたので、$stateProvider內(nèi)でviewsオブジェクトを定義する必要があります。ホームステートのURLに従う必要があります。このオブジェクトでは、ビューの名前とテンプレートパスを定義します。ここでは、コントローラーのようなものを定義することもできます。

次に、最初に親狀態(tài)を指す名前のないビューを作成する必要があります。この名前のないビューのtemplateUrlは、2つを根本的にリンクします。これは相対命名と呼ばれ、Angularに、この名前のないビューをindex.htmlファイルに<div ui-view="">に挿入するように指示します。これで、コードは以下にapp.jsをコピーする必要があります。

angular.module('app', ['ui.router'])

ご覧のとおり、名前のないビューはmain.htmlに解決します。これは以下のコードに似ているはずです。

angular.module('app', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
      .state('home', {
        url: '/'
      });
    }
  ]);

main.htmlファイルには、NAV、ボディ、フッターの3つの名前のビューが含まれています。これらのコンポーネントがホームステートに表示されるためには、絶対的な命名でそれらを定義する必要があります。具體的には、これらのコンポーネントを特定の狀態(tài)にマッピングする必要があることをAngularJSアプリケーションに指示するために、

構(gòu)文を使用する必要があります。これは、ViewName@Statename Syntaxに従い、@Absoluteまたは特定の狀態(tài)から名前付きビューを使用するようにアプリケーションに指示します。相対的な名前と絶対名の詳細(xì)については、こちらをご覧ください。

@homeが設(shè)定オブジェクトで使用されており、Angularが名前付きのビューがホームステートを指していることを確認(rèn)することがわかります。これらの絶対的な名前が存在しない場(chǎng)合、アプリケーションはこれらの名前のビューをどこで見つけるかを知りません。つまり、以下を確認(rèn)して、アプリケーションのルーティング方法を確認(rèn)してください。

angular.module('app', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
        .state('home', {
          url: '/',
          views: {
            '': { 
              templateUrl: './templates/main.html' 
            },
          }
        });
     }
   ]);

（Codepenデモンストレーションをここに挿入する必要があります）

なぜこれが素晴らしいのか

前に言ったように、絶対的な命名により、コードが非常にモジュール化されます。このチュートリアルでは、すべてのビューをテンプレートフォルダーに入れました。ただし、さらに一歩進(jìn)んで、アプリケーションのさまざまなビュー用のフォルダーを作成できます。これにより、アプリケーション全體や將來のプロジェクトでテンプレートを再利用できます！ UIルーターライブラリにより、特定のビューのヘッダーやフッターなど、Webアプリケーションのさまざまなコンポーネントを非常に簡(jiǎn)単に使用できます。これにより、さまざまなプロジェクトでのコードの再利用が簡(jiǎn)単になり、確かに時(shí)間を節(jié)約できます。

結(jié)論

より複雑で高レベルのネストに絶対的な名前を使用できます。これは単なる例です！それにもかかわらず、UIルーターが達(dá)成できることのいくつかをより深く理解していることを願(yuàn)っています。アントニオ?モラレスによるこの記事では、絶対命名と相対的な命名、サブステート、およびAngularのUIルーターライブラリのその他の側(cè)面の違いを説明しています。いつものように、このチュートリアルについて質(zhì)問がある場(chǎng)合はお知らせください。答えたいです。

Angular UIルーターと名前付きビューを使用したモジュラーコードの書き込みに関する

Angular UIルーターとは何ですか？標(biāo)準(zhǔn)の角度ルーターとどのように違いますか？

Angular UIルーターは、標(biāo)準(zhǔn)の角度ルーターにはない機(jī)能を提供するAngularJSの柔軟なルーティングフレームワークです。ネストされたビューと複數(shù)の名前のビューを可能にしますが、標(biāo)準(zhǔn)の角度ルーターはURLごとに1つのビューのみをサポートします。これにより、Angular UIルーターは、複雑で大規(guī)模なアプリケーションを構(gòu)築するための強(qiáng)力なツールになります。

私のプロジェクトでAngular UIルーターをセットアップする方法は？

Angular UIルーターをセットアップするには、最初にHTMLファイルにAngular UIルータースクリプトを含める必要があります。次に、AngularJSアプリケーションのモジュール依存関係として「UI.Router」を追加する必要があります。その後、$stateProviderを使用してステータスを構(gòu)成し、$urlRouterProviderを使用してデフォルトステータスを設(shè)定できます。

Angular UIルーターの名前付きビューは何ですか？それらをどのように使用しますか？

名前ビューは、角度のUIルーターの機(jī)能で、名前をビューに割り當(dāng)てることができます。これにより、URLごとに複數(shù)のビューを使用できます。これは、複雑なアプリケーションで非常に役立ちます。名前付きビューを使用するには、HTMLファイルに「UI-View」ディレクティブを含めて名前を割り當(dāng)てる必要があります。その後、この名前を狀態(tài)構(gòu)成で參照できます。

角度UIルーターの狀態(tài)間をナビゲートする方法は？

$state.go()メソッドを使用して、Angular UIルーターの狀態(tài)間をナビゲートできます。このメソッドは、狀態(tài)の名前をパラメーターとして受け取り、オプションで狀態(tài)のパラメーターオブジェクトをパラメーターとして使用します。 HTMLファイルのUI-SREFディレクティブを使用して、狀態(tài)へのリンクを作成することもできます。

角度UIルーターの狀態(tài)にパラメーターを渡す方法は？

狀態(tài)構(gòu)成にそれらを含めることにより、角度UIルーターの狀態(tài)にパラメーターを渡すことができます。その後、$stateParamsサービスを使用して、コントローラー內(nèi)のこれらのパラメーターにアクセスできます。

角度UIルーターの狀態(tài)の変化に対処する方法は？

$stateChangeStartイベントを使用して、Angular UIルーターの狀態(tài)の変化を処理できます。これらのイベントは$stateChangeSuccessで放送されており、コントローラーで聴くことができます。 $rootScope

角度UIルーターで狀態(tài)をアクティブにする前にデータを解析する方法は？

ステータス構(gòu)成の

プロパティを使用して、Angular UIルーターの狀態(tài)をアクティブにする前にデータを解析できます。このプロパティは、狀態(tài)がアクティブになる前に解析する必要がある依存関係を定義するオブジェクトです。 resolve

Angular UIルーターのエラーを処理する方法は？

イベントを使用して、Angular UIルーターのエラーを処理できます。このイベントは$stateChangeErrorで放送され、コントローラーで聴くことができます。 $rootScope

Angular UIルーターでネストされたビューを使用する方法は？

HTMLファイルに「UI-View」ディレクティブを含めて名前を割り當(dāng)てることにより、Angular UIルーターでネストされたビューを使用できます。その後、この名前を狀態(tài)構(gòu)成で參照できます。

Angular UIルーターで複數(shù)の名前のビューを使用する方法は？

HTMLファイルに「UIView」ディレクティブを含めて別の名前を割り當(dāng)てることにより、Angular UIルーターで複數(shù)の名前のビューを使用できます。その後、これらの名前を狀態(tài)構(gòu)成で參照できます。

以上がAngular UI-Routerと名前付きビューでモジュラーコードを書き込む方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。