IntelliJ IDEA与AngularJS框架集成

2018-09-17 10:17 更新

AngularJS

在开始之前,请确保您的计算机上有Node.js.

IntelliJ IDEA与AngularJS框架(也称为Angular 1)集成, 用于开发单页Web应用程序。IntelliJ IDEA为预定义和自定义ng指令以及控制器和应用程序名称提供了AngularJS感知的完成选项,以及大括号表达式{{}}内的数据绑定提供了代码洞察力。您可以使用内置的AngularJS live模板和HTML中的控制器的名称和它在JavaScript中的定义之间导航,或者在ngView或&routeProvider和模板之间导航。对于AngularJS实体,使用Go To符号导航。

创建一个新的AngularJS应用程序

您可以使用 AngularJS 种子项目, 或者创建一个空的 IntelliJ 想法项目, 并通过下载 AngularJS 框架或与鲍尔软件包管理器进行手动安装 AngularJS。

您可以使用AngularJS seed项目或创建一个空的IntelliJ IDEA项目,并通过下载AngularJS框架或Bower包管理器手动安装AngularJS。

使用seed项目创建应用程序:

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

    从Version下拉列表中,选择分支https://github.com/angular/angular.js以从中下载项目模板。默认情况下,显示为master形状。

  5. 单击“完成”后,IntelliJ IDEA将生成AngularJS特定的项目结构,其中包含基于AngularJS seed项目的所有必需配置文件

要下载AngularJS依赖项,请执行以下操作之一:

AngularJS依赖项包含AngularJS代码以及支持开发和测试的工具。

  • 打开嵌入式终端(查看|工具窗口|终端,或按Alt+F12)并在命令提示符下键入:npm install。
  • 在项目根目录中的package.json文件的上下文菜单中选择:Run'npm install'。

创建一个空的IntelliJ IDEA项目:

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

手动在空项目中安装和配置AngularJS

  1. 在http://angularjs.org/下载AngularJS框架。
  2. 打开将使用AngularJS的空项目。
  3. 将AngularJS配置为IntelliJ IDEA JavaScript库,让IntelliJ IDEA识别AngularJS特定结构并提供完整的编码帮助:
    1. 在“设置/首选项”对话框(Ctrl+Alt+S)中,单击“JavaScript库”。
    2. 在“库”区域中,单击“添加”按钮。
    3. 在打开的“新建库”对话框中,指定库的名称。
    4. 单击库文件列表旁边的“添加”按钮 ,然后在上下文菜单中选择“附加文件”或“附加目录”,具体取决于您是需要单独的文件还是整个文件夹。
    5. 在打开的对话框中选择Angular.js或Angular.min.js,或整个目录。IntelliJ IDEA返回“新建库”对话框,其中“Name”只读字段显示所选文件或文件夹的名称。
    6. 在“Type”字段中,指定已下载并将要添加的版本。
      • 如果添加Angular.js,请选择“调试”。此版本在开发环境中很有用,尤其适用于调试。
      • 如果添加了minified Angular.min.js,请选择Release。此版本在生产环境中很有用,因为文件大小要小得多。

通过Bower在空项目中安装AngularJS:

  1. 打开将使用AngularJS的空项目。
  2. 如“Bower”一节中所述方式安装Bower。
  3. 打开嵌入式终端(查看|工具窗口|终端,或按Alt+F12),并在命令提示符下键入:bower install angular,以将程序包安装为项目依赖项。

从现有的AngularJS应用程序开始

如果您的项目中已经有Angular源(例如,在bower_components文件夹中),只需打开项目并开始工作。如果从项目中排除这些源,则只需将AngularJS配置为JavaScript库。

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

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

下载依赖项:

  • 单击弹出窗口中的:Run 'npm install':
    ws_npm_yarn_package_run_npm_install.png

使用AngularJS路由器状态图

您可以看到一个图表,说明使用ui-router的AngularJS应用程序中的视图,状态和模板之间的关系。

生成和查看图表:

  • 在编辑器中打开所需的文件,然后在上下文菜单中选择:Diagrams|显示AngularJS ui-router状态图。IntelliJ IDEA生成一个图表并在单独的编辑器选项卡中显示。

从图中的元素导航到实现此元素的代码:

  • 选择它,然后在上下文菜单中选择“跳转到源”。
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号