AngularJS+Bootstrap3多級(jí)導(dǎo)航菜單的實(shí)現(xiàn)代碼
更新時(shí)間：2017年08月16日 11:18:23 作者：灰暗角落里的琴
將介紹如何用AngularJS構(gòu)建一個(gè)強(qiáng)大的web前端系統(tǒng)。文章介紹如何實(shí)現(xiàn)多限級(jí)導(dǎo)航菜單。本文圖文并茂給大家介紹的非常詳細(xì)，感興趣的朋友參考下吧
將介紹如何用AngularJS構(gòu)建一個(gè)強(qiáng)大的web前端系統(tǒng)。angularjs是由Google團(tuán)隊(duì)開發(fā)的一款非常優(yōu)秀web前端框架。在當(dāng)前如此多的web框架下，AngularJS能脫穎而出，從架構(gòu)設(shè)計(jì)上就高人一等，雙向數(shù)據(jù)綁定，依賴注入，指令，MVC，模板。Angular.js創(chuàng)新地把后臺(tái)技術(shù)融入前端開發(fā)，掃去jQuery一度的光芒。用angularjs就像寫后臺(tái)代碼，更規(guī)范，更結(jié)構(gòu)化，更可控。
本文將介紹如何實(shí)現(xiàn)多限級(jí)導(dǎo)航菜單。
目錄
1.靜態(tài)多級(jí)菜單實(shí)現(xiàn)
2.動(dòng)態(tài)多級(jí)菜單實(shí)現(xiàn)
1. 靜態(tài)多級(jí)菜單實(shí)現(xiàn)
要實(shí)現(xiàn)多級(jí)菜單，我們要分兩步走，第一步就是把靜態(tài)菜單的功能實(shí)現(xiàn)，通過(guò)純靜態(tài)的HTML代碼完成。第二步，通過(guò)Angluarjs進(jìn)行動(dòng)態(tài)實(shí)現(xiàn)，最后把數(shù)據(jù)和程序分離，通過(guò)Ajax加載多級(jí)菜單數(shù)據(jù)。
我們先從靜態(tài)多級(jí)菜單開始動(dòng)手，一個(gè)六級(jí)導(dǎo)航菜單是什么樣子呢？
如上圖所示，我們定義一些功能需求。
1級(jí)菜單是導(dǎo)航條上的文字。
當(dāng)1級(jí)菜單導(dǎo)航事件被觸發(fā)，顯示2級(jí)菜單導(dǎo)航，在1級(jí)菜單的正下方顯示。
當(dāng)2級(jí)菜單導(dǎo)航事件被觸發(fā)，顯示3級(jí)菜單導(dǎo)航，在2級(jí)菜單的右方顯示。
當(dāng)3級(jí)菜單導(dǎo)航事件被觸發(fā)，顯示4級(jí)菜單導(dǎo)航，在3級(jí)菜單的右方顯示。
以此類推，不考慮下級(jí)菜單顯示出界問(wèn)題。
繼續(xù)上文中的項(xiàng)目環(huán)境，增加一個(gè)新HTML文件: page3.html
~ vi D:\workspace\javascript\angular-navbar\page3.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>多級(jí)導(dǎo)航菜單</title>
<meta name="description" content="多級(jí)導(dǎo)航菜單">
<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="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >
<link rel="stylesheet" href="/css/main.css" rel="external nofollow" rel="external nofollow" >
</head>
<body ng-app="page2">
<div class="container">
<div class="row" ng-controller="NavbarCtrl">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >多級(jí)菜單導(dǎo)航</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link</a></li>
<li class="dropdown">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">Multi Level <b class="caret"></b></a>
<ul class="dropdown-menu menu-top">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 1</a></li>
<li class="dropdown-submenu"> <a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 2</a>
</li>
<li class="dropdown-submenu"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More..</a>
<ul class="dropdown-menu">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 3</a>
</li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 3</a>
</li>
<li class="dropdown-submenu"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More..</a>
<ul class="dropdown-menu">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 4</a>
</li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 4</a>
</li>
<li class="dropdown-submenu"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >More..</a>
<ul class="dropdown-menu">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 5</a>
</li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 5</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 2</a>
</li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 2</a>
</li>
</ul>
</li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Level 1</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
新建一個(gè)css文件：main.css
~ vi D:\workspace\javascript\angular-navbar\css\main.css
.dropdown:hover .menu-top {
display: block;
}
.dropdown-submenu{
position:relative;
}
.dropdown-submenu > .dropdown-menu{
top:0;
left:100%;
margin-top:-6px;
margin-left:-1px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu{
display:block;
}
.dropdown-submenu > a:after{
display:block;
content:" ";
float:right;
width:0;
height:0;
border-color:transparent;
border-style:solid;
border-width:5px 0 5px 5px;
border-left-color:#cccccc;
margin-top:5px;
margin-right:-10px;
}
.dropdown-submenu:hover > a:after{
border-left-color:#ffffff;
}
.dropdown-submenu .pull-left{
float:none;
}
.dropdown-submenu.pull-left > .dropdown-menu{
left:-100%;
margin-left:10px;
-webkit-border-radius:6px 0 6px 6px;
-moz-border-radius:6px 0 6px 6px;
border-radius:6px 0 6px 6px;
}
刷新一下網(wǎng)頁(yè)，我們能就看到上面的截圖的效果，代碼參考：http://firdaus.grandexa.com/2013/09/twitter-bootstrap-3-multilevel-dropdown-menu/
通過(guò)HTML和CSS就實(shí)現(xiàn)了多級(jí)菜單的靜態(tài)展示效果，如果導(dǎo)航菜單不是經(jīng)常變化，那么用靜態(tài)的方式，把代碼寫死就可以了。但有一些場(chǎng)景，菜單是需要?jiǎng)討B(tài)生成，比如通過(guò)權(quán)限控制訪問(wèn)鏈接，每個(gè)用戶的權(quán)限不一樣，那么能看到的菜單選項(xiàng)也就不一樣，這個(gè)時(shí)候就需要做成動(dòng)態(tài)的，用程序去控制菜單的加載和展示。
2. 動(dòng)態(tài)多級(jí)菜單實(shí)現(xiàn)
有了靜態(tài)多級(jí)導(dǎo)航菜單的HTML代碼結(jié)構(gòu)，改寫成動(dòng)態(tài)的，其實(shí)也不太復(fù)雜。
我們需要做2件事：
把導(dǎo)航菜單的數(shù)據(jù)結(jié)構(gòu)化存儲(chǔ)，比如 存放到文件 nav.json。
用Angularjs的API加載nav.json數(shù)據(jù)，進(jìn)行展示。
我們先定義一下導(dǎo)航菜單的數(shù)據(jù)格式，以JSON格式定義，每個(gè)菜單項(xiàng)都有3個(gè)屬性字段
label: 導(dǎo)航菜單項(xiàng)顯示的名字。
link: 導(dǎo)航菜單項(xiàng)的跳轉(zhuǎn)鏈接，可以不定義。
children: 導(dǎo)航菜單項(xiàng)的子菜單，循環(huán)對(duì)象存儲(chǔ)。
{
"label": "levelA",
"link": "#",
"children": [
{
"label": "levelB",
"link": "#",
"children": []
}
]
}
下面我們用真實(shí)的數(shù)據(jù)定義導(dǎo)航菜單，以我的金融系統(tǒng)為例。
新建JSON數(shù)據(jù)文件：nav.json。
~ vi D:\workspace\javascript\angular-navbar\js\nav.json
[
{
"label": "債券",
"children": [
{
"label": "可轉(zhuǎn)債",
"children": [
{"label": "可轉(zhuǎn)債溢價(jià)率分析","link":"#"},
{"label": "可轉(zhuǎn)債NS定價(jià)","link":"#"},
{"label": "可轉(zhuǎn)債歸因分析","link":"#"},
{"label": "可轉(zhuǎn)債套利實(shí)時(shí)監(jiān)控","link":"#"}
]
},
{
"label": "信用債",
"children": [
{"label": "交易所債券監(jiān)控","link":"#"}
]
},
{
"label": "利率債","link":"#",
"children": []
},
{
"label": "國(guó)債期貨",
"children": [
{"label": "國(guó)債期貨表現(xiàn)分析","link":"#"},
{"label": "國(guó)債期貨實(shí)時(shí)套利監(jiān)控","link":"#"},
{"label": "IRR歷史時(shí)間序列查詢","link":"#"},
{"label": "IRR實(shí)時(shí)監(jiān)控","link":"#"}
]
}
]
},
{
"label": "股票",
"children": [
{
"label": "基本面分析",
"children": [
{"label": "上市公司基本面數(shù)據(jù)查看","link":"#"}
]
},
{
"label": "量化選股策略",
"children": []
}
]
},
{
"label": "宏觀",
"children": [
{
"label": "宏觀數(shù)據(jù)",
"children": [
{"label": "宏觀數(shù)據(jù)概覽","link":"#"}
]
},
{
"label": "宏觀經(jīng)濟(jì)預(yù)測(cè)",
"children": []
},
{
"label": "宏觀經(jīng)濟(jì)和大類資產(chǎn)表現(xiàn)",
"children": []
}
]
}
]
我們看到這個(gè)導(dǎo)航菜單的數(shù)據(jù)，有3級(jí)，“債券–>可轉(zhuǎn)債–>可轉(zhuǎn)債歸因分析”，那么接下我們就直接實(shí)現(xiàn)對(duì)三級(jí)菜單的編程。創(chuàng)建HTML文件page4.html。
~ vi D:\workspace\javascript\angular-navbar\page4.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>多級(jí)動(dòng)態(tài)導(dǎo)航菜單</title>
<meta name="description" content="多級(jí)動(dòng)態(tài)導(dǎo)航菜單">
<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="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" >
<link rel="stylesheet" href="/css/main.css" rel="external nofollow" rel="external nofollow" >
</head>
<body ng-app="page4">
<div class="container">
<div class="row" ng-controller="NavbarCtrl">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="/" rel="external nofollow" >量化投資平臺(tái)</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li ng-repeat="a1 in navbar" class="dropdown">
<a href="?{{ a1.label }}" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown">{{ a1.label }} <b class="caret"></b></a>
<ul class="dropdown-menu menu-top">
<li ng-repeat="a2 in a1.children" class="dropdown-submenu">
<a tabindex="-1" href="?{{ a2.label }}" rel="external nofollow" >{{ a2.label }}</a>
<ul ng-show="a2.children.length>0" class="dropdown-menu">
<li ng-repeat="a3 in a2.children">
<a href="?{{ a3.label }}" rel="external nofollow" ng-click="go(a3.link)">{{ a3.label }}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>
在Angularjs的控制器文件app.js文件中，增加page4的定義。
var page4 = angular.module('page4', ['ui.bootstrap', 'ngRoute']);
page4.config(['$routeProvider', '$locationProvider', '$sceProvider', function ($routeProvider, $locationProvider, $sceProvider) {
$routeProvider
.when('/', {controller: 'DemoCtrl'})
.otherwise({redirectTo: '/'});
$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
});
查看一下顯示效果，與上面的截圖類似。
文章到這里就結(jié)束了，已經(jīng)實(shí)現(xiàn)了我的功能需求。但這個(gè)話題還有很多可以優(yōu)化的地方，比如實(shí)現(xiàn)無(wú)限級(jí)的導(dǎo)航菜單，菜單的展示樣式替換，展示區(qū)間的控制，鼠標(biāo)動(dòng)作事件，封裝成Angularjs的插件開源項(xiàng)目等。有興趣的同學(xué)，可以我的程序的基礎(chǔ)上繼續(xù)努力，做出優(yōu)秀的開源項(xiàng)目來(lái)。
代碼已上傳到github：https://github.com/bsspirit/angular-navbar，同學(xué)可以根據(jù)需要自行下載，也可以直接通過(guò)命令下載代碼。
git clone https://github.com/bsspirit/angular-navbar.git cd angular-navbar bower install anywhere
總結(jié)
以上所述是小編給大家介紹的AngularJS+Bootstrap3多級(jí)導(dǎo)航菜單的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
使用Angular Cli如何創(chuàng)建Angular私有庫(kù)詳解
這篇文章主要給大家介紹了關(guān)于使用Angular Cli如何創(chuàng)建Angular私有庫(kù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
如何解決手機(jī)瀏覽器頁(yè)面點(diǎn)擊不跳轉(zhuǎn)瀏覽器雙擊放大網(wǎng)頁(yè)
這篇文章主要介紹了如何解決手機(jī)瀏覽器頁(yè)面點(diǎn)擊不跳轉(zhuǎn)瀏覽器雙擊放大網(wǎng)頁(yè)的相關(guān)資料,需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細(xì)了angular forEach方法遍歷源碼，forEach()方法用于遍歷對(duì)象或數(shù)組，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了Angularjs之filter過(guò)濾器的相關(guān)資料,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
Angularjs 動(dòng)態(tài)改變title標(biāo)題(兼容ios)
這篇文章主要介紹了 Angularjs 動(dòng)態(tài)改變title標(biāo)題(兼容ios)的相關(guān)資料,需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了angular6開發(fā)steps步驟條組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
Angular2學(xué)習(xí)筆記——詳解NgModule模塊
這篇文章主要介紹了Angular2學(xué)習(xí)筆記——詳解NgModule模塊,現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
AngularJS實(shí)現(xiàn)ajax請(qǐng)求的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)ajax請(qǐng)求的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)ajax請(qǐng)求的前端界面、ajax交互及后臺(tái)php處理技巧,需要的朋友可以參考下2016-11-11
angular6 利用 ngContentOutlet 實(shí)現(xiàn)組件位置交換(重排)
這篇文章主要介紹了angular6 利用 ngContentOutlet 實(shí)現(xiàn)組件位置交換(重排)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
Ubuntu系統(tǒng)下Angularjs開發(fā)環(huán)境安裝
本文主要介紹 Ubuntu系統(tǒng)下Angularjs開發(fā)環(huán)境安裝，這里詳細(xì)介紹了安裝步驟和注意事項(xiàng)，有在Ubuntu 環(huán)境下開發(fā)的朋友可以參考下2016-09-09