Angular 5 新增功能及首个 Angular 5 应用设置

目录

• 引言
• 背景
• Angular 5 有哪些新内容？
  • AOT 编译器
  • 优化
  • 软件包更新
  • 新的 HttpClient
  • 其他更新
• 创建您的第一个 Angular 5 应用
• 结论
• 轮到你了。你怎么看？

引言

我们都知道 Angular 5 版本已于几周前发布，您是否迫不及待地想知道 Angular 5 有哪些新功能？它们如何让我们的开发更轻松？在这篇文章中，我将讨论 Angular 5 中的一些更新。当然，我不会讨论此版本发布的所有内容。在这里，我们还将学习如何创建您的第一个 Angular 5 应用。因此，在阅读完本文后，您将拥有自己的示例应用程序。为此欢呼！希望您喜欢这篇文章。

源代码

您随时可以 在此处 克隆或下载源代码

背景

正如我之前提到的，这篇文章将为您介绍 Angular 5 中的更改或更新。我们将使用 Angular CLI 和 NPM（Node 包管理器）创建一个基本的 Angular 应用程序。因此，如果您尚未在机器上安装 NodeJS，请前往 此处 进行安装。现在，让我们看看 Angular 5 的主要更新。

Angular 5 有哪些新内容？

虽然有一些更新，但我认为更多的注意力集中在性能和效率方面。以下是主要更新领域的列表。

AOT 编译器

AOT 是 Ahead of Time（预编译）编译器，顾名思义，它将我们所有的 TypeScript 代码转换为原生的 JavaScript 代码，以确保所有浏览器都支持。前一个版本也是通过 Just In Time（即时编译）编译器完成的，那么有什么区别呢？AOT 在代码在浏览器中运行之前进行编译，而 JIT 则在运行时进行编译。因此，页面渲染速度更快。

优化

正如我之前提到的，开发团队更加关注 Angular 5 的性能方面。其中两项改进是：

1. 提高速度
2. 更小的打包文件

软件包更新

一些软件包有所更新，其中一些是：

1. Angular CLI 1.5 现在支持 Angular 5
2. RXJS 版本已升级到 5.5
3. TypeScript 已更新到 2.4

新的 HttpClient

一些模块也发生了一些变化，新的 HttpClient 模块比以前的版本更快、更轻量。因此，旧的 Http 模块已被弃用，但是，您仍然可以在您的应用程序中使用它，只是它将在未来的更新中消失。新模块可以如下导入：

Import {HttpClientModule} from ‘@angular/common/http’

其他更新

还有一些与许多模块和类别相关的其他更新。其中一些是：

1. 表单验证方面的一些更改，特别是关于失去焦点和提交时的行为
2. 管道现在更加标准化和国际化
3. 旧的管道现已弃用
4. 引入了一个新模块 ServerTransferStateModule

抱歉，我没有包含任何代码片段来突出实际更改，我将很快发布一篇带有完整代码更改的文章。

创建您的第一个 Angular 5 应用

要轻松创建 Angular 应用程序，您首先需要安装 Angular CLI。希望您已经完成了。现在让我们开始这个过程。

打开您的 Node 包管理器控制台，并创建一个目录，我们将在此下载所有 Angular 文件。

mkdir Angular5

现在我们可以将光标移到该文件夹。

cd Angular5

现在我们可以检查 Node 和 NPM 是否已安装。

D:\SVenu\FullStackDevelopment\Angular\Angular5>node -v

如果已安装，您将看到版本号，我的版本是 v7.9.0。

D:\SVenu\FullStackDevelopment\Angular\Angular5>npm -v

我的 NPM 版本是 4.2.0。

万一您需要更新 NPM 版本，可以使用前面的命令进行操作。

D:\SVenu\FullStackDevelopment\Angular\Angular5>npm i -g npm

在我更新 NPM 版本后，命令 npm -v 显示为 5.5.1。现在我们可以继续了。我们的下一步是安装 Angular CLI，让我们开始吧。

D:\SVenu\FullStackDevelopment\Angular\Angular5>npm install @angular/cli -g

如果您想检查 Angular CLI 的版本，可以使用以下命令。

D:\SVenu\FullStackDevelopment\Angular\Angular5>ng -v

结果可能如下所示：

Angular CLI: 1.5.0
Node: 7.9.0
OS: win32 ia32
Angular:
…

现在是时候创建我们的 Angular 项目了，请使用以下命令：

D:\SVenu\FullStackDevelopment\Angular\Angular5>ng new MyAngular5App

在这里，MyAngular5App 是项目名称。运行该命令后，它将执行三个任务：

1. 创建所需的组件
2. 通过 npm 安装工具包
3. 初始化 git

现在，如果您进入您的项目目录，您可以看到所有文件都已包含在其中。您可以继续在任何源代码编辑器中打开这些文件。

最后一步是运行我们的应用程序。

D:\SVenu\FullStackDevelopment\Angular\Angular5>cd MyAngular5App

D:\SVenu\FullStackDevelopment\Angular\Angular5\MyAngular5App>ng serve

上述命令将构建您的应用程序，并默认服务于 4200 端口。您可能会在命令窗口中看到以下输出：

** NG Live Development Server is listening on localhost:4200, 
   open your browser on https://:4200/ **
Date: 2017-11-15T07:45:17.925Z
Hash: dd334581365d3dd74dfd
Time: 21845ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 24.3 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 554 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 34.9 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 8.03 MB [initial] [rendered]

webpack: Compiled successfully.

现在让我们通过访问 https://:4200 来运行我们的应用程序。我敢肯定，您将看到一个 Angular 应用程序，如下所示：

结论

非常感谢您的阅读！ 我是否遗漏了您认为需要的东西？您是否觉得这篇文章有用？我希望您喜欢这篇文章。请分享您宝贵的建议和反馈。

现在轮到你了。你有什么想法？

没有评论的博客算不上博客，但请尽量保持话题的相关性。如果您有与本文无关的问题，最好将其发布到 C# Corner、Code Project、Stack Overflow、ASP.NET 论坛，而不是在此处评论。请在下方的评论部分留下您的问题，我将尽力提供帮助。