本文将介绍如何用AngularJS构建一个强大的web前端系统。Angularjs是谷歌团队开发的一个优秀的web前端框架。在目前这么多的web框架下，AngularJS可以鹤立鸡群，在架构设计、双向数据绑定、依赖注入、指令、MVC、模板等方面都有过人之处。Angular.js创新性地将后端技术融入前端开发，一扫jQuery的光芒。使用angularjs就像写后台代码一样，更加标准化、结构化、可控化。

本文将介绍如何实现多级导航菜单。

目录

1.静态多级菜单的实现

2.动态多级菜单的实现

1.静态多级菜单的实现

要实现多级菜单，要分两步走。第一步是通过纯静态的HTML代码实现静态菜单的功能。在第二步中，它由Angluarjs动态实现。最后将数据从程序中分离出来，通过Ajax加载多级菜单数据。

让我们从静态多级菜单开始。六级导航菜单是什么样子的？

如上图所示，我们定义了一些功能需求。

一级菜单是导航栏上的文本。

当触发1级菜单导航事件时，显示2级菜单导航，它位于1级菜单的正下方。

当触发2级菜单导航事件时，3级菜单导航显示在2级菜单的右侧。

当触发3级菜单导航事件时，4级菜单导航显示在3级菜单的右侧。

以此类推，不管下级菜单显示出界。

继续上面的项目环境，并添加一个新的HTML文件： page3.html

~ vi D: 工作区 JavaScript angular-nav bar page 3 . html！doctype html html lang=' zh-cn ' head meta charset=' utf-8 ' Title多级导航菜单/Title meta name=' description ' content='多级导航菜单' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' meta name=' viewport ' content=' width=device-width， initial-scale=1.0 ' meta name=' fragment ' content=/link rel='样式表' href='/bower _ components/bootstrap/dist/CSS/bootstrap . min . CSS ' rel='外部nofollow' rel='外部nofollow' link rel='样式表' href='/css/main.css' rel='外部no follow '/head dy ng-app=' page 2 ' div class=' container ' div class=' row ' ng-controller=' nav barctrl