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 相关文章推荐
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
AngularJS中的缓存使用
Jan 11 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
JavaScript判断输入是否为数字类型的方法总结
Sep 28 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 Javascript
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中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
2014/07/21 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
Web开发必知Javascript技巧大全
2016/02/23 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
javascript中的隐式调用
2018/02/10 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
win系统下为Python3.5安装flask-mongoengine 库
2016/12/20 Python
Python异常处理操作实例详解
2018/05/10 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
详解anaconda安装步骤
2020/11/23 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
小学元宵节活动总结
2015/02/06 职场文书
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android