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


Posted in Javascript onMarch 17, 2017

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

Javascript 相关文章推荐
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
微信小程序 参数传递实例代码
Mar 20 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 Javascript
vue里使用create, mounted调用方法
Apr 26 Vue.js
Bootstrap表单制作代码
Mar 17 #Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 #Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 #Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 #Javascript
javascript 动态生成css代码的两种方法
Mar 17 #Javascript
AngularJS中$http使用的简单介绍
Mar 17 #Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 #Javascript
You might like
PHP实现下载功能的代码
2012/09/29 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
文本框中,回车键触发事件的js代码[多浏览器兼容]
2010/06/07 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
jQuery层动画定位滑动效果的方法
2015/04/30 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python3 处理JSON的实例详解
2017/10/29 Python
详解python eval函数的妙用
2017/11/16 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
django Serializer序列化使用方法详解
2018/10/16 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
Python实现把类当做字典来访问
2019/12/16 Python
Python列表解析操作实例总结
2020/02/26 Python
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
J2EE包括哪些技术
2016/11/25 面试题
艺人经纪人岗位职责
2014/04/15 职场文书
五水共治一句话承诺
2014/05/30 职场文书
档案保密承诺书
2014/06/03 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
中秋节随笔
2015/08/15 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS