跳入Angular CLI

佩德罗·埃斯佩兰萨| 工程前端工程师

Angular CLI提供了丰富的命令行工具套件,可让您非常快速地启动并运行Angular。 你会得到:

  • 具有延迟加载功能的运行中的开发服务器。
  • 骨架应用程序生成器,具有很多选项。
  • 组件,服务,管道和其他类型事物的生成器。
  • 完整的构建环境。
  • 带有调试器的实时重新加载单元测试运行程序。
  • ASS
  • TypeScript。
  • 路由。

在CLI的基础上建立应用程序可以使您的工作异常繁忙。 您可以使用一些shell命令遍历功能部件骨架,并在数小时内演示工作原型。

通过NPM安装:

 重击 
npm install -g @ angular / cli

重要的是不要与不再维护的旧ng-cli项目混淆。 您需要的版本可以在这里找到:

角度CLI

您很可能希望在全局范围内安装它,以便可以从命令行运行ng 。 CLI会在node_modules中寻找本地版本,因此您不必担心会污染全局名称空间。 您将始终运行安装在最近的父节点node_modules文件夹中的版本。

生成器使您仅需一个命令即可创建一个完整的骨架项目:

  ng new my-app 

您将立即获得生成器,测试和开发环境。 但是,您可以在此处执行其他操作。 如果您想查看整个列表,可以像这样调用帮助:

  ng help new 

在Beamery,我们通常会启动一个新项目,如下所示:

  ng new my-app --style sass --prefix bmr --routing true 

这为我们提供了SASS,路由,并且我们的新组件会自动以bmr-作为前缀

如果此脚本似乎卡在npm安装阶段,则可以安全地将 ctrl-c 移出 该目录 ,然后使用 cd 手动 进入目录和 npm i

cd进入正确的目录,然后使用以下命令启动开发服务器:

  ng服务 

默认情况下,您将在以下位置找到运行的开发服务器:http:// localhost:4200

启动服务器可能需要花费几秒钟的时间,但是由于它是webpack,因此一旦将其加载到内存中,重新加载更新的代码就很快了。

Angular 2完全是可测试的,因此您可能希望一直运行测试。 使用以下命令启动测试服务器:

  ng测试 

在测试中,您将获得一个不错的实时重新加载基于Web的控制台。

如果单击调试按钮,则将获得同一页面的非实时重新加载版本。 这很有用,因为您可以直接在控制台中检查和调试源代码。 如果单击单个测试或描述块,则可以将测试运行仅限于该测试或测试块。 这是一种高效的工作方式。

当然,您可以使用任何喜欢的编辑器,但是对于TypeScript,我们倾向于使用Visual Studio代码。 这是一个基本的文本编辑器,具有与Sublime相似的键盘快捷键。 它非常稳定,并且具有出色的TypeScript插入和重构插件。

您应该考虑安装的插件包括:

  • 编辑器配置
  • TSLint
  • 移动TS
  • TypeScript工具箱

与所有插件一样,您应该随着时间的推移逐步安装它们,以使自己习惯它们。

CLI的最大优势之一是您可以非常迅速地搭建新的组件树。 通常,您可以准备几个小时内显示的功能应用程序框架。

使用以下内容制作一个新组件:

  ng g组件new-component 

将创建该组件,其中包含已连接到模块中的模板和规范。 如果您运行的是规范,则会看到它们实时更新以反映您的更改。

要找出您还能生成什么,请运行:

  ng help g 

您将看到列出了所有生成器及其所有命令行选项。 能够生成这样的组件,使您可以立即原型化新功能。

如果您决定部分或全部使用Angular 2,CLI将极大地加快开发速度。