PhpStorm 對 AngularJS 的支持

非常喜愛用AngularJS來構建web應用程序的前端嗎? PhpStorm 使得在其上進行 AngularJS 相關的工作同其它得到IDE支持的編程語言的工作一樣容易! 為了可以自動完成，快速文檔，導航並支持自定義指令和路由，我們唯一要做的就是在PhpStorm中安裝AngularJS插件. 何樂而不為呢?

PhpStorm中添加AngularJS插件

不是所有的PhpStorm特性都是默認開啟的，而AngularJS就是其中之一! 我們可以通過選擇 IDE Settings | Plugins , 並點擊 Install JetBrains Plugin… 按鈕而將AngularJS安裝到我們的IDE中，來開啟用於PhpStorm的AngularJS插件. 稍後快速重啟一下，我們應該就有一個對AngularJS的全面支持可以使用了!

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指令的文檔. 我們也可以快速點擊浏覽在線文檔.

導航和檢查

用同樣的方式我們可以在一個 PHP 和一個 JavaScript 代碼庫中進行導航, 我們現在可以導航並浏覽整個AngularJS應用程序. 在模塊，控制器和指令之間進行導航可以使用 Ctrl+click(在Mac OS X上使用 Cmd+Click、) ，它將會立即把我們帶到我們模塊，控制器和指令被定義的地方. 我們可以使用Ctrl+Alt+左箭頭 導航回到我們原來所在的地方(在Mac OS X上使用Cmd+Alt+左箭頭).

導航同樣可以在變量和過濾器上面使用. PhpStorm 也會在它不能找到給定的模塊，控制器或者過濾器時提示我們:

自定義指令和重構的支持

PhpStorm 同樣支持對我們自己的指令的自動補全和導航. 我們甚至可以告訴PhpStorm在調用自動補全時應該使用哪一項: 如果我們使用限制: 'E' 用於自定義元素, IDE 將會將自動補全限制到元素. 如果我們使用限制: 'A', 那麼它只會對屬性起作用.

我們也可以為自定義指令裡的表達式添加自動補全的支持. 我們要做的唯一的事情就是使用 @ngdoc, @name, 和 @param添加合適的文檔. IDE 將會轉換文檔來知曉哪一個屬性接收表達式.

如果我們使用Rename重構對我們的自定進行了重命名 (Mac OS X上是Shift+F6 或者 Ctrl+T), PhpStorm 將會對HTML和Javascript(還有評論，文檔，...)都進行更新，以便我們的命名總是保持同步.

路由和URL模板的支持

PhpStorm 也會通過提供自動補全和導航來在路由和URL模板上為我們提供幫助. 這裡類似的，我們可以簡單的將我們的鼠標指針放到引號之間並按下Ctrl+Space來使用基於當前路徑的自動補全. 如果我們按下 Ctrl+Space 兩次, 將會導致整個項目被展示出來.

請注意當創建多個模塊是，我們需要將局部的父目錄標記為一個資源根，以便自動補全和導航能正常工作.

重構在這裡也同樣可以起作用: 如果我們在任何文件或者URL模板上使用Rename進行重構, PhpStorm 將會更新我們整個項目中所有的引用.

對在PhpStorm中使用AngularJS感興趣? 那就下載最新的 PhpStorm 8 EAP, 安裝 AngularJS插件跑起來 ! 歡迎你在 issue tracker 上提出反饋, 或者在我們的 論壇 回復評論!

快快樂樂開發!
– JetBrains PhpStorm 小組

帶你走近AngularJS系列：

1. 帶你走近AngularJS - 基本功能介紹 http://www.linuxidc.com/Linux/2014-05/102140.htm
2. 帶你走近AngularJS - 體驗指令實例 http://www.linuxidc.com/Linux/2014-05/102141.htm
3. 帶你走近AngularJS - 創建自定義指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm

AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm

AngularJS 的詳細介紹：請點這裡
AngularJS 的下載地址：請點這裡