您好，我是MetronomeKawakami（@saruyama_monki）。
在Angular Advent Calendar的第七天，我将使用WebStorm和Angular CLI来演示如何创建Angular2应用程序。

关于WebStrom 2016.3。

很抱歉我不会中文。我将使用英文为您提供翻译的结果，希望对您有所帮助。

抱歉，我将跳过有关WebStorm的介绍，它是一款付费的集成开发环境（IDE）。于11月14日进行了2016.3版本的更新，并且现在支持使用Angular CLI。

由于WebStorm包含在其他产品（如PhpStorm、RubyMine）中，因此可以以类似的方式使用。
如果你觉得这是付费软件…请先试用30天的免费试用版。我相信你会更加喜欢编程。

创建Angular2项目

打开 WebStrom，会弹出项目创建界面。

当点击“创建新项目”时，可以选择使用哪个模板进行创建。

从众多模板中选择Angular CLI，并输入项目名称后点击Create按钮，项目将被创建。

项目的初始设置

当项目被创建时，Angular 2 环境将会自动创建。

这是WebStorm为我们执行以下Angular CLI命令。完成所有步骤大约需要三分钟左右。

$ ng init --name=AdvetCalendar

执行完后，文件结构如上所述。

让我们尝试启动一下

那么，让我们直接启动这个应用程序试试看吧。

当你从左上角的菜单中点击”npm”，会在左侧出现一个窗口，其中列出了npm脚本的列表。从中选中”start”并进行双击操作。
双击后，底部会出现控制台，并显示脚本正在执行的过程。”start”执行的是以下命令。

$ ng serve

当执行结束后，将控制台滚动到顶部，然后在浏览器中打开显示的URL。

Angular2应用程序已启动，AppComponent已显示。
该服务器是一个Live Development Server，因此即使在没有重新加载浏览器的情况下，也可以添加和编辑组件并进行反映。

让我们尝试添加一个组件。

我们接下来尝试添加一些新组件。

从文件列表中，右键点击app目录。在新建菜单中选择Angukar CLI…。

选择后，将显示一个包含Angular2组件列表的窗口，请双击组件。

打开一个对话框以确定组件名称，然后输入组件名称并点击确定按钮。

当点击确定按钮后，Angular CLI将启动，并执行以下命令以创建组件。

$ ng generate component advent_calender.component

另外，如果在Angular CLI中创建组件，则会自动将其声明在NgModule中。

尝试一下Angular2的教程。

既然已经学会在WebStrom中使用Angular CLI，那么接下来我们来尝试一下Angular2的教程吧。虽然官方网站的教程也不错，但对于英语不擅长的同学来说，可以尝试一下ng-japan的实践资料！