Java开发平台IntelliJ IDEA教程：AngularJS

本系列教程内容为如何将IntelliJ IDEA与您喜欢的语言，平台或框架结合使用。本教程将为您介绍AngularJS?。

IntelliJ IDEA是Java语言开发的集成环境，IntelliJ在业界被公认为优秀的Java开发工具之一，尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、 创新的GUI设计等方面的功能可以说是超常的。

IntelliJ IDEA最新版

此功能仅在Ultimate版本中受支持。

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

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

创建一个新的AngularJS应用程序 

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

使用种子项目创建应用程序

1. 选择文件| 新的| 从主菜单中选择项目，或单击欢迎屏幕上的新建项目按钮。

2. 在“ 项目类别和选项”对话框（“ 新建项目”向导的第一页）中，在左侧窗格中选择“ 静态Web ”。

3. 在右侧窗格中，选择AngularJS，然后单击Next。

4. 在向导的第二页上，指定项目名称和要在其中创建的文件夹。

5. 从版本列表中，选择分支https://github.com/angular/angular.js以从中下载项目模板。默认情况下，master如果显示。

6. 单击“完成”时 IntelliJ IDEA 基于AngularJS种子项目生成包含所有必需配置文件的AngularJS特定项目结构

要下载AngularJS依赖项，请执行以下操作之一：

1. 在嵌入式终端（Alt+F12）中，键入：

2. npm install

3. 从项目根目录中的package.json文件的上下文菜单中 选择Run’npm install’。 

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

创建一个空的IntelliJ IDEA项目 

1. 选择文件| 新的| 从主菜单中选择项目，或单击欢迎屏幕上的新建项目按钮。在“ 项目类别和选项”对话框（“ 新建项目”向导的第一页）中，在左侧窗格中选择“ 静态Web ”。

2. 在右侧窗格中，选择Static Web，然后单击Next。

3. 在向导的第二页上，指定项目名称和要在其中创建的文件夹。

4. 单击“完成”后，IntelliJ IDEA将创建并打开一个空项目。

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

1. 下载AngularJS框架。

2. 打开您将使用AngularJS的空项目。

3. 将AngularJS配置为IntelliJ IDEA JavaScript库，让IntelliJ IDEA识别AngularJS特定结构并提供完整的编码帮助：

4. 在“ 设置/首选项”对话框（Ctrl+Alt+S）中，转到“ 语言和框架”| JavaScript | 图书馆。将打开“ JavaScript库”页面。

5. 在“ 库”区域中，单击“ 添加”按钮。

6. 在打开的“ 新建库”对话框中，指定库的名称。

7. 单击

   库文件列表旁边的，然后 从上下文菜单中选择“ 附加文件”或“ 附加目录 ”，具体取决于您是需要单独的文件还是整个文件夹。

8. 选择Angular.js或Angular.min.js，或打开的对话框中的整个目录。IntelliJ IDEA返回“ 新建库”对话框，其中“ 名称”只读字段显示所选文件或文件夹的名称。

9. 在“ 类型”字段中，指定已下载并将要添加的版本。

10. 如果添加了Angular.js，请选择Debug。此版本在开发环境中很有用，尤其适用于调试。

11. 如果添加了缩小的 Angular.min.js，请选择“ 释放”。此版本在生产环境中很有用，因为文件大小要小得多。

通过Bower在空项目中安装AngularJS 

1. 打开您将使用AngularJS的空项目。

2. 安装 Bower

3. 在嵌入式Terminal（Alt+F12）中，键入bower install angular以将程序包安装为项目依赖项。

4. 您还可以按照管理Bower软件包中的说明在“设置/首选项”对话框 的“ Bower”页面 angular上安装软件包。

从现有的AngularJS应用程序开始 

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

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

1. 单击“ 欢迎”屏幕上的“ 从版本控制中签出”或选择“ VCS” 从主菜单中查看版本控制。

2. 从列表中选择您的版本控制系统。

3. 在打开的特定于VCS的对话框中，键入您的凭据和存储库以检出应用程序源。

下载依赖项

单击弹出窗口中的“运行’npm install’：

使用AngularJS路由器状态图

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

生成和查看图表

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

选择它并从上下文菜单中选择Jump to Source。

相关阅读推荐：

IntelliJ IDEA最新版本2019.2全面解析，Java 13预览等多项新功能上线 （上）

IntelliJ IDEA最新版本2019.2全面解析，Java 13预览等多项新功能上线 （下）

=====================================================

想要购买IntelliJ IDEA正版授权的朋友可以咨询官方客服。

标签：