Angular组件化管理实现方法分析
更新时间：2017年03月17日 11:21:24 作者：lemon678
这篇文章主要介绍了Angular组件化管理实现方法,结合具体实例分析了Angular模块组件化管理以提高代码复用性的实现方法与相关操作技巧,需要的朋友可以参考下
本文实例分析了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这样的组件的时候在使用！因为这种小组件是按需加载的，用得着再加载，不会影响页面响应效率。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
这篇文章主要和大家一起探索模拟angular的双向绑定，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了AngularJS 实现购物车全选反选功能,需要的朋友可以参考下2017-10-10
使用oclazyload懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.怎么回事呢？下面小编给大家带来了angular懒加载机制刷新后无法回退的快速解决方法，非常不错，感兴趣的朋友参考下2016-08-08
详解angularjs获取元素以及angular.element()用法
本篇文章主要介绍了详解angularjs获取元素以及angular.element()用法 ，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
今天小编就为大家分享一篇对angular4子路由&辅助路由详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
在html规范里面,它定义了非常多的标签,在这些标签里面,相同标签之间的嵌套,不同标签之间的嵌套,是十分常见,在Angular里面,我们可以通过自定义标签的方式引用组件,这里的标签能否像原生的html标签一样,来嵌入html标签,或者嵌套其他组件标签呢?本文将介绍投影的作用。2021-05-05
这篇文章主要介绍了Angular 向组件传递模板的两种方法,第一种方式<ng-content>第二种方式是NgTemplateOutlet 指令及各种使用方式介绍,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了AngularJS API之copy深拷贝详解及实例的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了AngularJS使用ng-repeat指令实现下拉框的相关资料,非常不错，感兴趣的朋友一起看下吧，需要的朋友可以参考下2016-08-08
本篇文章主要介绍了详解angular2封装material2对话框组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
最新评论