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">导航1</a></li><li><a href="page1.html">导航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这样的组件的时候在使用!因为这种小组件是按需加载的,用得着再加载,不会影响页面响应效率。
angular 组件化相关推荐
- Webpack + Angular的组件化实践
最近写复旦二手平台的时候开始尝试用一直推崇了很久的组件化.经过一番抉择之后选择了 webpack + angular 的组合.所以在这里分享一下具体的实践流程. Webpack Webpack是目前比 ...
- 如何通过 Vue+Webpack 来做通用的前端组件化架构设计
目录: 1. 架构选型 2. 架构目录介绍 3. 架构说明 4. 招聘消息 目前如果要说比较流行的前端架构哪家强,屈指可数:reactjs.angularjs.emberj ...
- android组件化架构 书,Android MVVM组件化架构方案
MVVMHabitComponent 关于Android的组件化,相信大家并不陌生,网上谈论组件化的文章,多如过江之鲫,然而一篇基于MVVM模式的组件化方案却很少.结合自身的调研和探索,在此分享一篇基 ...
- Vue.js组件化开发实践
Vue.js组件化开发实践 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
- 组件化开发实战_一篇文章搞懂什么是前端“组件化”开发
学过网页的朋友都知道,制作一个网页离不开HTML.CSS和JavaScript技术.对于初学者来来说,掌握这3门技术就已经很不容易了,为什么前端为什么又要搞出来一个"组件化"开发的 ...
- VUE.JS 组件化开发实践
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...
- js固定表格行列_纯前端表格控件SpreadJS V14.0发布:组件化编辑器+数据透视表
SpreadJS 是一款基于 HTML5 的纯前端表格控件,兼容 450 种以上的 Excel 公式,具备"高性能.跨平台.与 Excel 高度兼容"的产品特性,可为用户提供高度类 ...
- angular input_快速地上手Angular组件开发
如果我会一些Javascript的基础知识,我可以快速地上手Angular吗?或者说,我是一名前端工作者,没有接触过Angular,我该如何快速地使用Angular进行日常开发呢?我是轻流前端团队的一 ...
- MVVM架构结合阿里ARouter,打造一套Android-Databinding组件化
前言 关于Android的组件化,相信大家并不陌生,网上谈论组件化的文章,多如过江之鲫,然而一篇基于MVVM模式的组件化方案却很少.结合自身的调研和探索,在此分享一篇基于MVVMHabit框架(htt ...
最新文章
- 怎么定义图像的质量?如何评价图像的质量?
- css如何转为html5,HTML与CSS中的3D转换模块
- Linux的centos7.2部署rocketMq3.5.8
- hdu 1520 树形dp
- profiling mysql_MySQL如何利用profiling分析SQL查询语句
- # 睡眠3秒_小儿睡眠呼吸暂停综合征
- html制作手机预览效果,新移动端Html5方式预览报表插件
- RobotFramework自动化框架—robot文件中调用自定义库
- saltstack 安装nginx
- Docker小白到实战之Docker网络简单了解一下
- 平均正确率aps apm apl_海口秀英区“三无小区”垃圾分类有高招 投放正确率达96%以上...
- 或许是 Nginx 上配置 HTTP2 最实在的教程了
- linux搭建MinIO集群
- MongoDB聚合操作MongoDB常用聚合管道聚合$project$match$count$group$unwind$limit$skip$sort$lookup用法及操作案例
- element-admin/若依主题风格设计
- 2021信息安全工程师学习笔记(四)
- SSM毕设项目某企业危化品信息管理系统bf339(java+VUE+Mybatis+Maven+Mysql)
- linux浏览器切换内核,电脑切换浏览器内核模式浏览网页的详细方法
- python12306下单步骤_python编程实现12306的一个小爬虫实例
- sha256可逆吗_当我们谈“X+区块链”的时候,到底搞懂区块链了吗?