AngularJS - 导航菜單

你好，未來的網頁開發者們！今天，我們將進入AngularJS的精彩世界，並學習如何創建一個導航菜單。作為你們親切的鄰居電腦老師，我會帶領你們一步一步地走過這個旅程。所以，拿起你們最喜歡的飲料，放鬆身心，讓我們一起踏上這次編碼冒險吧！

AngularJS - Nav Menu

什麼是導航菜單？

在我們投入代碼之前，讓我們先來了解什麼是導航菜單。想像你在一個藏有數百萬本書的巨大圖書館裡。你會如何找到你想要的書？你可能會尋找標誌或目錄，對吧？網站上的導航菜單就像那個圖書館目錄一樣。它幫助用戶輕鬆地在你的網站中找到路徑。

為什麼要用AngularJS來創建導航菜單？

你可能會好奇，“我為什麼應該用AngularJS來創建我的導航菜單？” 嗨，好奇的朋友，AngularJS讓創建動態和互動菜單變得非常簡單。這就像擁有一把超能力的瑞士軍刀一樣！

AngularJS導航菜單的起步

步驟1：設定你的專案

首先，讓我們設定我們的專案。我們需要在HTML文件中引入AngularJS。以下是如何操作的：

<!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>

在這段代碼中，我們告訴HTML我們正在使用AngularJS，方法是在<html>標籤中加入ng-app="myApp"。我們還引入了AngularJS庫和我們自己的JavaScript文件（app.js），我們將在其中編寫AngularJS代碼。

步驟2：創建AngularJS模組和控制器

現在，讓我們創建我們的AngularJS模組和控制器。在app.js文件中，加入以下代碼：

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

app.controller('NavController', function($scope) {
$scope.menuItems = [
{ name: '首頁', url: '#/' },
{ name: '關於', url: '#/about' },
{ name: '聯繫', url: '#/contact' }
];
});

在這裡，我們創建了一個名為myApp的AngularJS模組和一個名為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: '首頁', url: '#/' },
{ name: '關於', url: '#/about' },
{ name: '聯繫', 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: '首頁', url: '#/' },
{
name: '服務',
url: '#/services',
subItems: [
{ name: '網頁設計', url: '#/services/web-design' },
{ name: 'SEO', url: '#/services/seo' }
]
},
{ name: '聯繫', 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	動態綁定一個或多個CSS類到HTML元素
ng-if	根據條件渲染HTML元素

持續編碼，持續學習，最重要的是，持續享受樂趣！下次見，這裡是你們親切的鄰居電腦老師，祝編程愉快！

Credits: Image by storyset