Angular 8的新特性介绍

更新日期: 2019-05-29阅读: 3.5k标签: 特性

在今天早些时候angular团队发布了8.0.0稳定版。其实早在NgConf 2019大会上,演讲者就已经提及了从工具到差分加载的许多内容以及更多令人敬畏的功能。下面是我对8.0.0一些新功能的简单介绍,希望可以帮助大家快速了解新版本。

新功能

差分加载

根据您的browserlist 文件,在构建期间,Angular将为其创建单独的包polyfills。所以基本上你会有:

使用此功能将减小捆绑包大小。

但这是如何工作的?

基本上,Angular将使用polyfill构建其他文件,并且它们将注入nomodule 属性。

<body> 
  <pp-root> </ pp-root>
<script type =“text / javascript”src =“runtime.js”> </ script> 
  <script type =“text / javascript”src =“es2015- polyfills.js ” nomodule > </ script> 
  <script type =“ text / javascript“src =”polyfills.js“> </ script> 
  <script type =”text / javascript“src =”styles.js“> </ script> 
  <script type =”text / javascript“src =”vendor .js“> </ script> 
  <script type =”text / javascript“src =”main.js“> </ script> 
</ body>

nomodule属性是一个布尔属性,用于阻止脚本在支持模块脚本的用户代理中执行。这允许在现代用户代理和旧用户代理中的经典脚本中选择性地执行模块脚本.  


SVG作为模板

您现在可以将SVG文件用作模板。到目前为止,我们只能选择使用内联html或外部HTML作为模板。

@Component({
  selector: "app-icon",
  templateUrl: "./icon.component.svg",
  styleUrls: ["./icon.component.css"]
})
export class AppComponent {...}


Ivy渲染引擎实验

虽然早在angular 6的时候就提出了Ivy,但是Ivy仍处于试验阶段,通过Angular 8版本,您可以通过创建一个enable-ivy标志设置为true 的应用程序来测试它,如下所示。它不是完全正常运行(选择预览),正如Igor Minar在ngConf 2019中建议的那样,视图引擎仍然推荐用于新应用。

To enable Ivy in an existing project set enableIvyoption in the angularCompilerOptions in your project’s tsconfig.app.json
要在现有项目中使用Ivy的话,需要在tsconfig.app.json文件中设置angularCompilerOptions选项的enableIvy属性

“angularCompilerOptions”: {“enableIvy”:true}

您也可以使用新引擎创建新应用程序

ng new my-app --enable-ivy

Ivy将提供以下优势,Angular 9中预计前3个功能:

  1. 编译速度更快(V9)。
  2. 改进了模板的类型检查(V9)。
  3. 较小的捆绑尺寸(V9)(如果您错过了I / O 19,Vikram Subramanian显示了一个4.3 KB版本的应用程序)。
  4. 向后兼容性。
  5. 我最喜欢的:你可以调试模板(我确信很多开发人员需要这个功能)。


Bazel支持

Bazel是谷歌开源的另一款工具,“我们不喜欢谷歌”。正如Igor Minar所解释的那样,Bazel已经在内部使用了很长时间,现在可供所有人使用。您可以参考Bazel文档,并了解如何将其与Angular一起使用。
你可能想知道:“Bazel准备好了吗?”简答:还没有。目前,它处于“选择预览”模式。

Bazel可作为选择加入,预计将包含@angular/cli在第9版中。

Bazel将提供以下优势:

  1. 更快的构建时间(对于第一次构建需要时间,但并发构建将更快),Angular已经在使用它,现在CI在7.5分钟内完成,而不是在Bazel之前的60分钟。
  2. 增量构建:您将能够仅构建和部署已更改的内容而不是整个应用程序。
  3. 您可以弹出Bazel文件,默认情况下它们是隐藏的。

您可以使用以下命令添加Bazel支持:

ng add @ angular / bazel

或者,您也可以使用Bazel创建一个新的应用程序:

npm install -g @ angular / bazel 
ng new my-app --colection = @ angular / bazel


Builders api

新版本允许我们使用Builders API,也称为Architect API。
angular使用builders进行主要操作:serve ,build ,test ,lint和e2e 。您可以在angular.json文件中查看使用过的构建器。

...
"projects": {
  "app-name": {
    ...
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        ...
      },
      "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        ...
      },
      "test": {
        "builder": "@angular-devkit/build-angular:karma",
        ...
      },
      "lint": {
        "builder": "@angular-devkit/build-angular:tslint",
        ...
      },
      "e2e": {
        "builder": "@angular-devkit/build-angular:protractor",
        ...
      }
    }
  }
}

从现在开始,我们可以创建自定义构建器。我认为这是gulp/grunt“旧时代”中的命令。

基本上,构建器只是一个带有一组命令的函数,您可以createBuilder()从@angular-devkit/architect包传递给方法。

import { createBuilder } from '@angular-devkit/architect';
function customBuild(options, context) { 
  return new Promise((resolve, reject) => {
    // set of commands
  })
}
createBuilder(customBuild);

您可以在此处查看内置的Angular构建器。


懒加载的变动

新版本不推荐使用loadChildren:string 懒惰加载模块的语法
在8.0.0之前,懒加载的使用方法如下:

loadChildren: './lazy/lazy.module#LazyModule';

现在的使用方法如下:

loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)

如果你有很多的懒加载的模块,并希望通过软件包做到这一点,可以点击此处参考


对AngularJS API中$location的支持

