大漠穷秋:全面解读Angular 4.0核心特性
内容来源:2017年5月14日,大漠穷秋在“OSC源创会南京站”进行《Angular 4.0核心特性》演讲分享。IT大咖说作为独家视频合作方,经主办方和讲者审阅授权发布。
阅读字数:1354 | 8分钟阅读
摘要
基于最新的Angular4.0版本,超级大咖大漠穷秋为我们讲解强大的集成开发平台Angular/cli,以及Angular最核心的3大概念:组件、模块、路由。
嘉宾演讲视频地址:http://t.cn/RKc9GNc
集成开发环境@Angular4.0
2009年,出现了node.js。它的出现标志着前端开发正式进入了工业化的时代,前端工程师这个职位得以确立。
Node.js出现后,才有了完整的工具链。
@Angular/cli
我们需要有一个统一的node.js模块把所有node工具集成在一起,Angular/cli就是这样一个平台。命令行工具可以创建出里面所有的组件或概念,在生成目录结构的过程中,还会生成代码的模版。
但是Angular/cli也有一些“坑”。
在Windows下面,node-jyp这个包依赖于Visual Studio,node-sass这个node模块也被墙掉了。所以强烈推荐使用cnpm安装。
Angular/cli把打包、压缩等工作全部分装在命令行里面,并集成了test的所有功能。
Angular中的3大核心概念
Angular中的3个核心的概念分别是“component”、“module”和“route”,“组件化”是Angular最核心的概念。
Component
在新版本Angular里采用了不可变数据类型,帮助执行脏检查机制。
Angular2-dependencies-graph是一个node.js的模块,通过它把项目的目录和结构生成图表,就可以清晰地知道自己写的模块位于项目的哪个位置。
NgModule
在真正开发业务系统的时候,光有UI组件是不够的,还有服务、路由以及各种各样的directive。
模块是用来组织业务代码的利器。把应用切分成多个模块,当用户进入index页面的时候,只加载其中的bundle-0.js,当用户点到对应模块的时候再加载其它的代码。
切分模块的时候,需要在业务的文件体积和请求数量之间取得一个平衡。
Router
如果没有router,浏览器的前进后退按钮就不能用,也无法把URL拷贝并分享给你的朋友。
Angular新版本中静态路由只要写component属性,说明这个路由需要交给哪个component来处理,Angular就会自动创建这个component并渲染出来。
做异步路由时要注意的是,写的是loadchildren,加载的对象是module而不是component。由此可见,NgModule是用来配合Angular/cli做模块的打包和加载。在Angular新版本里,module是最小的打包和加载单位。
路由守卫用来防止未授权的访问。在前端需要对路由做一定的防护,但目前的防护还远远不够,最重头的还是在server端,Angular就提供了这样一些特性。
Angular架构特色
Angular是第一个把依赖注入这个思想带入到前端开发里来的。
在Angular里,依赖注入只有构造器注入这一种方式。只要在构造函数里写需要应用到怎样的属性,Angular会自动创建它的实例并注入class。
注射器也是一个树型结构,在每个标签上都有injector的实例。
Angular还有一个最重要的设计特色就是数据绑定,它实现了双向数据绑定。双向数据绑定最低层有一个脏检查机制,要做这件事非常的难,所以在Angular之前没有人去做双向绑定。新版本的Angular重写了脏检查机制,不会再出现效率问题。
UI库
在Angular里面已经有一些比较成熟的组件库可以用了。例如ng2-bootstrap、PrimeNG和官方提供的Angular-Material2,在移动端也有Ionic支持。
参考资源推荐
ng2-admin:这个项目做得比较庞大,它里面的图表、地图插件、list和UI形态等都已经集成好了,可以把它拉下来再自己去做改动。
JHipster:它的后端基于SpringMVC。前端用户Angular做它的前端框架,它实现了Angular1和Angular2两个版本,选择范围比较广。可以利用它快速搭建应用框架。
今天的分享到此结束,谢谢大家!
阿里巴巴前端专家渚薰:H5互动的正确打开方式
百度外卖如何做到前端开发配置化
近期活动
直播 | 携手GAIR大会,思必驰DUI开放平台首秀
原文地址:http://t.cn/Ros8b2x
更多专业前端知识,请上 【猿2048】www.mk2048.com
大漠穷秋:全面解读Angular 4.0核心特性相关推荐
- 全球第一个完整的Angular 2.0系列视频教程,大漠穷秋
可以看的出来,前端和后端的开发正在进行融合,编程的思想和工程化的项目开发思路都逐渐一致起来.而AngularJs绝不是一门简单的编程语言或者框架,它是一种集合了当下大部分的优秀的编程思想和工程化开发的 ...
- 大漠穷秋:一个写代码的浪人|码云封面人物第 17 期
大漠穷秋 NiceFish(美人鱼)作者 本期嘉宾 大漠穷秋 :11 年开发经验,其中 5 年后端.6 年前端.熟悉 Java 相关的技术体系,在前端技术方面尤其有深入的研究,曾任 Angular ...
- 大漠穷秋:如何快速构建一款SCRM小程序?
导语 | 9月21日,云+社区技术沙龙"小程序·云开发"北京站圆满落幕.本期沙龙腾讯云联合猫眼.即速应用.白鹭引擎等企业,将从小程序·云开发后台技术.云开发实时数据推送实践.云开发 ...
- Ext群 群主大漠穷秋的五年开发技术集合
欢迎加入大漠穷秋群:83163037 五余年的一线设计,开发技术沉淀加上一颗对技术近乎痴迷的心成就了一套自己的技术框架体系, 能使开发效率提高百分之三十左右! 精通java语言,j2se j2ee W ...
- c语言 字符串 正序再倒序_新特性解读 | MySQL 8.0 索引特性3 -倒序索引
原创作者:杨涛涛 我们今天来介绍下 MySQL 8.0 引入的新特性:倒序索引. MySQL长期以来对索引的建立只允许正向asc存储,就算建立了desc,也是忽略掉. 比如对于以下的查询,无法发挥索引 ...
- angular2完整视频教程收藏(大漠穷秋)
来自大漠老师的angular2教程,视频地址如下: http://i.youku.com/i/UMzI1MjQ0MDgw?spm=a2h0j.11185381.module_basic_dayu_su ...
- 转载:Think in AngularJS:对比jQuery和AngularJS的不同思维模式(大漠穷秋)
导言 stackoverflow上有一个人问了一个问题:如果我有jQuery背景,我应该如何切换到AngularJS的思维模式? 有一个回复非常经典,获得了两千多票. 为了让国内开发者也能领略到其中的 ...
- 大漠穷秋叫狼哥哥要学好的书
<JavaScript高级程序设计 > <犀牛书> <悟透JavaScript> <JavaScript与模式> <JavaScript语言精粹 ...
- angularjs2大漠穷秋视频笔记整理
git.oschina.net/mumu-osc/NiceFish npm config list 联网方式 npm config set proxy="代理地址" npm con ...
最新文章
- mysql中文乱码解决方案_关于MySQL中文乱码的完美解决方案
- 摩天轮社区_看房日记:难得!宜宾,又来一楼盘!一线江景+公园+学校,还有小户型、摩天轮...
- 没学过python、但是还是有公司要-转行Python开发自学还是报班?老男孩全日制学习...
- iOS中使用OpenGL 实现增高功能
- Vue nextTick 机制
- 【数据库】数据模型基础概念(图文版)
- html换浏览器div的位置固定不变,浏览器窗口更改时,HTML div不在适当的位置
- 修改Chrome默认搜索引擎
- oracle 10g管理地址,oracle10g管理共享服务器
- 中间表为什么可以不用实体类_法国蜗牛供不应求,为什么不用中国蜗牛代替?看完才知道真不可以...
- C/C++ EasyX 立方体与超立方体的投影 与 伸缩和旋转变换
- bitcscs计算机系统,深入理解计算机系统CSAPP-美-布莱恩特
- 赵小楼《天道》《遥远的救世主》深度解析(4)从肖亚文引申怎么看待随缘、惜缘、攀缘这三种缘?
- linux开篇——硬盘和mbr简介
- 分享一个英语听力资源下载网站
- 农牧行业销售经理生存手册(一)
- golang学习笔记
- 解决Hyperledger Fabric通道重复创建问题( readset expected key [Group] /Channel/Application at version 0, but )
- 传智播客html5案例,html5 传智播客
- 【Wallpaper挂时长】在后台也能增加游戏时长