# AngularJS > For the complete documentation index, see [llms.txt](https://www.jetbrains.com/zh-cn/help/idea/llms.txt). > **TL;DR** > 仅在 IntelliJ IDEA Ultimate 订阅中提供： [下载](https://www.jetbrains.com/zh-cn/idea/download/)试用或 [探索功能](https://www.jetbrains.com/zh-cn/products/compare/?product=idea&product=idea-ult)。 > > > > 所需插件 : > > > > `JavaScript 和 TypeScript`  -  插件与 IntelliJ IDEA 捆绑在一起，并默认启用。 > > > > `AngularJS`  -  在 设置 | 插件 页面上安装插件。 该插件仅在拥有 Ultimate 订阅的 IntelliJ IDEA 中可用。 [AngularJS](http://angularjs.org/) 也称为 Angular 1 ，是一个用于开发单页 Web 应用的框架。 IntelliJ IDEA 为预定义和自定义 `ng` 指令以及控制器和应用程序名称提供 AngularJS 感知的补全选项，还为花括号表达式内的数据绑定提供代码洞察 `{{}}` 。 您可以使用内置的 AngularJS 代码模板，并在 HTML 中的控制器名称与其在 JavaScript 中的定义之间导航，或在 `ngView` 或 `&routeProvider` 与模板之间导航。 对于 AngularJS 实体，使用 Go To Symbol 导航。 ## 开始之前 Procedure: 1. 下载并安装 [Node.js](http://nodejs.org/#download)。 2. 请确保已在设置中启用 JavaScript 和 TypeScript 插件。 按 `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))打开设置，然后选择 `插件` 。 在搜索字段中，键入 JavaScript 和 TypeScript 。 有关插件的更多信息，请参阅 [管理插件](managing-plugins.html)。 3. 安装并启用 AngularJS 插件（位于 设置 | 插件 页面），如 [从 JetBrains Marketplace 安装插件](managing-plugins.html#install_plugin_from_repo) 中所述。 该插件仅在拥有 Ultimate 订阅的 IntelliJ IDEA 中可用。 ## 创建一个新的 AngularJS 应用程序 在项目中，您可以通过手动下载 AngularJS 框架或使用 Bower 包管理器来安装 AngularJS。 Procedure: 下载 AngularJS 依赖项 * 在命令行 shell 或嵌入式 终端 （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中输入： `npm install` * 或者，从项目根目录下 `package.json` 文件的上下文菜单中选择 运行 'npm install' 。 > **Tip:** > AngularJS 依赖项包含 AngularJS 代码和支持开发与测试的工具。 Procedure: 创建一个空的 IntelliJ IDEA 项目 1. 从主菜单中选择 `文件 | 新建 | 项目` ，或在 欢迎 屏幕上点击 新建项目 按钮。 2. 在 新建项目 对话框的左侧窗格中，选择 新建项目 。 3. 在右侧窗格中，选择 JavaScript 在 语言 区域。 4. 为新项目设置名称，并在必要时更改其位置，然后点击 创建 。 Procedure: 手动在一个空项目中安装和配置 AngularJS 1. 请下载 AngularJS 框架 [http://angularjs.org/](http://angularjs.org/)。 2. 打开将使用 AngularJS 的空项目。 3. 配置 AngularJS 作为 一个 IntelliJ IDEA JavaScript 库，以使 IntelliJ IDEA 识别 AngularJS 特定结构并提供全面的编码支持： 1. 在 设置 对话框（ `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))），转到 `语言 & 框架 | JavaScript | 库` 。 2. 在 库 区域，点击 添加 按钮。 3. 在打开的 新库 对话框中，指定库的名称。 4. 点击 添加 按钮 ( !["添加"按钮](https://resources.jetbrains.com/help/img/idea/2026.3/app.expui.general.add.svg)) 在库文件列表旁，并选择 附加文件… 或 附加目录… ，具体取决于您需要单独文件还是整个文件夹。 5. 在打开的对话框中选择 `Angular.js` 、 `Angular.min.js` 或整个目录。 IntelliJ IDEA 返回到 新库 对话框， 名称 只读字段显示所选文件或文件夹的名称。 6. 在 类型 字段中，指定您已下载并将要添加的版本。 * 如果您添加了 `Angular.js` ，请选择 调试 。 此版本在开发环境中非常有用，尤其是用于调试。 * 如果您添加了 [压缩](http://en.wikipedia.org/wiki/Minification_%28programming%29) `Angular.min.js` ，请选择 发布 。 此版本在生产环境中非常有用，因为文件大小显著减小。 有关更多信息，请参阅 [配置 JavaScript 库](configuring-javascript-libraries.html)。 Procedure: 在一个空项目中使用 Bower 安装 AngularJS 1. 打开将使用 AngularJS 的空项目。 2. 请按照 [Bower](using-bower-package-manager.html) 中的说明安装 [Bower](http://bower.io/)。 3. 在命令行 shell 或嵌入的 终端 （ `Alt+F12` (Windows), `⌥ F12` (macOS), `⌥ F12` (IntelliJ IDEA Classic (macOS)), `⌘ ⌃ T` (macOS System Shortcuts), `Alt+F12` (XWin), `Alt+F12` (GNOME), `Alt+F12` (KDE), `Alt+F12` (Emacs), `Alt+F12` (Sublime Text), `⌥ F12` (Sublime Text (macOS)), `Ctrl+Alt+1` (Visual Studio), `⌘ ⌃ 1` (Visual Studio (macOS)), `Alt+F12` (NetBeans), `Alt+F12` (Eclipse), `⌥ F12` (Eclipse (macOS))）中，输入 `bower install angular` 以将软件包作为项目依赖项进行安装。 ## 从现有的 AngularJS 应用程序开始 如果您的项目中已经有 Angular 源文件（例如，在 `bower_components` 文件夹中），只需打开您的项目并开始工作。 如果这些资源被 从项目中排除 ，那么您只需要将 AngularJS 配置为 [JavaScript 库](configuring-javascript-libraries.html#ws_js_custom_third_party_library)。 Procedure: 从版本控制系统检出应用程序源代码 1. 在 欢迎 屏幕上点击 克隆存储库 。 或者，从主菜单中选择 `文件 | 新建 | 从版本控制创建项目…` 、 `Git | 克隆…` 或 `VCS | 从版本控制获取` 。 在主菜单中，可能会看到与项目关联的其他任何版本控制系统，而不是 Git 。 例如， Mercurial 或 Perforce 。 2. 在打开的对话框中，从列表中选择版本控制系统，并指定要从中检出应用程序源代码的仓库。 有关更多信息，请参阅 [检出项目（克隆）](manage-projects-hosted-on-github.html#clone-from-GitHub)。 Procedure: 下载依赖项 * 在弹出窗口中点击 运行 'npm install' ： ![打开 Angular 应用程序并从 package.json 下载依赖项](https://resources.jetbrains.com/help/img/idea/2026.3/ws_npm_yarn_package_run_npm_install.png) ### 项目安全 打开在 IntelliJ IDEA 外部创建并导入其中的项目时，IntelliJ IDEA 会显示一个对话框，可在其中决定如何处理此包含不熟悉源代码的项目。 请选择以下选项之一： * 在安全模式中预览 ：在这种情况下，IntelliJ IDEA 以预览模式打开项目。 这意味着可以浏览项目的源代码，但无法运行任务和脚本，也无法运行/调试项目。 IntelliJ IDEA 会在编辑器区域顶部显示一条通知，可以点击 信任项目… 链接随时加载项目。 * 信任项目 ：在这种情况下，IntelliJ IDEA 会打开并加载一个项目。 这意味着项目已初始化，项目的插件已解析，依赖项已添加，并且所有 IntelliJ IDEA 功能都可用。 * 不打开 ：在这种情况下，IntelliJ IDEA 不会打开项目。 有关更多信息，请参阅 [项目安全](project-security.html)。 > **Tip:** > 从欢迎屏幕或通过 `文件 | 新建 | 项目` 创建的项目会被自动视为受信任。 ## 使用 AngularJS Router 状态图 您可以看到一个图表，说明使用 AngularJS 应用中 views、states 和 templates 之间的关系，该应用使用 [ui-router](https://ui-router.github.io/ng1/)。 Procedure: 生成并查看图表 * 在编辑器中打开所需的文件，然后从上下文菜单中选择 `图表 | 显示 AngularJS ui-router 状态图示图表` 。 IntelliJ IDEA 生成一个图表并在单独的编辑器选项卡中显示。 Procedure: 从图表中的元素导航到实现此元素的代码 * 选择该元素，并从上下文菜单中选择 跳转到源 。 ## See also ### 过程 [Angular](angular.html) [Bower](using-bower-package-manager.html) [实时模板](using-live-templates.html) [样式表](style-sheets.html)