?

非常喜愛(ài)用AngularJS來(lái)構(gòu)建web應(yīng)用程序的前端嗎? PhpStorm 使得在其上進(jìn)行 AngularJS 相關(guān)的工作同其它得到IDE支持的編程語(yǔ)言的工作一樣容易!

AD：51CTO首屆中國(guó)APP創(chuàng)新評(píng)選大賽正在招募>>

?

非常喜愛(ài)用AngularJS來(lái)構(gòu)建web應(yīng)用程序的前端嗎? PhpStorm 使得在其上進(jìn)行 AngularJS 相關(guān)的工作同其它得到IDE支持的編程語(yǔ)言的工作一樣容易! 為了可以自動(dòng)完成，快速文檔，導(dǎo)航并支持自定義指令和路由，我們唯一要做的就是在PhpStorm中安裝AngularJS插件. 何樂(lè)而不為呢?

PhpStorm中添加AngularJS插件

不是所有的PhpStorm特性都是默認(rèn)開(kāi)啟的，而AngularJS就是其中之一! 我們可以通過(guò)選擇?IDE Settings | Plugins?, 并點(diǎn)擊?Install JetBrains Plugin…?按鈕而將AngularJS安裝到我們的IDE中，來(lái)開(kāi)啟用于PhpStorm的AngularJS插件. 稍后快速重啟一下，我們應(yīng)該就有一個(gè)對(duì)AngularJS的全面支持可以使用了!

AngularJS 自動(dòng)補(bǔ)全支持

某些人說(shuō), “字典中的每一個(gè)詞都有一個(gè)Javascript框架與其對(duì)應(yīng).” 而這就是PhpStorm默認(rèn)不為如此多的Javascript框架展示自動(dòng)補(bǔ)全功能的原因, 因?yàn)槲覀儾⒉幌雵樀侥? 為了開(kāi)啟AngularJS的自動(dòng)補(bǔ)全，我們可以做如下兩件事情的其中之一:

• 從?它們的網(wǎng)站?下載AngularJS的腳本并將?angular.js 文件添加到我們的項(xiàng)目中.

• 使用某一個(gè)外部的?CDN 并像我們的應(yīng)用添加正確的腳本標(biāo)記. (提示: 按下?Alt+Enter?下載庫(kù).?PhpStorm 將會(huì)為AngularJS方法、指令、文檔等等下載并設(shè)置一個(gè)緩存來(lái)提供自動(dòng)補(bǔ)全.這同樣也可以通過(guò)??Project Settings | JavaScript | Libraries 來(lái)做到, 使用?Download library…?按鈕來(lái)從TypeScript社區(qū)俱樂(lè)部下載?angularjs.

?

一旦完成了這些操作, PhpStorm 可以開(kāi)始為HTML屬性提供自動(dòng)補(bǔ)全(例如.ng-app) ，以及針對(duì)Javascript的自動(dòng)補(bǔ)全. 有各種快捷縮寫(xiě)可以使用: 輸入na將會(huì)適配出?ng-app,?nc?將會(huì)是配出 ng-class 等等. 適當(dāng)?shù)臅r(shí)候我們的控制器和自定義指定將會(huì)在建議列表中列出來(lái). 匹配的括號(hào)也會(huì)自動(dòng)完成: 輸入?{{?同樣也會(huì)自動(dòng)插入?}}.

我們也可以按下?Ctrl+Q (在Mac OS?X上是F1?)?來(lái)快速查看我們的Angular指令的文檔. 我們也可以快速點(diǎn)擊瀏覽在線文檔.

?

導(dǎo)航和檢查
?

用同樣的方式我們可以在一個(gè) PHP 和一個(gè)?JavaScript 代碼庫(kù)中進(jìn)行導(dǎo)航, 我們現(xiàn)在可以導(dǎo)航并瀏覽整個(gè)AngularJS應(yīng)用程序. 在模塊，控制器和指令之間進(jìn)行導(dǎo)航可以使用?Ctrl+click?(在Mac OS X上使用?Cmd+Click、) ，它將會(huì)立即把我們帶到我們模塊，控制器和指令被定義的地方. 我們可以使用Ctrl+Alt+左箭頭?導(dǎo)航回到我們?cè)瓉?lái)所在的地方(在Mac OS X上使用Cmd+Alt+左箭頭).

導(dǎo)航同樣可以在變量和過(guò)濾器上面使用. PhpStorm 也會(huì)在它不能找到給定的模塊，控制器或者過(guò)濾器時(shí)提示我們:

?

自定義指令和重構(gòu)的支持
?

PhpStorm 同樣支持對(duì)我們自己的指令的自動(dòng)補(bǔ)全和導(dǎo)航. 我們甚至可以告訴PhpStorm在調(diào)用自動(dòng)補(bǔ)全時(shí)應(yīng)該使用哪一項(xiàng): 如果我們使用限制: 'E' 用于自定義元素, IDE 將會(huì)將自動(dòng)補(bǔ)全限制到元素. 如果我們使用限制: 'A', 那么它只會(huì)對(duì)屬性起作用.

我們也可以為自定義指令里的表達(dá)式添加自動(dòng)補(bǔ)全的支持. 我們要做的唯一的事情就是使用 @ngdoc,?@name, 和 @param添加合適的文檔. IDE 將會(huì)轉(zhuǎn)換文檔來(lái)知曉哪一個(gè)屬性接收表達(dá)式.

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

?

路由和URL模板的支持
?

PhpStorm 也會(huì)通過(guò)提供自動(dòng)補(bǔ)全和導(dǎo)航來(lái)在路由和URL模板上為我們提供幫助. 這里類(lèi)似的，我們可以簡(jiǎn)單的將我們的鼠標(biāo)指針?lè)诺揭?hào)之間并按下Ctrl+Space來(lái)使用基于當(dāng)前路徑的自動(dòng)補(bǔ)全. 如果我們按下?Ctrl+Space?兩次, 將會(huì)導(dǎo)致整個(gè)項(xiàng)目被展示出來(lái).

請(qǐng)注意當(dāng)創(chuàng)建多個(gè)模塊是，我們需要將局部的父目錄標(biāo)記為一個(gè)資源根，以便自動(dòng)補(bǔ)全和導(dǎo)航能正常工作.

重構(gòu)在這里也同樣可以起作用: 如果我們?cè)谌魏挝募蛘遀RL模板上使用Rename進(jìn)行重構(gòu), PhpStorm 將會(huì)更新我們整個(gè)項(xiàng)目中所有的引用.

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

快快樂(lè)樂(lè)開(kāi)發(fā)!

– JetBrains PhpStorm 小組

英文原文：AngularJS support in PhpStorm

譯文鏈接：http://www.oschina.net/translate/angularjs-support-in-phpstorm

【編輯推薦】

如何在 AngularJS 中對(duì)控制器進(jìn)行單元測(cè)試

AngularJS數(shù)據(jù)建模

借助AngularJS寫(xiě)優(yōu)雅的代碼

AngularJS 指令（Directives）實(shí)踐指南

整合jQuery Mobile+AngularJs 經(jīng)驗(yàn)談

轉(zhuǎn)載于:https://www.cnblogs.com/h2zZhou/p/5352164.html

總結(jié)

以上是生活随笔為你收集整理的PhpStorm 对 AngularJS 的支持的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。