Angular2开发拙见
本文集中讲讲笔者目前使用ng2来开发项目时对其组件的使用的个人的一些拙劣的经验。
先简单讲讲从ng1到ng2框架下组件的职责与地位:
ng1中的一大特色——指令,分为属性型、标签型、css类型和注释型。其中写在css类以及注释中的组件想必多数人都不会去使用,而属性型指令与标签型指令则是ng1火遍宇宙的功臣之一。在ng2中,标签型指令干脆被分离出来,追随vue等新兴势力的风格升级并称为组件,并用来处理所有与视图(DOM)打交道的事情,包括展示数据与动画。而属性型指令则用于完善组件的功能,比如接收用户输入、响应用户点击等事件。其实ng2中内嵌的许多功能都是属性型指令——ngFor、ngIf等等,而对于组件来说比较依赖具体的项目,所以跟适合基于项目来使用组件写出一个个用户看得见的界面来。同时组件还需要与路由打交道,前端路由可以看成是动态更改DOM,在ng2路由中制定好规则后,其实就是在动态渲染或销毁不同的组件,以此实现前端页面的切换。
然后讲讲笔者前面的项目时如何使用ng2组件搭起一个网站的:
1. 照着官方的做法,每个应用得有一个根组件。
2. 区分前端路由,每个路由条目指向一个组件,每个组件各自渲染一个页面。
3. 项目扩大,单模块不能满足业务分类,所以先由根路由引导懒加载各个子模块,然后由子模块的子路由各自指向具体的子组件,并渲染各自的页面。
4. 着眼单个子组件渲染的单个页面,其实可以将一些可重用的标签块封装到一个新的组件里(比如需要ngFor遍历的复杂数据项)。
5. 发现其实有一些组件(比如侧边按钮或消息模态框)其实整个项目都可能使用到,得把这些封装成全局共享的组件。
到现在自己都觉得有一点乱,究其原因,应该是组件这个名称的问题,因为在ng2框架下,大到路由页面小到数据条目全都用的组件,声明方式全都一个模样,难免会乱。
没办法只能自己来给组件继续细分类别了,笔者于是把ng2的组件分成了四类:
- 页面组件
- 与路由打交道,只关心匹配路由规则渲染界面,此类组件在声明时不需要 selector 参数(只由路由定位不需要具体标签)
- 接收路由参数或resolve数据,尽量不做其他业务交互的请求,且不设Input、Output变量
- 布局组件
- 用于细分页面的模块若页面较简单可以省去直接使用单位组件,必须有具体的selector参数因为要在页面组件中使用
- 不负责获取路由或resolve数据,且尽量不请求数据而通过Input传入数据或Output响应事件,所有业务交互请求尽量在布局组件中完成(不至于像放在页面组件中那么乱,且各布局组件可以做到互不影响)
- 单位组件
- 必须有自己的selector,一般在自己模块中可重用,通过各种属性型指令修饰自身
- 用于简化单位级别的重复标签,比如获取的列表数据中的每个数据项的界面展示就可以封装成一个单位组件
- 只负责通过Input传入数据并显示,以及通过Output响应事件到外层的布局组件或页面组件中处理
- 共享组件
- 必须有selector,整个项目都共享的组件,实现比较自由,重在减少整个项目的重复代码并方便维护
- 比较合适的比如消息弹框,加载进度条等
- 大部分的属性型指令,其实功能一般都比较通用,可以与共享组件等同对待,只不过共享组件拥有具体视图而共享指令只用于实现通用功能
如果纯文字不够形象,笔者再给出自己画的简易版ng2超级无敌前端架构图:
讲来讲去其实这里面完全没有技术难点,只是在暗示着一件事——项目目录安排很重要。
ng2可不认识笔者给它细分的这么多类型的组件,这些分类是给自己看的,具体的体现就是以这个分类体系得出的一个项目目录结构。
以笔者自己在写的一个项目为例:
笔者给文件夹命名前面有的加上了加号有的加上了减号,也算是自己的一种看似奇怪的目录结构安排了。
解释一下就是:最外层这个+term代表整个懒加载模块的目录,里面带加号的目录下的组件代表是页面组件,什么符号都没有的代表是布局组件,带减号的目录下的组件代表是单位组件,单位组件可能在整个懒加载模块中都使用到,所以直接在懒加载目录的最外层,而布局组件都在具体的页面组件同级目录下。
总结就是抛开ES6与TypeScript的外表后ng2组件的使用在技术上难点不算多,本文纯粹是一点拙劣的经验之谈,当然笔者目前的经验还远远不足,希望在日后的开发以致研究透彻ng2源码后能有更深的见解。
Angular2开发拙见的更多相关文章
- Angular2开发拙见——组件规划篇
本文集中讲讲笔者目前使用ng2来开发项目时对其组件的使用的个人的一些拙劣的经验. 先简单讲讲从ng1到ng2框架下组件的职责与地位: ng1中的一大特色--指令,分为属性型.标签型.css类型和注释型 ...
- angular2开发01
// */ // ]]> angular2开发01 1. angular2 开发准备 1.1. 安装node 1.2. 安装npm 1.3. 运行qickStart 1 angular2 开发准 ...
- Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境
一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...
- windows 搭建 angular2 开发环境--白纸新手可以参考一下
初次接触angular,感觉接触一项新的东西真的是很艰难,自从听我朋友说起angular,就对这个东西产生了一些兴趣,就开始研究,经过艰辛的各种查资料各种头痛,终于是把这环境给搭上了·最起码是可以运行 ...
- Angular2开发笔记
Problem 使用依赖注入应该注意些什么 服务一般用来做什么 指令一般用来做什么 angular2如何提取公共组件 angular2为什么不需要提公共组件 父组件与子组件之间如何通讯 什么时候应该使 ...
- [Angular2]eclipse中angular2开发环境的搭建
本文作者:苏生米沿 本文地址:http://blog.csdn.net/sushengmiyan 环境准备 1.eclipse neon 2.网络连接 插件地址 eclipse的插件市场地址: htt ...
- webpack+angular2开发环境搭建
升级版之webpack4 + angular5脚手架demo详见: http://www.cnblogs.com/xudengwei/p/8852257.html 刚搭建完一个webpack+angu ...
- SpringBoot+Angular2 开发环境搭建
https://segmentfault.com/a/1190000007921675
- Linux系统下安装Angular2开发环境(Ubuntu16.0和deepin)
说明下,以下过程都是在ubuntu16.0系统下,win系统环境下的安装过程更简单,基本上可以仿效此环境来,除了不用配置系统命令(win下自动可以),node安装是exe程序,一键安装.另外,这里面像 ...
随机推荐
- 从基于idea的第一个javaweb项目到shell脚本项目自动发布(jdk1.8,mysql5.7,maven3.5,tomcat9,subversion,centos7.3)之一
首先说一下为什么写这篇文章,因为从正式参加工作就做javaweb开发,一路走来,碰到了很多的问题,每次问题都想从度娘那里得到准确的答案,但是,每个人遇到的问题不尽相同,问题的解决方案有时候也只是仅供参 ...
- 微信小程序--ajax服务器交互及页面渲染
网上找的帖子大多是直接在onload中请求数据.而我想实现的是点击按钮,然后请求服务器,接着返回数据,前端页面渲染.所以搞了挺久的,在此记录一下. 请求是按照微信官方给出的,wx.request 在这 ...
- Java并发包中CopyOnWrite容器相关类简介
简介: 本文是主要介绍,并发容器CopyOnWriteArrayList和CopyOnWriteArraySet(不含重复元素的并发容器)的基本原理和使用示例. 欢迎探讨,如有错误敬请指正 如需转载, ...
- DB Error || Warning
数据库在进行增删改查时有时候会发生错误,当在程序中一个操作总是不起作用的时候,我们可以尝试如下方法: 1.输出sql语句,有的sql语句可能是通过一些字符拼接完成的,这时候可能会发生'', +之类的混 ...
- Ibatis insert语句插入null引发的错误
公司使用的orm框架为ibatis,其中默认的insert语句一直都是这样写的: <insert id="insert" parameterClass="activ ...
- 搞java的都土鳖
spring不就几个破框架让人们下载使用吗,但是官网什么都有,就是没有下载链接.java程序员被那些垃圾框架强奸的体无完肤,还乐在其中,还什么SSH,哇哦!java好像跟企业干上了,什么企业bean, ...
- css 弹性盒兼容性写法,直接复制粘贴
看这个定义弹性布局盒子display:-webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; disp ...
- spring事务详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt122 Spring事务机制主要包括声明式事务和编程式事务,此处侧重讲解声明式 ...
- Linux-mount命令和umount命令 (8)
mount:用于挂载文件系统,使能访问其它文件系统中的资源 umount:用于卸载已挂载的文件系统 mount: 格式: mount [-参数] [设备名称] [挂载点] 其中常用的参数(参数默认自带 ...
- 聊聊click延迟和点击穿透
博客原文地址:Claiyre的个人博客 https://claiyre.github.io/ 如需转载,请在文章开头注明原文地址 移动端click事件被延迟 移动端的开发经常需要监听用户的双击行为,所 ...