大漠穷秋：全面解读Angular 4.0核心特性

内容来源：2017年5月14日，大漠穷秋在“OSC源创会南京站”进行《Angular 4.0核心特性》演讲分享。IT大咖说做为独家视频合做方，经主办方和讲者审阅受权发布。

阅读字数：1354 | 8分钟阅读

摘要

基于最新的Angular4.0版本，超级大咖大漠穷秋为咱们讲解强大的集成开发平台Angular/cli，以及Angular最核心的3大概念：组件、模块、路由。

嘉宾演讲视频地址：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开放平台首秀

原文地址：t.cn/Ros8b2x