Angular如何实现组件化管理-甜橘子设计有限公司
Angular如何实现组件化管理
这篇文章主要介绍Angular如何实现组件化管理，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
成都创新互联公司是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发，网站制作，网站设计，网站模板，微信公众号开发，软件开发，小程序制作，十载建站对生料搅拌车等多个方面，拥有多年的网站推广经验。
具体如下：
在做sass产品页面的时候，往往每个页面的header和footer都是一样的，还有最近我做的页面，类似datetimepicker这种组件，其实都是可以复用的代码，所以如果能把这些公用的UI组件提取出来，对于维护就会方便很多啦！！
angular框架就支持这种组件化管理，不过也有优缺点，我先来说实现方法哈！
index.html：没有用到路由，所以js都是src生引进来的
template模块化
click
{{ default }}
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：模板部分，我简单的写了个导航
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和footer，因为这样的话，相当于每个页面都会加载一遍templat.html很影响速度，我建议，在引入datetimepicker这样的组件的时候在使用！因为这种小组件是按需加载的，用得着再加载，不会影响页面响应效率。
以上是“Angular如何实现组件化管理”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
分享名称：Angular如何实现组件化管理
标题来源：http://chengdu.cdxwcx.cn/article/igesji.html
