富贵资源网 Design By www.hznty.com
本文实例分析了Angular组件化管理实现方法。分享给大家供大家参考，具体如下：
在做sass产品页面的时候，往往每个页面的header和footer都是一样的，还有最近我做的页面，类似datetimepicker这种组件，其实都是可以复用的代码，所以如果能把这些公用的UI组件提取出来，对于维护就会方便很多啦！！
angular框架就支持这种组件化管理，不过也有优缺点，我先来说实现方法哈！
index.html：没有用到路由，所以js都是src生引进来的
<head> <title>template模块化</title> <script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.min.js">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程序设计有所帮助。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...