欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-02-19 16:34:30
本文实例分析了angular组件化管理实现方法。分享给大家供大家参考,具体如下: 在做sass产品页面的时候,往往每个页面的header和footer都是一样的,还有最近...

本文实例分析了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程序设计有所帮助。