Angular 6的新功能,特点介绍

时间: 2018-05-23阅读: 2240标签: Angular

Angular  6版在2018年5月4日正式发布,其目的是为了使Angular变得更小,更快,更易于使用。 Angular 6版本更加关注底层框架工具链,同时加快了工具链在Angular中的运行速度,除此以外,这次更新还包括框架包(@angular/core、@angular/common、@angular/compiler 等)、Angular CLI、Angular Material + CDK等。下面就介绍下Angular 6新版本的一些主要新特性,以便大家学习使用。


ng update

ng update 是新增的一个cli命令。通过ng update不仅可以保持正确的版本依赖,而且能保持依赖关系的同步。第三方可以使用原理图提供更新脚本。如果您的某个依赖项提供了一个ng update原理图,那么他们可以在需要进行重大更改时自动更新代码


ng add

ng add 也是新增的一个cli命令。通过ng add可以更加容易向项目中添加新功能(类似npm install 


Angular Material+CDK组件

angular6最大的补充是用于显示分层数据的新树组件。遵循数据表组件的模式,CDK包含核心树指令,而Angular Material则提供与顶层的Material Design样式相同的体验


Material

运行命令,添加Material。一旦添加Material之后,你就可以生成三个新的入门组件

ng add @angular/material

1、Material Sidenav

ng generate @angular/material:material-nav --name=my-nav //生成一个nav组件

2、Material Dashboard

ng generate @angular/material:material-dashboard --name=my-dashboard

3、Material Data Table

ng generate @angular/material:material-table --name=my-table

如果要了解更多有关Material的信息,请点击这里


CLI工作空间

CLI6.0版本现在支持包含多个项目的工作空间,如多个应用程序或库。CLI项目现在将使用angular.json而不是 .angular-cli.json用于构建和项目配置。


库的支持

CLI最需要的功能之一是支持创建和构建库

ng generate library <name>

该命令将在CLI工作区内创建一个库项目,并对其进行配置以进行测试和构建。

ng generate library <name>

这个命令将在你的CKI工作空间创建一个库项目,并且自动添加配置信息到angular.json文件和tsconfig.json中。
点击查看更多关于CLI工作空间的信息


Providers的改变

为了使我们的程序变得轻量,Angular6将模块引入服务的模式,改成服务引入模块的模式。

6.0之前的版本服务注入
// app.module.ts
@NgModule({
  ...
  providers: [MyService]
})
export class AppModule {}

//my-service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
  constructor() { }
}
6.0之后的版本服务注入

NgModule中不再需要引入

//my-service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MyService {
  constructor() { }
}


Animations性能优化

新的Animations实现,不再需要 web animations polyfill。这也就意味着你可以从你的应用中移除 polyfill,这样可以减少大约47k的空间


RxJS v6

Angular已经更新使用了RxJS v6。RxJS作为一个独立的工程已经在几周前完成了V6的发布


长期支持 (LTS)

我们正在将我们的长期支持扩展到所有主要版本。

之前我们宣布只有v4和v6是LTS版本,但为了从一个主要版本更新到下一个主要版本更容易,并给更大的项目更多时间来规划更新,我们决定将延长对所有主要版本的长期支持从v4开始。

每个主要版本将支持18个月,大约6个月的积极开发,接下来是12个月的关键错误修正和安全补丁。


如何升级到6.0.0

按照引导对应用进行升级,更新通常遵循3个步骤,并将利用新ng update工具。

  1. 更新@ angular / cli
  2. 更新你的Angular框架包
  3. 更新其他依赖项


Ivy

Ivy将会是下一代渲染引擎,现在正在开发中。让我们拭目以待吧。



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/804

在 Angular 8 中,我们可以期待些什么?

Angular 作为一款优秀的前端框架,自诞生之日起,就致力于面向前端开发者提供一整套全功能解决方案。与其他流行框架所追求的理念不同,Angular并非作为一款可以并入 Web 应用程序的轻量级框架而生

angular.js和vue.js中实现函数去抖

搜索输入框中,只当用户停止输入后,才进行后续的操作,比如发起Http请求等。本文将分别探讨在angular.js和vue.js中如何实现对用户输入的防抖。

angularJS自定义服务的几种方式

在angularJS中定义服务共有四种常见的方式:factory,service,provider,constant,value.使用形式的不同:

成为优秀Angular开发者所需要学习的19件事

一款to-do app基本等同于前端开发的“Hello world”。虽然涵盖了创建应用程序的CRUD方面,但它通常只涉及那些框架或库也能做到的皮毛而已。Angular看起来似乎总是在改变和更新

AngularJS 的那些内置九种过滤器

ng内置了九种过滤,currency (货币处理)使用currency可以将数字格式化为货币,默认是美元符号,你可以自己传入所需的符号,例如我传入人民币,ng提供的date过滤器基本可以满足一般的格式化要求。

使用wepack、typescript创建一个angularjs项目

angularjs是一个非常老的框架,如果你准备用angular启动新项目,完全可以使用angular而不是angularjs。 但是有时候我们需要维护老的angularjs项目,但是又想把angularjs升级

Angular是哪个公司的?

Angular是一个基于TypeScript的开源Web应用程序框架,用于在HTML和JavaScript中构建Web应用程序。Angular诞生于2009年,由Misko Hevery 等人创建,后为Google所收购,由Google维护。它最初是作为Google的一个项目启动的,但现在它是开源框架。

Angularjs的$http异步删除数据详解及实例

这篇文章主要介绍了Angularjs的$http异步删除数据详解及实例的相关资料,这里提供实现思路及实现具体的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。

Angular应用”老手“也未必掌握的十大实用特性

如果你已经是编写 Angular 应用的”老手“,可能会觉得这篇文章介绍的这些特性自己肯定都很熟悉。但事实未必如此,不信的话等你看完再说。

AngularJS 指令实践

指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!