Angular UI-Routerと名前付きビューでモジュラーコードを書き込む方法

コアポイント

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

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

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

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

初心者

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

ui-router

ui-routerに依存関係を追加

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

<code class="language-javascript">angular.module('app', ['ui.router'])</code>

ルートを構成します

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

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

以下は、現時点でapp.jsファイルがどのように見えるかです。 urlRouterProviderを構成した後、$stateProviderを使用して、アプリケーションの異なる状態を定義します。この例では、Homeと呼ばれる状態を定義し、URLのみを構成します。

<code class="language-javascript">angular.module('app', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
      .state('home', {
        url: '/'
      });
    }
  ]);</code>

オブジェクトを表示

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

次に、最初に親状態を指す名前のないビューを作成する必要があります。この名前のないビューのtemplateUrlは、2つを根本的にリンクします。これは相対命名と呼ばれ、Angularに、この名前のないビューをindex.htmlファイルに<div ui-view="">に挿入するように指示します。これで、コードは以下にapp.jsをコピーする必要があります。 <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;angular.module('app', ['ui.router'])&lt;/code&gt;</pre> <p>ご覧のとおり、名前のないビューはmain.htmlに解決します。これは以下のコードに似ているはずです。 </p> <pre class="brush:php;toolbar:false">&lt;code class=&quot;language-javascript&quot;&gt;angular.module('app', ['ui.router']) .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('home', { url: '/' }); } ]);&lt;/code&gt;</pre> main.htmlファイルには、NAV、ボディ、フッターの3つの名前のビューが含まれています。これらのコンポーネントがホームステートに表示されるためには、絶対的な命名でそれらを定義する必要があります。具体的には、これらのコンポーネントを特定の状態にマッピングする必要があることをAngularJSアプリケーションに指示するために、<p>構文を使用する必要があります。これは、ViewName@Statename Syntaxに従い、<code>@Absoluteまたは特定の状態から名前付きビューを使用するようにアプリケーションに指示します。相対的な名前と絶対名の詳細については、こちらをご覧ください。

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

<code class="language-javascript">angular.module('app', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
        .state('home', {
          url: '/',
          views: {
            '': { 
              templateUrl: './templates/main.html' 
            },
          }
        });
     }
   ]);</code>

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

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

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

結論

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

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

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

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

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

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

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

名前ビューは、角度のUIルーターの機能で、名前をビューに割り当てることができます。これにより、URLごとに複数のビューを使用できます。これは、複雑なアプリケーションで非常に役立ちます。名前付きビューを使用するには、HTMLファイルに「UI-View」ディレクティブを含めて名前を割り当てる必要があります。その後、この名前を状態構成で参照できます。

角度UIルーターの状態間をナビゲートする方法は？

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

角度UIルーターの状態にパラメーターを渡す方法は？

状態構成にそれらを含めることにより、角度UIルーターの状態にパラメーターを渡すことができます。その後、$stateParamsサービスを使用して、コントローラー内のこれらのパラメーターにアクセスできます。

角度UIルーターの状態の変化に対処する方法は？

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

角度UIルーターで状態をアクティブにする前にデータを解析する方法は？

ステータス構成の

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

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

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

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

HTMLファイルに「UI-View」ディレクティブを含めて名前を割り当てることにより、Angular UIルーターでネストされたビューを使用できます。その後、この名前を状態構成で参照できます。

Angular UIルーターで複数の名前のビューを使用する方法は？

HTMLファイルに「UIView」ディレクティブを含めて別の名前を割り当てることにより、Angular UIルーターで複数の名前のビューを使用できます。その後、これらの名前を状態構成で参照できます。