您好,登錄后才能下訂單哦!
這篇文章主要介紹Angular如何實(shí)現(xiàn)組件化管理,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
具體如下:
在做sass產(chǎn)品頁(yè)面的時(shí)候,往往每個(gè)頁(yè)面的header和footer都是一樣的,還有最近我做的頁(yè)面,類(lèi)似datetimepicker這種組件,其實(shí)都是可以復(fù)用的代碼,所以如果能把這些公用的UI組件提取出來(lái),對(duì)于維護(hù)就會(huì)方便很多啦??!
angular框架就支持這種組件化管理,不過(guò)也有優(yōu)缺點(diǎn),我先來(lái)說(shuō)實(shí)現(xiàn)方法哈!
index.html:沒(méi)有用到路由,所以js都是src生引進(jìn)來(lái)的
<head> <title>template模塊化</title> <script type="text/javascript" src="js/lib/jquery.min.js"></script> <script type="text/javascript" src="js/lib/angular.min.js"></script> <script type="text/javascript" src="js/angular-util.js"></script> <script type="text/javascript" src="js/header.js"></script> <!-- 單頁(yè)加載 --> <script type="text/javascript" src="js/index.js"></script> </head> <body ng-app="frameApp" ng-controller="frameCtrl"> <header frame-header></header> <div ng-click="a1()">click</div> <div>{{ default }}</div> </body>
header.js:用閉包封裝了header組件指向template模板,這里面的A指的是上面html里frame-header的屬性,在這里面的link還可以調(diào)用當(dāng)前作用域內(nèi)的方法
(function () { var header = angular.module("header",[]); header.directive('frameHeader',function(){ return { restrice: 'A', templateUrl: 'template.html', replace: false, link: function ($scope, iElm, iAttrs) { $scope.navigateTo = function(){ console.log($scope.aa) } } } }); })();
header.html:模板部分,我簡(jiǎn)單的寫(xiě)了個(gè)導(dǎo)航
<ul> <li ng-click="navigateTo('index')"><a href="index.html" rel="external nofollow" >導(dǎo)航1</a></li> <li><a href="page1.html" rel="external nofollow" >導(dǎo)航2</a></li> <li>導(dǎo)航3</li> <li>導(dǎo)航4</li> </ul>
index.js:引入header模塊
var myApp = angular.module("frameApp",['utilModule','header']); myApp.controller('frameCtrl', ['$scope','utilService', function($scope,utilService){ $scope.aa = 'yyyyyyyyyyy' $scope.a1 = function(){ utilService.lemon() }; $scope.default = 'this is default' }]);
這樣一來(lái),大功告成啦就!每個(gè)頁(yè)面只要<header frame-header></header>
這個(gè)標(biāo)簽,就能引入頭部導(dǎo)航了!
不過(guò)這種組件化的引入方式,我個(gè)人并不推薦使用在引入header和footer,因?yàn)檫@樣的話(huà),相當(dāng)于每個(gè)頁(yè)面都會(huì)加載一遍templat.html很影響速度,我建議,在引入datetimepicker這樣的組件的時(shí)候在使用!因?yàn)檫@種小組件是按需加載的,用得著再加載,不會(huì)影響頁(yè)面響應(yīng)效率。
以上是“Angular如何實(shí)現(xiàn)組件化管理”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。