var page4 = angular.module('page4', ['ui.bootstrap', 'ngRoute']); page4.config(['$routeProvider', '$locationProvider', '$sceProvider', function ($routeProvider, $locationProvider, $sceProvider) { $routeProvider .when('https://www.jb51.net/', {controller: 'DemoCtrl'}) .otherwise({redirectTo: 'https://www.jb51.net/'}); $locationProvider.html5Mode(true); }]); page4.controller('NavbarCtrl', function ($scope,$http,$location) { $http.get("/js/nav.json").success(function(json){ $scope.navbar = json; }); }); page4.controller('DemoCtrl', function () { // nothing });
查看一下显示效果，与上面的截图类似。
文章到这里就结束了，已经实现了我的功能需求。但这个话题还有很多可以优化的地方，比如实现无限级的导航菜单，菜单的展示样式替换，展示区间的控制，鼠标动作事件，封装成Angularjs的插件开源项目等。有兴趣的同学，可以我的程序的基础上继续努力，做出优秀的开源项目来。
代码已上传到github：https://github.com/bsspirit/angular-navbar，同学可以根据需要自行下载，也可以直接通过命令下载代码。
git clone https://github.com/bsspirit/angular-navbar.git cd angular-navbar bower install anywhere
总结
以上所述是小编给大家介绍的AngularJS+Bootstrap3多级导航菜单的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: