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 # 组件化 # Angular2利用组件与指令实现图片轮播组件 # 详解angular2封装material2对话框组件 # angular 动态组件类型详解(四种组件类型) # angularjs使用directive实现分页组件的示例 # angular2倒计时组件使用详解 # 基于AngularJS前端云组件最佳实践 # Angularjs 创建可复用组件实例代码 # Angular2开发——组件规划篇 # 都是 # 加载 # 进阶 # 就会 # 也有 # 相关内容 # 还可以 # 就能 # 在这 # 推荐使用 # 感兴趣 # 一遍 # 给大家 # 大功告成 # 写了 # 我做 # 我先 # 能把 # 指的是 # 更多关于

返回目录在线咨询

上一篇：苏州品牌网络营销分类有哪些,苏州城市学院市场营销专业咋样？
下一篇：如何优化GoDaddy网站以提高SEO排名？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求