Angular 2 – 提升水平的最佳实践

Angular 2 正在全世界范围流传并且变得越来越受欢迎，因此越来越多的人开始学习并使用它。然而，不论你是编程专家还是初学者，当你使用 Angular 2 时，这里有一些你应该遵循的基本指导原则和实践准则。

我收集了 12 条最佳实践与技巧来帮助你写出更好和更清晰的代码。

请注意 ：如果你刚接触这个话题，你应该阅读由官方社区与核心贡献者驱动的官方 Angular 风格指南 （最佳的实践）

1 – Cli/Boilerplate

如果你刚开始使用 Angular 2，使用 angular-cli (npm i angular-cli -g)。它基于 ember-cli。你可以生成 ng 初始化项目名称的一个很棒的样例，此命令将初始化一个新的 Angular 2 应用程序。这个应用程序应该可以运行，并且遵循了官方 Angular 2 风格指南的所有最佳做法。

此外，它安装时需要 npm 的依赖。它还创建单元测试和端到端的测试脚本。简而言之，它所做的一切都需要开始一个新的 Angular 2 应用程序。如果你不喜欢目录结构或者system.js，你可以使用最好的入门套件angular2-webpack-starter 或者 其他的 Boilerplates 。

作者笔记：如果你想提高你的抽样进程使之更进一步，尝试我们的内部工具， Angular Slice 。我们开发这个工具，用来从图形输入生成项目代码库。我们定义了基于视觉的组件并且在此生成它们。

我们花在抽样的时间平均减少了 70%！我们使得几周内可以提供给你通道。而在早期发展时段，我们只能给 前500个用户 位置！

你可以在这 预定你的位置 。

2 – 构建应用程序

Angular2 使用 Rollup 来建立下一代ES6模块打包。我使用 browserify （我是node stream的狂热者）及 webpack 也不错，因为这有更多的loaders和可用插件，用来支持 Rollup 功能设置如： rollup-loader 和 rollupify 。Rollup 可以使代码占用空间变小，但是wekpack和browserify有 rollup-loader 或 browserify rollupify 可以用它来缩小你的包。

在不久的将来，将会推荐使用 @angular/compiler(-cli) 和 @angular/platform-browser，采用 template compiler 生成，预编译好了模板与样式。按照这个情形可以加快你的包超过9x！

)

3 – 服务器端（通用）呈现

通用意味着同时在页面服务器和客户端呈现页面。它通常意味着使用前端的 JavaScript 和 Node.js。 因为他们允许re-usage库，允许浏览器的 JavaScript 代码运行在 node.js 环境且只需很小的修改,因此具有互换性。

如果你想在 node.js 上使用 Typescript，我不建议使用 ts-node 或者任何 hacks the require.extension 的 node 模块。

使用 “browserify – node” 或者 与正确配置好的 webpack 生成服务端。最普遍的例子就是 universal-starter 。

官方普遍最佳做法：“不要使用在全局命名空间中提供的任何浏览器类型，如导航器或文档。当应用程序在 HTML 序列化时，任何在 Angular 以外的东西会被忽略。如果你要访问这些类型，请使用 getDOM()from”angular / platform-browser / src / dom / dom_adapter””

“保持你的指令尽可能无状态。状态指示，你可能需要提供一个属性，反应相应的属性与初始字符串值如 URL 在 img 标记。为我们本地< img src = ” ” >元素的 src 属性体现为 src 属性的元素类型 HTMLImageElement。”

4 – IDE/编辑

我使用 Sublime 和 官方的 Microsoft plugin ，但我认为 atom 和 vscode（ Angular 2 非官方编辑器）也是开发的利器，但是比起 Sublime 慢很多。如果你喜欢复杂的 IDE ，建议使用Angular 2 支持 的 webstorm。

John Lindquist，egghead.io 的创始人，做了一套很好的视频，可以引导你完成 WebStorm 的所有新特性，帮助你顺利过渡到 Angular 2。

5 – 错误检测

