网站制作常用的Angular 6中的新功能 – 最新版本的JavaScript框架

猜测已经结束。谷歌新的JavaScript框架Angular 6已经到货。在2017年11月推出其先前版本的Angular 5期间，谷歌已经开始准备发布新的Angular 6。因此，它将很容易看出在这个新版本中引入了什么重大变化。

Angular 6更强调工具链而不是底层框架，这使得使用Angular更加简单快捷。

此外，随着诸如@ angular / core，@ angular / common，@ angular / compiler等框架软件包的推出，包括CDK和Angular CLI的Angular Material在内的关键版本正在同步。

这些更改将有助于明确交叉兼容性。但是，小版本和补丁版本将根据项目的要求提供。

RxJS v6

随着Angular 6的推出，开发人员将有权访问RxJS 6.但是，您必须更新您的应用程序。事实上，v6是在几周前发布的，并且已经引入了各种重要的变化，包括向后兼容包rxjs-compat，从而可以平滑地运行应用程序。

而且，RxJS也改变了导入东西的方法。我们来举个例子来分析一下：

从'rxjs'导入{Observable，of};
从'rxjs / operators'导入{map};
const square $：Observable <number> = of（1,2）.pipe（
地图（n => n * n）
）;

但是，在早期版本中，导入事物的方式写为

从'rxjs / Observable'导入{Observable};
从'rxjs / observable / of'导入{of};
从'rxjs / operators'导入{map};
const square $：Observable <number> = of（1,2）.pipe（
地图（n => n * n）
）;

事实上，RxJS 5.5已经公布了管道运营商。除此之外，当您升级到Angular 6.0时，您必须仔细阅读由Angular团队编写的完整文档。它还包含一套四个新的tslint规则，更为人熟知的是rxjs-tslint。

角度材料+ CDK组件

Angular 6的主要亮点之一是用于展示分层数据的新树组件。Angular团队表示，遵循数据表组件中的模式，包括角度材料在内的CDK房屋和核心树指令将提供类似的材料设计样式体验。

此外，新徽章已与底部组件一起发布。徽章在揭示重要信息（如未读项目）时非常有用，而底部表单组件则表示从视点底部代表特定的以移动为中心的对话框，代表随后的操作选项列表。

毫无疑问，@ angular / cdk / overlay软件包已被确定为当今CDK中最有效的基础架构之一。

ng更新

ng update <package>被称为新的CLI命令，它允许您将项目依赖项更新为最新版本，包括依赖项中的核心软件包和devDependencies以及CLI。并且由于它的递归动作，包括zone.js，rxjs和typescript的依赖关系也会自动更新。

除此之外，它还借助于原理图更新脚本。但是，请注意，如果其中一个依赖项提供了ng updateschematic，则代码会在需要更改时自动更新。

原理图被称为包，主要包含开发人员的任务，如开发代码或更新代码。Angular CLI的经典任务可在@ schematics / angular package中找到; 然而，还增加了一些更多的新功能，例如@ schematics / package-update。

因此，电路图提供了四项主要任务，包括：

• 用于更新CLI的@ angular / cli
• @ angular-devkit用于更新DevKit
• 用于更新Angular包的角色
• 全部用于更新完全立即更新

但是，如果您只想更新Angular软件包而不是CLI版本，则首先需要安装原理图。

纱线添加--dev @ schematics /包更新

然后在你的package.json中添加一个原理图脚本

“脚本”：{
“ng”：“ng”，
“原理图”：“原理图”
// ...
}，

接下来你必须运行命令

纱线原理图@原理图/包更新：@angular

而且，这最终会更新Angular包。

预计Angular团队将在几个月内在ng updateSchematics中添加更多的库和包。不仅如此，企业库组件团队也被称为利用ng update进行更改以节省开发人员的时间。

添加

除ng更新之外，您还有另一个称为ng add <package>的CLI命令，可以帮助您轻松地为项目添加新的可能性。为了下载新的依赖关系，它需要包管理器的支持，并实现原理图或安装脚本来配置项目中的更改并添加更多依赖项，例如polyfills或scaffold包特定的初始化代码。

因此，你可以看看ng application的几个例子：

• ng add @ angular / pwa允许应用程序在添加应用程序清单和服务工作者后转换为PWA
• ng add @ angular / material的使用有助于安装和设置包括主题的角度材料。你也可以在ng中注册一个新的入门组件
• ng add @ ng-bootstrap / schematics允许您将ng-bootstrap添加到您的应用程序中
• ng add @ clr / angular @ next 用于从VMWare安装和设置Clarity。
• 在添加@ angular /元素时，您需要添加用于Angular Elements的document-register-element.js填充和依赖项

