IntelliJ IDEA支持:Angular

2019-02-18 17:11 更新

Angular是用于构建跨平台应用程序的流行框架。IntelliJ IDEA为Angular提供支持,并帮助您完成开发过程的每一步 - 从创建新的Angular应用程序到组件的调试和测试。

在开始使用Angular之前,你必须安装Node.js。

创建一个新的Angular应用程序

您可以使用Angular CLI或创建一个空的IntelliJ IDEA项目并在其中安装Angular。

Angular CLI是开始创建新Angular应用程序的推荐方法。Angular CLI应全局安装,以便可以在任何IntelliJ IDEA项目中使用。

全局安装Angular CLI

  • 打开内置的IntelliJ IDEA 终端(Alt+F12)并在命令提示符下键入
    npm install -g @angular/cli

创建应用程序

  1. 在主菜单上选择:文件|新建|项目,或单击欢迎屏幕上的“新建项目”按钮。
  2. 在“项目类别和选项”对话框(“新建项目”向导的第一页)中,在左侧窗格中选择“静态Web”。
  3. 在右侧窗格中,选择AngularCLI,然后单击“下一步”。
  4. 在向导的第二页上,指定项目名称和要在其中创建的文件夹。在Node Interpreter字段中,指定要使用的Node.js解释器。从下拉列表中选择已配置的解释器,或选择“添加”以配置新的解释器,在“Angular CLI”字段中,指定@angular/cli包的路径。
  5. 单击“完成”后,IntelliJ IDEA将生成一个包含所有必需配置文件的Angular特定项目。

创建一个空的IntelliJ IDEA项目

  1. 在主菜单上选择:文件|新建|项目,或单击欢迎屏幕上的“新建项目”按钮。
  2. 在“项目类别和选项”对话框(“ 新建项目”向导的第一页)中,在左侧窗格中选择“静态Web”。
  3. 在右侧窗格中,选择“静态Web”,然后单击“下一步”。
  4. 在向导的第二页上,指定项目名称和要在其中创建的文件夹。
  5. 单击“完成”后,IntelliJ IDEA将创建并打开一个空项目。

在空项目中安装Angular

  1. 打开您将使用Angular的空项目。
  2. 打开嵌入式终端(查看|工具窗口|终端(View | Tool Windows | Terminal),或使用Alt+F12),并在命令提示符下键入“npm install @angular/core”。这将使用框架的关键运行时部分安装核心Angular包。您可能还需要安装Angular的其他软件包。

从现有的Angular应用程序开始

要继续开发现有的Angular应用程序,请在IntelliJ IDEA中打开它并下载所需的依赖项。

打开计算机上已有的应用程序源

  • 单击欢迎屏幕上的“打开”,或在主菜单上选择:文件|打开。在打开的对话框中,选择存储源的文件夹。

从版本控制中检出应用程序源

  1. 单击“欢迎”屏幕上的“从版本控制中签出”,或从主菜单上选择:VCS|从版本控制中签出。
  2. 从列表中选择您的版本控制系统。
  3. 在打开的特定于VCS的对话框中,键入您的凭据和存储库以检出应用程序源。

下载依赖项

  • 单击弹出窗口中的“运行'npm install'(Run 'npm install')”:
    打开Angular应用程序并从package.json下载依赖项

使用ng add向Angular应用程序添加新功能

在使用Angular CLI 6或更高版本的项目中,您可以使用Angular Dependency操作添加新库。此操作运行安装依赖项的ng add命令,并使用特殊安装脚本更新应用程序。请注意,并非所有库都支持使用ng add安装。

  1. 在主菜单上选择:文件|新建,或“项目”工具窗口按Alt+Insert,然后选择“Angular依赖”。
  2. 从列表中,选择要添加的库。该列表显示了可以使用np add明确安装的库。要安装不在列表中的软件包,请滚动到其末尾,然后双击上面未列出的安装软件包链接,然后在打开的对话框中指定软件包名称。

    下面的示例说明了将Angular Material添加到项目中。

    2dd75bb6-3bdc-4b26-9011-049bb5f7b7ed

如果您通过package.json手动管理依赖项,IntelliJ IDEA仍会识别支持ng add的包。当您将这样的包添加到package.json时,IntelliJ IDEA建议安装它ng add。

IntelliJ IDEA建议使用ng add添加依赖项

如果已安装此类依赖项,您可能仍希望使用ng add重新安装它。在package.json文件中,选择包的名称,按Alt+Enter,然后单击“使用ng add重新安装”。

使用ng add重新安装包

使用Angular Schematics生成代码

在Angular CLI 6项目中,IntelliJ IDEA可以使用库中定义的原理图,如@angular/material和Angular CLI本身定义的原理图生成代码。对于早期版本,IntelliJ IDEA仅生成在Angular CLI中定义的组件,服务和其他蓝图。

  1. 在主菜单上选择:文件|新建,或在“项目”工具窗口上按Alt+Insert,然后选择Angular Schematic。
  2. 从列表中选择相关的原理图。
    选择角度示意图
  3. 在打开的对话框中,根据需要指定要生成的原理图的名称和其他选项。IntelliJ IDEA显示原理图的描述,并提供代码完成和可用选项的描述。
    生成Angular CLI原理图:提供代码完成和描述

使用Angular语言服务

IntelliJ IDEA与Angular团队开发的Angular语言服务集成,以改进Angular-TypeScript项目的代码分析和完成。请注意,Angular语言服务仅适用于使用Angular 2.3.1或更高版本以及与之兼容的TypeScript版本的项目。还要确保项目中有tsconfig.json文件。 

安装@angular / language-service包

  1. 打开嵌入式终端(查看|工具窗口|终端,或使用Alt+F12)。
  2. 将当前文件夹更改为项目根目录,然后在命令提示符下键入
    npm install @angular/language-service --save-dev

该Angular语言服务默认情况下处于激活状态,因此IntelliJ IDEA会和TypeScript服务一起自动启动它,并显示所有的都在编辑器中,并在编辑器和TypeScript工具窗口中显示你的TypeScript和HTML文件中的所有错误和警告。

切换服务的状态

  1. 在“设置/首选项”对话框(Ctrl+Alt+S)中,单击“语言和框架”下的“文件夹 ”。将打开TypeScript页面。
  2. 选中TypeScript Language Service复选框,然后选中或清除Angular Language Service复选框。

使用Angular Material Design组件

IntelliJ IDEA识别Angular Material组件和属性,并为它们提供编码帮助:

  • 完成组件
    Angular组件的建议完成变体列表
  • 完成属性
    Angular属性的建议完成变体列表
  • 在组件或属性及其声明(Ctrl+B,或上下文菜单上的“转到|声明”)之间导航。

安装Angular Material

  • 打开内置的IntelliJ IDEA终端(Alt+F12)并在命令提示符下键入
    npm install --save @angular/material
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号