Angular2 - 如何启动和使用哪个IDE

Question

我现在使用AngularJS 1.x几个月了。现在我将切换到Angular2（使用TypeScript），实际上我不确定使用哪个IDE。 我还不清楚如何将TypeScript代码编译成JavaScript - 实际上这是必要的吗？ 我已经读过Visual Studio Code对于Angular2项目来说是一个不错的编辑器 - 是否包含TypeScript编译器？我会很高兴收到这方面的任何信息。

Answer 1

1）IDE

我想知道哪个IDE最适合Angular2。

我是一个很棒的 Sublime Text 支持者，甚至还有一个Typescript插件......使用Typescript功能感觉并不完美。

所以我尝试了我的第二个最喜欢的编辑器： Atom （+ Typescript插件）。 更好但不支持自动导入（也许现在有一些？）而且，在我获得任何自动完成之前我必须等待30秒。

然后我尝试了Webstorm，因为我目前正在工作的公司有一些许可证。这很棒，一个月我真的很开心。但使用一个非自由的编辑器感觉......很奇怪。我不会在家里用它来做个人项目，我不能轻易地推荐给其他人。诚然，我不是Webstorm界面的超级粉丝。

所以我给了（另一个）尝试 Visual Studio Code ，几个月前我第一次尝试时，我发现它并不那么好。它已经发生了严重的变化和：
- 这很简单 - 它完整了 - 代码
- 调试器（远程 - >超级强大）
- Git整合
- 插件商店
- 它有很棒的Angular2支持
- intellisense真的很棒

我使用它已经一个月了，到目前为止，我真的很开心，不觉得有必要改变。

只是为了帮助你开始使用好的插件，这是我的：

2）Angular 2：发现基础知识

由于您熟悉AngularJs，我不知道您对官方文档的看法，但我无法从中学习。我必须遵循许多（不同的）教程，然后在我理解AngularJs之后我就习惯了。

使用Angular2，他们理解拥有优秀文档的挑战，并且他们从alpha版本开始就关注它（即使它不断发展=）！）。

所以我建议你继续https://angular.io，然后阅读文档。

它做得很好，不仅适用于高级用户。你会在那里找到很好的教程！

3）如何在Visual Studio代码中使用Typescript？

我强烈建议您使用 angular-cli 来开发Angular2应用。不仅为了简单起见，而且因为在社区中我们需要一个基本的启动器，这使我们能够拥有类似的结构化回购。所以我们可以很容易地理解其他项目的结构。

另外，angular-cli为您处理Typescript编译，您无需在命令行或IDE中处理它。

npm i -g typescript

（自从Typescript 2.0以后不再需要打字了！）

npm i -g angular-cli
ng new my-super-project --style=scss
cd my-super-project

然后运行

ng serve

访问您的应用：http://localhost:4200

Angular-cli编译你的Typescript甚至你的（sccs | sass | less）文件。

当您要部署应用时：

ng serve --prod

还将最小化JS和CSS。

4）下一步是什么？

一旦你对Angular2感到更舒服，我强烈建议你学习（更多）关于
- Redux
- RxJs

一旦熟悉了这些概念，就应该开始使用ngrx。

在这漫长（又棒的）旅途中祝你好运！

我发布了一个ngrx启动器！对于熟悉Redux并愿意发现角度和/或ngrx的人来说，它可能会帮助您入门！我确信将这个模板用作任何类型的ngrx项目（小型，中型甚至大型）的入门者也是一个好主意。我试图在自述文件中描述如何使用它，并且代码本身有很多注释：https://github.com/maxime1992/angular-ngrx-starter

Answer 2

我有同样的问题，因为自从Angular 2发布以来，我看起来很好的免费软件IDE支持Angular 2.我将描述我的经验。

的 NETBEANS

这是一个非常好的Java IDE，非常适合Web开发。有许多功能可以促进您的工作。我安装了在github上维护的插件Everlaw Typescript：

插件：https://github.com/Everlaw/nbts/releases

<强>优点

• 可以从项目资源管理器中获取打字稿操作（构建，运行等）。
• 插件可以在保存时构建TS文件。

<强>缺点

• 缺少对Angular 2的支持，因为这个插件只支持打字稿。
• 在角度模板文件和ts文件中使用智能感和语法高亮显示麻烦。
• NG2缺少样板模板。

的 ECLIPSE

带有Angular2Eclipse插件的IMHO Eclipse现在是Angular 2用途的最佳IDE之一。它是一个成熟的解决方案，具有许多功能，可以促进您的工作。

插件：https://marketplace.eclipse.org/content/angular2-eclipse

<强>优点

• 与angular-cli集成
• 支持组件模板中的Angular2语法。
• 支持打字稿文件。
• 可用的Angular 2样板模板。

<强>缺点

恕我直言，没有任何不利之处。

如果您正在寻找如何配置IDE的好教程，请尝试使用

https://jaxenter.com/angular-2-intellij-netbeans-eclipse-128461.html

VS代码 + Angular语言服务

自从角度发布语言服务以来，我已将IDE更改为VS Code。我曾经研究过日食，但现在我认为VS Code更好，因为它比使用角度插件的日食更快更亮。

  

Angular语言服务是一种在Angular模板中获取完成，错误，提示和导航的方法，无论它们是HTML文件中的外部还是嵌入字符串中的注释/装饰器。

您可以在此处阅读更多内容https://angular.io/guide/language-service

如果要安装该插件，请启动VS Code Quick Open（Ctrl + P），粘贴以下命令，然后按enter键。

ext install Angular.ng-template

插件页面https://marketplace.visualstudio.com/items?itemName=Angular.ng-template