AngularJS チュートリアル #16 - ビューとルート

目次

1. はじめに
2. ビューとルーティングの概要
3. ビューの作成と配置
4. ホームビューの作成
5. ディレクトリビューの作成
6. AngularJSのルーティングの設定
7. その他のページへのリダイレクト
8. AngularJSのURLについて
9. ヘッダーのリンクの設定
10. まとめ

はじめに

「ようこそ、16番目のAngularJSチュートリアルへ！このビデオでは、ビューとルーティングについて話をしていきます。これまでのアプリケーションでは、単一のビューしか持っていませんでしたが、アプリケーションが大きくなると、複数のビューが必要になることが通常です。たとえば、ホームビューやリストビュー、お問い合わせビュー、アバウトビューなどがあります。AngularJSは、シングルページアプリケーションの開発に主に使用されるため、リンクをクリックしたときに別のページに移動するのではなく、異なるビューをリクエストし、それをコンテンツエリアに表示します。例を通じて、これらの概念をより理解していきましょう。」

ビューとルーティングの概要

アプリケーションが複数のビューを持つようになると、それぞれのビューを個別のファイルに分離する必要があります。これを行うために、ビューを格納するための新しいフォルダを作成し、各ビューを個別のファイルとして保存します。その後、ルーティングを設定して、各ビューが適切に表示されるようにします。ルーティングとは、特定のURLが要求されたときにどのビューを表示するかを決定する仕組みです。

ビューの作成と配置

まず、ビューを作成し、適切な場所に配置する必要があります。新しいフォルダを作成し、その中にビューファイルを保存します。たとえば、"views"という名前のフォルダを作成し、その中に"home.html"というファイルを保存します。同様に、"directory.html"という名前のファイルも作成します。

ホームビューの作成

ホームビューは、AngularJSのアプリケーションの最初のページとして表示されるビューです。"home.html"ファイルに次のコードを追加します。

<h1>ホームページ</h1>

これで、ホームビューが作成されました。

ディレクトリビューの作成

ディレクトリビューは、"リストビュー"として知られており、アプリケーションの主要なコンテンツを表示します。"directory.html"ファイルに次のコードを追加します。

<div>
    <h1>ニンジャのリスト</h1>
    <!-- ニンジャのリストを表示するコードをここに追加 -->
</div>

これで、ディレクトリビューが作成されました。

AngularJSのルーティングの設定

ルーティングを設定する前に、AngularJSのルーティング機能を利用するために、依存関係を注入する必要があります。これを行うために、"angular-route.min.js"ファイルをダウンロードし、アプリケーションにリンクする必要があります。ダウンロードしたファイルをプロジェクトフォルダに保存し、次のコードを追加します。

<script src="angular-route.min.js"></script>

次に、ルーティングの設定を行います。これは、アプリケーションの設定ファイルで行います。次のようなコードを追加します。

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'views/home.html'
        })
        .when('/directory', {
            templateUrl: 'views/directory.html',
            controller: 'NinjaController'
        })
        .otherwise({
            redirectTo: '/home'
        });
}]);

上記のコードでは、$routeProviderオブジェクトを使用して、異なるURLに対してどのビューを表示するかを指定しています。たとえば、/homeというURLに対してはホームビューを表示し、/directoryというURLに対してはディレクトリビューを表示しています。

その他のページへのリダイレクト

アプリケーションで定義されていないURLにアクセスした場合、AngularJSはotherwiseメソッドで指定したURLにリダイレクトします。上記の例では、/homeにリダイレクトされます。この設定を追加することで、アプリケーションの他のページへのリダイレクトが自動的に行われます。

AngularJSのURLについて

AngularJSのURLには、ハッシュ記号(#)が含まれています。これは、AngularJSのルーティング機能が正しく動作するための仕組みです。ハッシュ記号の後には、実際のURLが続きます。たとえば、/#/homeはホームページを表し、/#/directoryはディレクトリを表します。このURL形式は、AngularJSの特徴であり、他のルーティング機能との互換性があります。

ヘッダーのリンクの設定

ヘッダーには、ホームリンクとディレクトリリンクがあります。これらのリンクを設定するために、次のようなコードを追加します。

<ul>
    <li><a href="#/home">ホーム</a></li>
    <li><a href="#/directory">ディレクトリ</a></li>
</ul>

上記のコードでは、ホームリンクは#/homeにリンクし、ディレクトリリンクは#/directoryにリンクします。これにより、ヘッダーから各ページに移動することができます。

まとめ

このチュートリアルでは、AngularJSのビューとルーティングについて学びました。ビューとは、アプリケーションの画面の一部であり、ルーティングとは各ビューを表示するための仕組みです。ビューを作成し、ルーティングを設定することで、アプリケーションのユーザーエクスペリエンスを向上させることができます。ご質問がある場合は、お気軽にコメントしてください。次のチュートリアルでお会いしましょう！

ハイライト

• AngularJSを使用したビューとルーティングの設定方法の概要
• ビューの作成と配置方法
• ホームビューおよびディレクトリビューの作成方法
• ソースコード上でのAngularJSのルーティングの設定方法
• 他のページへのリダイレクトの設定方法
• AngularJSのURL形式とハッシュ記号の役割
• ヘッダーリンクの設定方法