AngularJS - Views: A Beginner's Guide

こんにちは、将来のプログラマーたち！今日は、AngularJSのViewsのワクワクする世界に飛び込みます。コードを書いたことがない人も心配しないでください - この旅の親切なガイドとしてお手伝いします。私の教え子たちも同じようにサポートしてきました。コーヒー（またはお好みでティー）を飲みながら、始めましょう！

AngularJS - Views

AngularJSでのViewsとは？

本題に入る前に、AngularJSでのViewsとは何かを理解しましょう。Viewsはアプリケーションの「顔」と考えайте - ユーザーが見て操作するものです。AngularJSでは、Viewsはデータを表示し、ユーザーのアクションに応じるHTMLテンプレートです。

では、AngularJSが提供するViewsを操作するためのツールを見ていきましょう。

ng-viewディレクティブ：動的コンテンツの窓

ng-viewとは？

ng-viewディレクティブはAngularJSアプリケーションの中の特別な窓です。現在のルート（またはURL）に基づいて、ページを再読み込みせずに異なるコンテンツを表示します。クールですね？

ng-viewの使い方

ng-viewを使うのは簡単です。HTMLの要素に追加するだけです。以下は例です：

<div ng-view></div>

これで、このdivが現在のルートに基づいて異なるViewsをロードするコンテナとして動作します。

実世界の例

書店のためのシンプルなウェブサイトを構築するとしましょう。メインページは以下のようになります：

<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>私の素晴らしい書店</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
</head>
<body>
<h1>私の素晴らしい書店へようこそ</h1>
<div ng-view></div>
<script src="app.js"></script>
</body>
</html>

この例では、<div ng-view></div>が書店の異なるページ（書籍リスト、個別の書籍詳細など）を表示する場所になります。

ng-templateディレクティブ：Viewsの蓝图

ng-templateとは？

ng-viewが窓であるなら、ng-templateはその窓の中身の蓝图です。再利用可能なテンプレートを定義し、AngularJSがViewsに使用するものです。

ng-templateの使い方

ng-templateを使うにはIDを指定し、そのIDをルーティング設定で参照します。以下は簡単な例です：

<script type="text/ng-template" id="book-list.html">
<h2>私たちの書籍</h2>
<ul>
<li ng-repeat="book in books">{{book.title}}</li>
</ul>
</script>

このテンプレートは、表示する書籍のリストを定義しています。

$routeProviderサービス：交通コントローラ

$routeProviderとは？

$routeProviderサービスはアプリケーションの交通コントローラです。現在のURLに基づいて表示するViewを決定します。

$routeProviderの使い方

$routeProviderは通常、アプリケーションの設定段階で設定します。以下は例です：

var app = angular.module('bookstoreApp', ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>私たちの書店へようこそ！</h2>'
})
.when('/books', {
templateUrl: 'book-list.html',
controller: 'BookListController'
})
.otherwise({
redirectTo: '/'
});
});

この設定では：

URLが単に'/'の場合、欢迎メッセージを表示します。
URLが'/books'の場合、'book-list.html'テンプレートと'BookListController'を使用します。
他のURLの場合、'/'にリダイレクトします。

完全な例

書店アプリの完全な例を以下に示します：

<!DOCTYPE html>
<html ng-app="bookstoreApp">
<head>
<title>私の素晴らしい書店</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.js"></script>
</head>
<body>
<h1>私の素晴らしい書店へようこそ</h1>
<nav>
<a href="#!">ホーム</a>
<a href="#!books">書籍</a>
</nav>
<div ng-view></div>

<script type="text/ng-template" id="book-list.html">
<h2>私たちの書籍</h2>
<ul>
<li ng-repeat="book in books">{{book.title}} by {{book.author}}</li>
</ul>
</script>

<script>
var app = angular.module('bookstoreApp', ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider
.when('/', {
template: '<h2>私たちの書店へようこそ！</h2><p>素晴らしい書籍のコレクションをご覧ください。</p>'
})
.when('/books', {
templateUrl: 'book-list.html',
controller: 'BookListController'
})
.otherwise({
redirectTo: '/'
});
});

app.controller('BookListController', function($scope) {
$scope.books = [
{title: 'To Kill a Mockingbird', author: 'Harper Lee'},
{title: '1984', author: 'George Orwell'},
{title: 'The Great Gatsby', author: 'F. Scott Fitzgerald'}
];
});
</script>
</body>
</html>

ここで何が起きているのか？

基本的なHTML構造を設定し、Views間のナビゲーションリンクを追加します。
書籍リストのテンプレートをng-templateで定義します。
ルートを$routeProviderで設定します。
書籍リストのデータを提供するコントローラを作成します。

このアプリを実行して「書籍」リンクをクリックすると、ng-viewのdivに書籍リストが表示されます。魔法ですね？

結論

そして、ここまでがAngularJSのViewsへの第一歩です。ng-view、ng-template、そして$routeProviderについて学び、それらがどのようにして動的でシングルページアプリケーションを作成するかを理解しました。

コードを書くことは自転車に乗るのと似ています - 初めは不安かもしれませんが、練習を続けることですぐにスムーズになります。実験を続け、学び続け、そして最も重要なのは、楽しむことです！

ディレクティブ/サービス	目的	使用例
ng-view	現在のViewを表示する場所を定義	`<div ng-view></div>`
ng-template	再利用可能なテンプレートを定義	`<script type="text/ng-template" id="template-name.html">...</script>`
$routeProvider	アプリケーションのルートを設定	`$routeProvider.when('/path', { templateUrl: 'template.html', controller: 'ControllerName' });`

未来のAngularJSマスターたち、快適なコーディングを！

Credits: Image by storyset