GoLand 2025.2 Help

AngularJS

AngularJS ，也称为 Angular 1 ，是一个用于开发单页 Web 应用的框架。 GoLand 会为预定义和自定义 ng 指令、控制器和应用名称提供 AngularJS 感知的代码补全选项，以及大括号表达式中的数据绑定代码洞察功能 {{}}。 您可以使用内置的 AngularJS 活动模板，并在 HTML 中控制器名称与 JavaScript 中的定义之间，或在 ngView 与 &routeProvider 和模板之间进行导航。 对于 AngularJS 实体，请使用 Go To Symbol 导航功能。

准备工作

  1. 下载并安装 Node.js。

  2. 请确保设置中已启用 JavaScript and TypeScript 插件。 按下 Ctrl+Alt+S 以打开设置，然后选择 插件。 单击 已安装 选项卡。 在搜索字段中输入 JavaScript and TypeScript。 有关插件的更多信息，请参阅 Managing plugins。

  3. 请在 设置 | 插件 页面、 Marketplace 选项卡中安装并启用 Angular and AngularJS 插件，具体方法请参见 Installing plugins from JetBrains Marketplace。

创建一个新的 AngularJS 应用

您可以通过手动下载 AngularJS 框架或使用 Bower 包管理器，将 AngularJS 安装到项目中。

下载 AngularJS 依赖项

  • 在嵌入式 终端 （Alt+F12 ）中输入：

    npm install

  • 或者，在项目根目录中，右键单击 package.json 文件并选择 运行 'npm install'。

创建一个空的 GoLand 项目

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

  2. 选择 Angular CLI 项目。 该菜单项仅在您安装了 Angular and AngularJS 插件之后才可用。

  3. 为新项目命名并根据需要更改其位置，然后单击 创建。

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

  1. 请在 http://angularjs.org/ 下载 AngularJS 框架。

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

  3. 将 AngularJS 配置为 一个 GoLand 的 JavaScript 库，以便 GoLand 能识别 AngularJS 特有结构并提供完整的编码支持：

    1. 在 设置 对话框中（Ctrl+Alt+S ），转到 语言和框架 | JavaScript | 库。

    2. 在 库 区域中，单击 添加 按钮。

    3. 在打开的 新建库 对话框中指定库的名称。

    4. 在库文件列表旁边，点击 添加 按钮（添加按钮 ），然后选择 附加文件… 或 附加目录… ，具体取决于您是否需要单个文件还是整个文件夹。

    5. 在打开的对话框中选择 Angular.js 、 Angular.min.js ，或者整个目录。

      GoLand 将返回到 新建库 对话框，此时 名称 只读字段将显示所选文件或文件夹的名称。

    6. 在 类型 字段中，指定已下载并准备添加的版本。

      • 如果您添加了 Angular.js ，请选择 调试。 此版本在开发环境中非常有用，特别适用于调试。

      • 如果您添加了 minified Angular.min.js ，请选择 发布。 该版本适用于生产环境，因为文件体积显著更小。

    详细信息请参见 配置 JavaScript 库。

使用 Bower 在空项目中安装 AngularJS

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

  2. 按照 Bower 中的说明安装 Bower。

  3. 在嵌入的 终端 （Alt+F12 ）中，键入 bower install angular 以将该包作为项目依赖安装。

以现有 AngularJS 应用为起点

如果您的项目中已经包含 Angular 源码（例如在 bower_components 文件夹中），只需打开项目即可开始工作。 如果这些源被 从项目中排除 ，那么您只需将 AngularJS 配置为 JavaScript library。

从版本控制中检出应用源代码

  1. 在 欢迎 界面中点击 克隆。

    或者在主菜单中选择 Git | 克隆… 或 版本控制 | 从版本控制获取。

    在主菜单中， Git 可能会被与项目关联的其他版本控制系统替代。 例如， Mercurial 或 Perforce。

    check_out_from_vcs

下载依赖项

  • 在弹出窗口中点击 运行'npm install'：

    打开 Angular 应用并从 package.json 下载依赖项

项目安全性

当您打开一个在 GoLand 之外创建并导入到其中的项目时，GoLand 会显示一个对话框，供您决定如何处理该项目中不熟悉的源代码。

不受信任的项目警告

请选择以下选项之一：

  • 在安全模式中预览 ：在这种情况下，GoLand 以预览模式打开项目。 这意味着您可以浏览项目源代码，但无法运行任务和脚本，也无法运行或调试项目。

    GoLand 会在编辑器区域顶部显示通知，您可以随时点击 信任项目… 链接加载您的项目。

  • 信任项目 ：在这种情况下，GoLand 会打开并加载项目。 这意味着项目已初始化，插件已解析、依赖项已添加，且 GoLand 的全部功能可用。

  • 不打开 ：在这种情况下，GoLand 不会打开该项目。

详细了解请参阅 项目安全。

使用 AngularJS Router 状态图

在使用 ui-router 的 AngularJS 应用中，您可以查看展示视图、状态和模板之间关系的图示。

生成并查看图表

  • 在编辑器中打开所需文件，然后在上下文菜单中选择 图表 | 显示AngularJS ui-router 状态图。 GoLand 会生成一张图，并在单独的编辑器标签页中显示。

  • 选中元素，在上下文菜单中选择 跳转到源代码。

最后修改日期： 2025年 9月 26日
JavaScriptBower