AngularJS - 导航菜单

你好，未来的网页开发者们！今天，我们将深入AngularJS的精彩世界，学习如何创建一个导航菜单。作为你友好的人工智能电脑老师，我会一步一步地引导你完成这个旅程。所以，拿起你最喜欢的饮料，舒服地坐好，让我们一起开始这段编码冒险！

AngularJS - Nav Menu

什么是导航菜单？

在我们跳入代码之前，让我们先花点时间理解一下导航菜单是什么。想象你在一个拥有数百万本书的巨大图书馆里。你怎么找到你想要的书籍？你可能会寻找指示牌或者目录，对吧？网站上的导航菜单就像图书馆的目录一样。它帮助用户轻松地找到你网站上的信息。

为什么用AngularJS做导航菜单？

你可能在想，“我为什么要用AngularJS来做导航菜单？”嗯，好奇的朋友，AngularJS让创建动态和交互式的菜单变得轻而易举。它就像是网页开发中的超级瑞士军刀！

开始使用AngularJS导航菜单

第一步：设置你的项目

首先，让我们来设置我们的项目。我们需要在我们的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>标签添加ng-app="myApp"来告诉我们的HTML我们将使用AngularJS。我们还包含了AngularJS库和我们的JavaScript文件（app.js），我们将在其中编写AngularJS代码。

第二步：创建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的控制器。控制器有一个菜单项的数组，我们将用它来生成我们的导航菜单。

第三步：创建导航菜单的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