溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹Angular如何實現組件化管理，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
具體如下：
在做sass產品頁面的時候，往往每個頁面的header和footer都是一樣的，還有最近我做的頁面，類似datetimepicker這種組件，其實都是可以復用的代碼，所以如果能把這些公用的UI組件提取出來，對于維護就會方便很多啦！！
angular框架就支持這種組件化管理，不過也有優缺點，我先來說實現方法哈！
index.html：沒有用到路由，所以js都是src生引進來的
<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>
<!-- 單頁加載 -->
<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還可以調用當前作用域內的方法
(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：模板部分，我簡單的寫了個導航
<ul>
<li ng-click="navigateTo('index')"><a href="index.html" rel="external nofollow" >導航1</a></li>
<li><a href="page1.html" rel="external nofollow" >導航2</a></li>
<li>導航3</li>
<li>導航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'
}]);這樣一來，大功告成啦就！每個頁面只要<header frame-header></header>這個標簽，就能引入頭部導航了！
不過這種組件化的引入方式，我個人并不推薦使用在引入header和footer，因為這樣的話，相當于每個頁面都會加載一遍templat.html很影響速度，我建議，在引入datetimepicker這樣的組件的時候在使用！因為這種小組件是按需加載的，用得著再加載，不會影響頁面響應效率。
以上是“Angular如何實現組件化管理”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
