PhpStorm 对 AngularJS 的支持有大用

星期三, 2019-08-07 01:36 — adminshiping1

非常喜爱用AngularJS来构建web应用程序的前端吗? PhpStorm 使得在其上进行 AngularJS 相关的工作同其它得到IDE支持的编程语言的工作一样容易! 为了可以自动完成，快速文档，导航并支持自定义指令和路由，我们唯一要做的就是在PhpStorm中安装AngularJS插件. 何乐而不为呢?

PhpStorm中添加AngularJS插件

不是所有的PhpStorm特性都是默认开启的，而AngularJS就是其中之一! 我们可以通过选择 IDE Settings | Plugins , 并点击 Install JetBrains Plugin… 按钮而将AngularJS安装到我们的IDE中，来开启用于PhpStorm的AngularJS插件. 稍后快速重启一下，我们应该就有一个对AngularJS的全面支持可以使用了!

翻译于 2014/05/29 07:57

顶

AngularJS 自动补全支持

某些人说, “字典中的每一个词都有一个Javascript框架与其对应.” 而这就是PhpStorm默认不为如此多的Javascript框架展示自动补全功能的原因, 因为我们并不想吓到你! 为了开启AngularJS的自动补全，我们可以做如下两件事情的其中之一:

从它们的网站下载AngularJS的脚本并将 angular.js 文件添加到我们的项目中.
使用某一个外部的 CDN 并像我们的应用添加正确的脚本标记. (提示: 按下 Alt+Enter 下载库. PhpStorm 将会为AngularJS方法、指令、文档等等下载并设置一个缓存来提供自动补全.这同样也可以通过 Project Settings | JavaScript | Libraries 来做到, 使用 Download library… 按钮来从TypeScript社区俱乐部下载 angularjs.

一旦完成了这些操作, PhpStorm 可以开始为HTML属性提供自动补全(例如.ng-app) ，以及针对Javascript的自动补全. 有各种快捷缩写可以使用: 输入na将会适配出 ng-app, nc 将会是配出 ng-class 等等. 适当的时候我们的控制器和自定义指定将会在建议列表中列出来. 匹配的括号也会自动完成: 输入 {{ 同样也会自动插入 }}.

我们也可以按下 Ctrl+Q (在Mac OS X上是F1 ) 来快速查看我们的Angular指令的文档. 我们也可以快速点击浏览在线文档.

翻译于 2014/05/29 08:10

顶

导航和检查

用同样的方式我们可以在一个 PHP 和一个 JavaScript 代码库中进行导航, 我们现在可以导航并浏览整个AngularJS应用程序. 在模块，控制器和指令之间进行导航可以使用 Ctrl+click (在Mac OS X上使用 Cmd+Click、) ，它将会立即把我们带到我们模块，控制器和指令被定义的地方. 我们可以使用Ctrl+Alt+左箭头 导航回到我们原来所在的地方(在Mac OS X上使用Cmd+Alt+左箭头).