PyCharm 2025.3 Help

AngularJS

AngularJS (也称为 Angular 1 )是用于开发单页 Web 应用程序的框架。 PyCharm 会为预定义和自定义的 ng 指令、控制器和应用名称提供 AngularJS 感知的补全选项,并为花括号表达式 {{}} 中的数据绑定提供代码洞察。 您可以使用内置的 AngularJS 实时模板,并在 HTML 中的控制器名称与 JavaScript 中的定义之间导航,或在 ngView&routeProvider 与模板之间导航。 对于 AngularJS 实体,请使用 转到符号 导航。

开始之前

  1. 请确保您的计算机上已安装 Node.js

  2. 请确保在 设置 | 插件 页面, 已安装 选项卡上已启用所需的 JavaScript and TypeScriptAngular and AngularJS 插件。 有关详细信息,请参阅 管理插件

创建新的 AngularJS 应用

您可以在项目中安装 AngularJS,方式包括手动下载 AngularJS 框架,或使用 Bower 包管理器。

下载 AngularJS 依赖项

  • 在内置的 终端Alt+F12 )中,键入:

    npm install

  • 或者,在项目根目录中的 package.json 文件的上下文菜单中选择 运行 'npm install'

创建空的 PyCharm 项目

  1. 欢迎 屏幕上点击 创建新项目 ,或从主菜单中选择 文件 | 新建 | 项目。 将打开 新建 项目 对话框

  2. 在左侧窗格中,选择 空项目

  3. 指定用于存储项目相关文件的文件夹路径。

  4. 点击 创建

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

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

  2. 打开将使用 AngularJS 的 Pure Python 项目。

  3. AngularJS 配置为 一个 PyCharm JavaScript 库,以便 PyCharm 识别 AngularJS 特定结构并提供完整的编码辅助:

    1. 设置 对话框(Ctrl+Alt+S )中,转到 语言和框架 | JavaScript | 库

    2. 区域,点击 添加 按钮。

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

    4. 在库文件列表旁,点击 添加 按钮(添加按钮 ),然后根据您需要单独文件还是整个文件夹,选择 附加文件…附加目录…

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

      PyCharm 返回到 新建库 对话框,其中 名称 只读字段显示所选文件或文件夹的名称。

    6. 类型 字段中,指定您已下载并将要添加的版本。

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

      • 如果您添加了 压缩版 Angular.min.js ,请选择 发布。 此版本在生产环境中非常有用,因为文件大小显著更小。

    了解详细信息,请参阅 配置 JavaScript 库

使用 Bower 在空的项目中安装 AngularJS

  1. 打开将使用 AngularJS 的 Pure Python 项目。

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

  3. 在内置的 终端Alt+F12 )中,键入 bower install angular 以将软件包安装为项目依赖项。

从现有的 AngularJS 应用开始

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

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

  1. 欢迎 屏幕左侧窗格中,点击 克隆

    或者,从主菜单中选择 文件 | 新建 | 来自版本控制的项目…Git | 克隆…VCS | 从版本控制获取

    在主菜单中,您可能会看到与您的项目关联的任何其他版本控制系统,而不是 Git。 例如, MercurialPerforce

  2. 在打开的对话框中,从列表中选择您的版本控制系统,并指定要从中检出应用源代码的存储库。 有关详细信息,请参阅 Check out a project (clone)

下载依赖项

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

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

项目安全性

当您打开一个在 PyCharm 外部创建并导入到其中的项目时, PyCharm 会显示一个对话框,您可以决定如何处理包含不熟悉源代码的该项目。

不受信任的项目警告

选择以下选项之一:

  • 在安全模式下预览 :在这种情况下, PyCharm 以预览模式打开项目。 这意味着您可以浏览项目的源代码,但不能运行任务和脚本,也不能运行/调试您的项目。

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

  • 信任项目 :在这种情况下, PyCharm 打开并加载项目。 这意味着项目已初始化、项目的插件已解析、依赖项已添加,并且所有 PyCharm 功能均可用。

  • 不打开 :在这种情况下, PyCharm 不打开项目。

了解详细信息,请参阅 项目安全性

使用 AngularJS Router 状态图

AngularJS 应用中使用 ui-router 的情况下,您可以查看说明视图、状态和模板之间关系的图。

生成并查看图

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

  • 选择该元素,然后从上下文菜单中选择 跳转到源代码

最后修改日期: 2025年 12月 2日