Angular组件化管理实现方法分析

Angular组件化管理实现方法分析

本文实例分析了Angular组件化管理实现方法。分享给大家供大家参考，具体如下：

在做sRVyHefass产品页面的时候，往往每个页面的header和footer都是一样的，还有最近我做的页面，类似datetimepicker这种组件，其实都是可以复用的代码，所以如果能把这些公用的UI组件提取出来，对于维护就会方便很多啦！！

angular框架就支持这种组件化管理，不过也有优缺点，我先来说实现方法哈！

index.html：没有用到路由，所以js都是src生引进来的

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和footerRVyHef，因为这样的话，相当于每个页面都会加载一遍templat.html很影响速度，我建议，在引入datetimepicker这样的组件的时候在使用！因为这种小组件是按需加载的，用得着再加载，不会影响页面响应效率。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。