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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
微信小程序开发探究
Dec 27 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
微信小程序实现日历效果
Dec 28 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 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字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
深入探究node之Transform
2017/07/20 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
2019/04/29 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
python访问系统环境变量的方法
2015/04/29 Python
详解python的数字类型变量与其方法
2016/11/20 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
django 数据库返回queryset实现封装为字典
2020/05/19 Python
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
单位在职证明书
2014/09/11 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
运动会1000米加油稿
2015/07/21 职场文书
导游词之镜泊湖
2019/12/09 职场文书
django上传文件的三种方式
2021/04/29 Python