Angular团队希望为使用AngularJS的所有开发人员提供支持,并帮助他们升级到Angular。该团队现在在升级时添加了对$ location服务的支持。添加了angular/common/upgrade这个新包。

  1. 允许从位置服务检索状态的功能。
  2. 添加跟踪所有位置更改的功能。
  3. 它将允许您读取hostname protocol port searchAngularJS中可用的属性。
  4. MockPlatformLocation 添加了API以测试位置服务。


Web Worker

Angular 8中添加了Web worker支持。现在,您可以添加Web worker并将要在后台运行的耗时进程委派给Web worker。运行以下命令以使用Angular CLI生成新的Web worker:

ng g webWorker <name>


Service Worker

随着PWA的使用日益增长,对Service Worker进行了许多改进。

  1. 一项改进是SwRegistrationOptions增加了选项。
  2. 在一个域中支持多个应用。
  3. 阅读Angular Doc上有关服务工作者的更多信息。


表单改进

  1. 添加了markAllAsTouched方法以标记所有的控件FormGroupas as touched。如果要触发一个表单组中所有控件的验证,这个方法将是非常有用的。之前我们不得不使用下面的代码片段来实现相同的功能:
validateFormAndDisplayErrors(form: FormGroup) {
  Object.keys(form.controls).map((controlName) => {
    form.get(controlName).markAsTouched({onlySelf: true});
  });
}
  1. 从FormArray中清除所有元素

以前要删除所有元素,formArray 我们必须循环删除第一个元素直到空:

while(formArray.length){ 
  formArray.removeAt(0); 
}

现在就不需要那样操作了,直接使用clear方法就可以完成:

formArray.clear()


对Typescript 3.4.x的支持

Angular现在使用TypeScript 3.3(v7使用3.2.x)。没有太多突破性的变化 - 所以你可能应该做得很好。你可以在这里查看。


性能改善

为每个请求ServerRendererFactory2创建一个新的实例domElementSchemaRegistry,这是非常昂贵的。现在它将共享全局实例DomElementSchemaRegistry.


弃用的API

从 @angular/platform-browser中删除了已弃用的DOCUMENT

从@angular/platform-browser中移除了DOCUMENT。如果您使用DOCUMENT from @angular/platform-browser,则应从此处开始导入@angular/common。


@angular/http

@angular/http在Angular 5中不推荐使用package,但由于@angular/platform-server依赖于它,所以仍然可用。从现在它已从包列表中删除。


配置ViewChild / ContentChild查询的时间

使用此功能时,必须提供静态标志以定义何时需要解析ViewChild和ContentChild实例。

使用此功能时,必须提供静态标志以定义何时需要解析ViewChild和ContentChild实例。

// Ensure Change Detection runs before accessing the instance
@ContentChild('foo', { static: false }) foo!: ElementRef;
// If you need to access it in ngOnInt hook
@ViewChild(TemplateRef, { static: true }) foo!: TemplateRef;

以上功能不适用于ViewChildren或ContentChildren。它们将在变更检测运行后解析。

需要注意的是,设置static: true将不允许您从动态模板分辨率(例如*ngIf)获得结果。

添加了原理图支持以将现有代码迁移到此语法,因为将使用此语法Ivy 。您可以运行ng update @angular/core以迁移现有代码。


Angular Material

Angular Material工程重命名为Angular Components。包还是跟以前保持一样的。


结论

以上就是angular 8版本的一些改动。总体来说变化不是很大,延续了angular每年一个稳定版的习惯。
原文链接


链接: https://fly63.com/article/detial/3469

CSS新特性contain,控制页面的重绘与重排

contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排,而不必每次都针对整个页面。

Html5、Css3、ES6的新特性

Html5的新特性语义化标签:有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。表单新特性,多媒体视频(video)和音频(audio)

ES6新特性--var、let、const

var不存在块级作用域,具有变量提升机制。 let和const存在块级作用域,不存在变量提升。在同一作用域内只能声明一次。const在声明时需要赋值且无法修改,但如果常量是对象,则对象的属性可以修改。

Js即将到来的3个新特性

Optional Chaining(可选链式调用);Nullish coalescing(空值合并);Pipeline operator(管道运算符)通过三个函数对字符串进行处理;

使用 React 要懂的 Js特性

与我使用的其他框架相比,我最喜欢 React 的原因之一就是它对 JavaScript 的暴露程度。没有模板DSL( JSX 编译为合理的 JavaScript),组件 API 只是通过添加 React Hooks 变得更简单,并且该框架为解决的核心 UI 问题提供非常少的抽象概念

ES2019 新特性汇总

最近 ECMAScript2019,最新提案完成:tc39 Finished Proposals,我这里也是按照官方介绍的顺序进行整理,如有疑问,可以查看官方介绍啦~另外之前也整理了 《ES6/ES7/ES8/ES9系列》,可以一起看哈。

Js的用途和特性

JavaScript 最初的目的是为了“赋予网页生命”。这种编程语言我们称之为脚本。它们可以写在 HTML 中,在页面加载的时候会自动执行。脚本作为纯文本存在和执行。它们不需要特殊的准备或编译即可运行。

十个超级实用的 JS 特性

你可能刚上手 JavaScript,或者只是曾经偶尔用过。不管怎样,JavaScript 改变了很多,有些特性非常值得一用。 这篇文章介绍了一些特性,在我看来,一个严肃的 JavaScript 开发者每天都多多少少会用到这些特性

解密HTTP/2与HTTP/3 的新特性

HTTP/2 相比于 HTTP/1.1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。

为什么我喜欢Js可选链?

很多 JavaScript 的特性极大地改变了你的编码方式。从 ES2015 及更高版本开始,对我的代码影响最大的功能是解构、箭头函数、类和模块系统。可选链(optional chaining)进入了第3阶段,将是一个很好的改进

点击更多...

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