分子

Angular团队推出了第一个Angular Elements，目的是利用现有的Angular应用程序引导Angular组件。您只需将它们注册为自定义元素。

它作为内容管理系统在angular.io中得到广泛应用，使开发人员能够通过嵌入式HTML主动引导，并且不必手动执行引导。

树木可供应商

因此，当开发人员在JavaScript框架中导入或导出模块时，仍有一些未被利用的代码。那么，就JavaScript框架而言，这就是所谓的树形抖动或死代码清除。

未使用的模块不包含在软件包中。准确地说，这种新方法是为了改善应用程序中的抖动而引入的。

现在，需要做的是你必须在新的providedIn属性的帮助下直接在@Injectable（）装饰器中注册。应用程序的根或任何其他模块被接受。随着root的使用，注入被注册为单例到应用程序中。

同样使用providedIn; UsersModule是可注入的，被注册为未添加到模块提供者的UsersModule的提供者。

@Injectable（{
providedIn：'root'
}）
导出类UserService {
}

事实上，它不仅仅被推荐给图书馆开发者，甚至可以注册可注册的应用程序开发者。另外，它还通过providedIn直接注册了一个InjectionToken。

export const baseUrl = new InjectionToken <string>（'baseUrl'，{
providedIn：'root'，
工厂：（）=>'http：// localhost：8080 /'
}）;

它使单元测试更容易。UserService只需使用providedIn：’root’：

beforeEach（（）=> TestBed.configureTestingModule（{}））;

角度材料入门组件

如果必须将材料添加到现有的应用程序，则运行命令ng add @ angular / material是一个不错的选择。这将为您提供三个新的入门组件。这包括：

• 材料Sidenav
• 物料仪表板和
• 材料数据表

在第一种情况下，您会获得一个带有名称为应用程序和侧面导航的工具栏的入门组件。响应组件基于断点。

例如：
如果运行命令ng generate @ angular / material：material-nav -name = my-nav，则将starter组件命名为material-nav

在第二个选项中，您可以创建一个包含充满活力的网卡列表的入门仪表板组件。例如，ng generate @ angular / material：material-dashboard -name = my-dashboard将生成材料仪表板。

在第三种情况下，您可以构建启动器数据表组件，该组件具有用于分页和排序的预配置数据源。

命令ng generate @ angular / material：material-table -name = my-table将为您提供入门组件材料表。

动画的变化

随着Angular团队更新动画的实施，网页动画polyfill将不再需要。唯一不需要消除填充的时候就是在使用AnimationBuilder的时候。

从应用程序中删除polyfill后，您可以节省大约47KB的捆绑包大小。这也将更好地提高您在Safari中的动画性能。但是如果浏览器不支持element.animate API，那么Angular 6将撤销到CSS框架。

图书馆支持

为CLI的开发和创建提供支持是CLI的一个值得称道的特性。让我们来看看这个命令：
ng generate library <name>

通过使用此命令，您可以在CLI工作区内构建一个库项目，然后进行进一步的配置和测试。

CLI工作区

Angular CLI的第6版为包含多个项目（包括应用程序和库）的工作空间提供了充足的帮助。至于现在，你必须从angular-cli.json切换到angular.json来进行项目配置和创建。工作区包含项目，包含目标和项目的项目可以包含配置。

关于常春藤的更新

Angular团队在ng-conf中引入了常春藤的新概念。这是最新的渲染管道。目前，它还在经历开发过程，因此，它还没有与Angular版本6.0一起发布。一旦准备就绪，你就会知道它的预览版本。所以，请继续关注。

长期支持（LTS）

以前，Angular团队已经通知开发者，他们将只为v4和v6扩展其长期支持线，目的是简化将一个项目更新为另一个项目的过程，并为复杂项目提供更多时间以更好地规划。

但是，现在已决定将支持扩展到从第4版开始的所有主要版本。

升级到Angular 6.0 – 了解三个简单的步骤

因此，如果您想将JavaScript框架升级到最新版本6.0，请按照以下三个简单步骤操作。显然，请访问官方网站  并遵守指导原则。

• 第一步是更新@ angular / cli
• 接下来，升级其他框架包和
• 最后，更新其他依赖项

结论

既然Angular 6.0已经发布，网络开发人员以及应用程序开发人员应该快速获得有关最新版本JavaScript Framework的全面更新。Angular团队已尽最大努力加载新功能和重要改进。

但是，您仍然需要与常春藤保持联系，因为它尚未发布。因此，最大限度地发挥其优势，创造非凡的应用程序，吸引目标受众的关注。