日本語

AngularJS チュートリアル

AngularJS アプリケーション

AngularJS - ナビメニュー

こんにちは、未来のウェブ開発者たち！今日は、AngularJSの興味深い世界に飛び込み、ナビゲーションメニューの作成方法を学びます。あなたの近所の親切なコンピュータ先生として、私はこの旅をステップバイステップでガイドします。まずは、お気に入りの飲み物を用意して、リラックスし、一緒にこのコーディング冒険に乗り出しましょう！

AngularJS - Nav Menu

ナビメニューとは？

コードに取りかかる前に、ナビメニューの意味を理解するために少し時間を取ります。あなたが百万冊の本がある大きな図書館にいると想像してください。望む本を見つけるにはどうしますか？おそらく看板やディレクトリを探すでしょう。ウェブサイト上のナビゲーションメニューは、その図書館のディレクトリと同じです。ユーザーがウェブサイトを簡単に巡ることができるようにサポートします。

ナビメニュにAngularJSを使用する理由

「なぜ私のナビメニュにAngularJSを使用するべきか？」と疑問に思うかもしれません。そうですね、AngularJSは動的でインタラクティブなメニューを作成するのが簡単にできます。ウェブ開発におけるスーパーパワーのスイスアーミーナイフのようなものです！

AngularJSナビメニュの始め方

ステップ1：プロジェクトの設定

まず第一に、プロジェクトを設定しましょう。私たちにはAngularJSをHTMLファイルに含める必要があります。以下のようにします：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>私のAngularJSナビメニュ</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- コンテンツはここに配置されます -->
<script src="app.js"></script>
</body>
</html>

このコードでは、私たちがAngularJSを使用していることをHTMLに伝えるために、ng-app="myApp"を<html>タグに追加しています。また、AngularJSライブラリと私たちのJavaScriptファイル（app.js）を含めています。

ステップ2：AngularJSモジュールとコントローラーの作成

次に、AngularJSモジュールとコントローラーを作成します。app.jsファイルに以下のコードを追加します：

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

app.controller('NavController', function($scope) {
$scope.menuItems = [
{ name: 'Home', url: '#/' },
{ name: 'About', url: '#/about' },
{ name: 'Contact', url: '#/contact' }
];
});

ここでは、AngularJSモジュールmyAppとコントローラーNavControllerを作成しています。コントローラーにはメニューアイテムの配列があります。

ステップ3：ナビメニュのHTML作成

次に、ナビメニュのHTMLを追加します。HTMLファイルを以下のように更新します：

<body ng-controller="NavController">
<nav>
<ul>
<li ng-repeat="item in menuItems">
<a href="{{item.url}}">{{item.name}}</a>
</li>
</ul>
</nav>

<script src="app.js"></script>
</body>

このコードでは、ng-controllerディレクティブを使用してAngularJSにNavControllerを使用するように指示しています。また、ng-repeatディレクティブを使用してメニューアイテムをループし、各アイテムに対してリストアイテムを作成しています。

高度な機能

メニューアイテムにアクティブステートを追加

メニューアイテムにアクティブステートを追加して、メニューより一段と豪華にしましょう。コントローラーをapp.jsで更新します：

app.controller('NavController', function($scope, $location) {
$scope.menuItems = [
{ name: 'Home', url: '#/' },
{ name: 'About', url: '#/about' },
{ name: 'Contact', url: '#/contact' }
];

$scope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
});

HTMLも更新します：

<li ng-repeat="item in menuItems" ng-class="{ active: isActive(item.url) }">
<a href="{{item.url}}">{{item.name}}</a>
</li>

今では、現在のページのメニューアイテムに「active」クラスが適用されます。

ドロップダウンメニュの作成

さらに一歩進めて、ドロップダウンメニュを追加します。コントローラーを更新します：

$scope.menuItems = [
{ name: 'Home', url: '#/' },
{
name: 'Services',
url: '#/services',
subItems: [
{ name: 'Web Design', url: '#/services/web-design' },
{ name: 'SEO', url: '#/services/seo' }
]
},
{ name: 'Contact', url: '#/contact' }
];

HTMLも更新します：

<nav>
<ul>
<li ng-repeat="item in menuItems" ng-class="{ active: isActive(item.url) }">
<a href="{{item.url}}">{{item.name}}</a>
<ul ng-if="item.subItems">
<li ng-repeat="subItem in item.subItems">
<a href="{{subItem.url}}">{{subItem.name}}</a>
</li>
</ul>
</li>
</ul>
</nav>

結論

そして、皆さん！あなたは刚刚AngularJSを使用して動的でインタラクティブなナビゲーションメニュを作成しました。練習は完璧を生むので、さまざまなスタイルや機能を試してみてください。

以下に、私たちが使用した主なAngularJSディレクティブの表を示します：

ディレクティブ 目的
ng-app AngularJSアプリケーションのルート要素を定義します
ng-controller HTML要素に対して使用するコントローラーを指定します
ng-repeat HTML要素を指定された回数繰り返します
ng-class HTML要素に動的に一つまたは複数のCSSクラスをバインドします
ng-if 条件に基づいてHTML要素をレンダリングします

引き続きコーディングを続け、学び続け、そして最も重要なのは、楽しむことです！次回まで、あなたの近所の親切なコンピュータ先生がお別れです。ハッピーコーディング！

Credits: Image by storyset

前のチュートリアル:
AngularJS - インラインアプリケーション
次のチュートリアル:
AngularJS - 切替メニュー