コアポイント

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

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

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

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

初心者

このデモを構(gòu)成するファイルを閲覧するために少し時間を取ってください（上記の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は、開発者がアプリケーションをルーティングするときに使用できるUIルーターによって提供されるツールです。ステータスは、アプリケーションの全體的なUIの「位置」とナビゲーションの側(cè)面に対応します。ステータスは、その場所とその機能のUIについて説明します。 NgrouteがRouteProviderを使用するのと同じように機能します。

以下は、現(xià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)から名前付きビューを使用するようにアプリケーションに指示します。相対的な名前と絶対名の詳細については、こちらをご覧ください。

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

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

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

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

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

結(jié)論

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

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

Angular UIルーターとは何ですか？標準の角度ルーターとどのように違いますか？

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

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

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

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

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

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

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

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