我建议使用 tslint ，当使用 附带 codelyzer 和 ng2lint 的 typescript 时是最好的选择。 Valor-software 有一个非常有用的检测错误的项目, tslint-config-valor 包含所有明确规则。

6 – 文档

我使用 typedoc 生成文档，这有一个很棒的小工具可以让我们生成基于TypeScript文件的HTML文档，就像JavaDoc做得那样。这将编译所有的文档（(classes, namespaces, functions, etc.) 将它放在doc文件夹中命令行运行的当前目录下。它有不错的用户界面，但是生成模板有点难。

你愿意把你的团队提升到Angular的新水准么？点击这里看我们能如何帮助。

7 – 测试

Karma 有一个复杂的架构。我建议只使用 jasmine （mocha当时 还没有运行 ）。Gsans 就这个主题写了一篇精彩的 文章 ，它包含了很多的测试样板和模式的好例子。

永远不要在 ts 文件上运行测试，先进行编译。不幸的是，ts-node 非常 慢 ，即使是最新的版本。我的测试在 te-node 上运行需要10 s，而编译 js 只用了 1 s。

8 – TypeScript 和 ES6 的比较

我在一个基于 Angular 2 的应用程序上使用 typescript ，并且检测使用 rxjs （这也是用typerscript写的）。当你写代码时，这通常取决于 node modules：express， node libs 和 middlewares 使用ES6 . 很多包没有输入定义（d.ts）。

Typescript compiler（tsc） 编译代码 最快 ，但是有时不是标准方式。

9 – 命名规范

命名标准帮助开发人员更好理解彼此的代码并且让一切保持整洁。同类名及选择器一样，文件和文件夹名称命名也有相关的命名规范。这部分完全值得就这个主题写一篇文章，但是现在让我们用几个例子向你介绍一下先。如果你有兴趣了解更多，不要犹豫，直接观看官方的angular style guide’s site 。

保持简洁：

– 文件和文件夹名称 应该使用 dash-case 并且有一个说明功能的后缀，如*.component.ts, *.service.ts, *.interface.ts

-选择器也需要使用 dash-case 并且有一个前缀，作为一个命名空间。

-类（组件，服务，指令等）和接口用该使用 camelcase 和有一个说明类具体类型的后缀，如 *Component, *Service, 等。

10 – 目录和文件结构

目录和文件结构真的很难保持标准化。需求总是在项目中变更。我的目录结构可能会和官方样式指南有所不同，但也非常实用。在官方样式指南中，你使用共享文件夹（对于常见的组件、样式等）。

在我的版本，我把特别的文件放在页面的文件夹下，一般组件放在组件文件夹下，指令挡在指令文件夹下，等等。

)

只有全局服务到服务文件夹下。

保持测试接近源代码。

11 – Redux

总有一天，你的应用程序将会变大，所以你必须做出一个很好的架构，不仅仅为了一大套组件与服务。你必须处理状态和行为。我想 redux 是你应用程序的最好容器，因为所有的前端开发人员都知道它。

12 – 性能

首先阅读这篇文章 How to optimize Minesweeper using Angular 2 and Immutable.js to make it insanely fast 。这是这个话题中最好的之一。重要的是如果你有一个组件，只希望不可变的数据传递通过一个属性，你可以通过添加 changeDetection: ChangeDetectionStrategy.OnPush 到组件以进一步优化渲染速度。

Jürgen van de Moere 有一个很好的提示：

当使用不可变的数据时有一个好主意，使你的数据结构与组件的逻辑层次整齐有序,避免可能会导致严格的对象平等是错误的操作,尤其是当使用 ngFor 时。

+1 Reactivity

Rxjs 是一个很好的库，比起框架来更好地依赖库。框架经常改变，但是库会有更稳定的API，使用 @ngrx 扩展，如 @ngrx/store 和 @ngrx/router 来更好的利用 reactivity。

+2 路由器

不要使用过时的路由 (@angular/router-deprecated)，Angular 2 在试用版本状态也有一个弃用路由器。我建议新的路由 (@angular/router) 或者 @ngrx/router reactive solution 是最好的。两篇很好的关于这个话题的文章在这里 和 这里 。