Java开发平台IntelliJ IDEA教程:AngularJS 

翻译|使用教程|编辑:吴园园|2019-09-17 10:23:45.430|阅读 53 次

概述:本系列教程内容为如何将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':

Java开发平台IntelliJ IDEA教程:AngularJS 

使用AngularJS路由器状态图

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

生成和查看图表

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

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

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

相关阅读推荐:

IntelliJ IDEA最新版本2019.2全面解析,Java 13预览等多项新功能上线 (上)

IntelliJ IDEA最新版本2019.2全面解析,Java 13预览等多项新功能上线 (下)

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

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

850×100.png



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:IntelliJ IDEA https://www.jetbrains.com/help/idea/angularjs.html

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
IntelliJ IDEA

IntelliJ在业界被公认为优秀的Java开发平台之一,在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、 创新的GUI设计等方面表现突出,并支持基于Android平台的程序开发。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat