内容
- 01.运行版本检查
- 02.安装Angular
- 03.创建一个项目框架
- 04.线束差速器
- 05. ...并查看结果
- 06.产生一个网络工作者
- 07.探索代码
- 08.搭建脚手架
- 09.不用担心缺少构造函数
- 10.执行一个小的编译运行
- 11. ...并找到输出
- 12.开始工作
- 13.探索常春藤
- 14.尝试修改的ng处理
- 15.享受更好的迁移
- 16.探索工作区控件
- 17.加快流程
- 18.避免行尸走肉
- 19.查看更改日志
Angular 8是Google Angular的最新版本-周围最好的JavaScript框架之一。在本文中，我们将介绍Angular 8的特殊之处，并向您展示如何入门。首先，简要回顾一下迄今为止该框架所发生的情况。
Angular的引入导致了Web开发的范式转变：虽然大多数库都将自己限制在为架构影响相对有限的开发人员提供支持的过程中，但Angular的开发人员却朝另一个方向发展。他们的产品迫使您使用特定的体系结构，偏差范围从困难到商业上毫无意义。实际上，大多数Angular代码在到达浏览器之前都要经过相对复杂的编译工具链。
由于Angular在Google Inc.内部和外部都取得了巨大的成功，因此发展总体上趋于稳定。这意味着破坏性代码更改很少，而每半年进行的升级则着重于使框架适应Web浏览格局的变化。
例如，在Angular 8中，将部署新的JavaScript编译器（尽管仍处于实验阶段）。它优化了生成的兼容性代码，使其明显更小，更快，但以旧版浏览器为代价。此外，还集成了Web Worker支持，以提高Angular的处理能力。简而言之，有很多值得一看的地方-因此，让我们直接潜水。
如果您想设计一个没有代码的网站，请尝试使用以下简单的网站构建器之一。为了使事情运行得更加顺利，请正确安装网络托管服务。
01.运行版本检查
Angular的工具链位于NodeJS环境中。撰写本文时，需要Node.js 10.9或更高版本–如果您发现自己使用的是旧版本，请访问Node.js网站并进行升级。以下代码显示了此计算机上的版本状态。
tamhan @ TAMHAN18：〜$节点-v v12.4.0 tamhan @ TAMHAN18：〜$ npm -v 6.9.0
02.安装Angular
Angular的工具链位于名为 ng。可以通过众所周知的NPM安装。
tamhan @ TAMHAN18：〜$ sudo npm install -g @ angular / cli tamhan @ TAMHAN18：〜$ ng版本
请仔细回答下图所示的问题。
从工具中获取版本信息非常困难–不仅语法独特，而且输出也很冗长（请参见下图）。
03.创建一个项目框架
ng 为我们生成Angular脚手架。在以下步骤中，我们要添加路由，并使用Sass进行CSS编译。如果由于某种原因部署失败，请清空工作目录，然后重新启动 ng 具有超级用户权限。
tamhan @ TAMHAN18：〜$ mkdir angularspace tamhan @ TAMHAN18：〜$ cd angularspace / tamhan @ TAMHAN18：〜/ angularspace $ ng new workertest
04.线束差速器
新版本的Angular优化了向后兼容代码以减少影响-名为的文件 浏览器列表 让您决定要支持哪些浏览器。打开 浏览器列表 并删除单词 不是 在IE 9到IE11之前。
。 。 。 > 0.5％的最近2个版本Firefox ESR尚未终止IE 9-11＃要支持IE 9-11，请删除“ not”。
05. ...并查看结果
订购该项目的编译文件，切换到分发文件夹并清除不需要的地图文件。
tamhan @ TAMHAN18：〜/ angularspace / workertest $ sudo ng build tamhan @ TAMHAN18：〜/ angularspace / workertest / dist / workertest $ ls
调用树以查看结果– ng 创建各种代码文件的多个版本（请参见下图）。
06.产生一个网络工作者
Web工作人员让JavaScript进入了本机应用程序的最后一个领域：大规模并行处理任务。使用Angular 8，就可以从舒适的环境中创建Web工作人员。 ng 命令行实用程序。
tamhan @ TAMHAN18：〜/ angularspace / workertest $ sudo ng生成web-worker myworker创建tsconfig.worker.json（212字节）创建src / app / myworker.worker.ts（157字节）更新tsconfig.app.json（236字节） ）更新angular.json（3640字节）
07.探索代码
ng乍一看，其输出看起来可能令人生畏。打开文件 src / app / myworker.worker.ts 在选择的代码编辑器中显示了您应该从中了解的代码 网络工作者 规格。原则上，工作人员接收消息并根据需要对其进行处理。
///参考lib =“ webworker” /> addEventListener（'message'，（{data}）=> {const response =`worker response to $ {data}`; postMessage（response）;}）;
08.搭建脚手架
Angular应用程序由组件组成。解雇我们的网络工作者最好是在 AppComponent，它被扩展为包括针对以下内容的侦听器： 初始化 事件。目前，它将仅发出状态信息。
从“ @ angular / core”导入{Component，OnInit}； @Component（{。。。}）导出类AppComponent实现OnInit {title ='workertest'; ngOnInit（）{console.log（“ AppComponent：OnInit（）”）; }}
09.不用担心缺少构造函数
经验丰富的TypeScript开发人员会问自己为什么我们的代码不使用编程语言提供的构造函数。原因是 ngOnInit 是一个生命周期事件，每当发生初始化事件时都会触发该事件–不需要与类调用相关联。
10.执行一个小的编译运行
此时，程序可以运行了。我们将从服务器内部执行它 ng，可以通过serve命令调用。这种方法的一个巧妙方面是程序可以检测到更改并即时重新编译项目。
tamhan @ TAMHAN18：〜/ angularspace / workertest $服务
看一下该图，可以在下图中看到它的实际效果。
11. ...并找到输出
ng服务 putputs其本地Web服务器的地址，通常是 http：//本地主机：4200 /。打开网页并打开开发人员工具以查看状态输出。请记住 console.log 将数据输出到浏览器控制台，并使NodeJS实例的控制台保持不变。
12.开始工作
此时，我们创建了worker的实例并向其提供消息。然后，其结果将显示在浏览器控制台中。
if（typeof Worker！=='undefined'）{//创建一个新的const worker = new Worker（'./ myworker.worker'，{type：‘module’}）; worker.onmessage =（{data}）=> {console.log（’页面收到消息：$ {data }’）; }; worker.postMessage（'hello'）; } else {console.log（“无工作人员支持”）; }
13.探索常春藤
Angular的未来版本将使用更高级的编译器，从而产生更小的视图。当产品尚未完成时，可以通过以下方式生成启用常春藤的骨架 ng新的常春藤项目– enable-ivy。或者，如代码段所示更改编译器设置。
“ angularCompilerOptions”：{“ enableIvy”：true}
一个警告：常春藤导致惊人的尺寸减小，但是它不是免费的。该产品尚未稳定，因此不建议在生产环境中使用它。
14.尝试修改的ng处理
Angular的 ng 命令行工具在内部使用了子脚本一段时间。 Angular 8的优势在于，您现在还可以在组装和编译应用程序时使用此功能来运行自己的任务。
“ architect”：{“ build”：{“ builder”：“ @ angular-devkit / build-angular：browser”，
一个整洁的应用程序 ng 脚本涉及将应用程序直接上传到云服务。 Git存储库提供了一个有用的脚本，可将您的工作上传到Firebase帐户。
15.享受更好的迁移
从Angular 1.x（也称为AngularJS）迁移的开发人员在使导航器在“组合”应用程序中正常工作方面遇到了很多问题。新的统一位置服务旨在使此过程更加顺畅。
16.探索工作区控件
大型项目受益于动态更改工作空间结构的能力。这是通过Angular 8.0中引入的新Workspace API来完成的-此步骤随附的代码片段提供了有关行为的快速概述。
异步函数show（）{const host =工作区。 createWorkspaceHost（new NodeJsSyncHost（））; const工作区=等待工作区。 readWorkspace（“路径/到/工作区/目录/”，主机）； const project = workspace.projects。 get（‘my-app’）; const buildTarget = project.targets。 get（‘build’）; buildTarget.options.optimization = true;等待workspaces.writeWorkspace（工作区，主机）； }
17.加快流程
构建大型JavaScript代码库变得乏味。 AngularJS的未来版本将使用Google的Bazel构建系统来加速该过程-不幸的是，在撰写本文时，它还没有准备就绪。
18.避免行尸走肉
即使Google非常注意不要破坏代码，但由于不再需要某些功能，因此仅需删除它们。查看此折旧清单，以了解有关应避免使用的功能的更多信息。
19.查看更改日志
与往常一样，一篇文章永远都不可能对整个发行版都公道。幸运的是，此更改日志提供了所有更改的详细列表，以防万一您想查看特别喜欢的功能的脉搏。
准备好许多文件上传到您的网站了吗？将它们备份到最可靠的云存储中。
本文最初发表在“创意网站设计”杂志上 网站设计者.
