建站
咨詢
售后
建站咨詢
新聞中心
非常喜愛用AngularJS來構(gòu)建web應(yīng)用程序的前端嗎? PhpStorm 使得在其上進行 AngularJS 相關(guān)的工作同其它得到IDE支持的編程語言的工作一樣容易! 為了可以自動完成，快速文檔，導(dǎo)航并支持自定義指令和路由，我們唯一要做的就是在PhpStorm中安裝AngularJS插件. 何樂而不為呢?
濰城網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)成立于2013年到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
PhpStorm中添加AngularJS插件
不是所有的PhpStorm特性都是默認開啟的，而AngularJS就是其中之一! 我們可以通過選擇 IDE Settings | Plugins, 并點擊 Install JetBrains Plugin… 按鈕而將AngularJS安裝到我們的IDE中，來開啟用于PhpStorm的AngularJS插件. 稍后快速重啟一下，我們應(yīng)該就有一個對AngularJS的全面支持可以使用了!
AngularJS 自動補全支持
某些人說, “字典中的每一個詞都有一個Javascript框架與其對應(yīng).” 而這就是PhpStorm默認不為如此多的Javascript框架展示自動補全功能的原因, 因為我們并不想嚇到你! 為了開啟AngularJS的自動補全，我們可以做如下兩件事情的其中之一:
-
從 它們的網(wǎng)站 下載AngularJS的腳本并將 angular.js 文件添加到我們的項目中.
-
使用某一個外部的 CDN 并像我們的應(yīng)用添加正確的腳本標(biāo)記. (提示: 按下 Alt+Enter 下載庫. PhpStorm 將會為AngularJS方法、指令、文檔等等下載并設(shè)置一個緩存來提供自動補全.這同樣也可以通過 Project Settings | JavaScript | Libraries 來做到, 使用 Download library… 按鈕來從TypeScript社區(qū)俱樂部下載 angularjs.
一旦完成了這些操作, PhpStorm 可以開始為HTML屬性提供自動補全(例如.ng-app) ，以及針對Javascript的自動補全. 有各種快捷縮寫可以使用: 輸入na將會適配出 ng-app, nc 將會是配出 ng-class 等等. 適當(dāng)?shù)臅r候我們的控制器和自定義指定將會在建議列表中列出來. 匹配的括號也會自動完成: 輸入 {{ 同樣也會自動插入 }}.
我們也可以按下 Ctrl+Q (在Mac OS X上是F1 ) 來快速查看我們的Angular指令的文檔. 我們也可以快速點擊瀏覽在線文檔.
導(dǎo)航和檢查
用同樣的方式我們可以在一個 PHP 和一個 JavaScript 代碼庫中進行導(dǎo)航, 我們現(xiàn)在可以導(dǎo)航并瀏覽整個AngularJS應(yīng)用程序. 在模塊，控制器和指令之間進行導(dǎo)航可以使用 Ctrl+click(在Mac OS X上使用 Cmd+Click、) ，它將會立即把我們帶到我們模塊，控制器和指令被定義的地方. 我們可以使用Ctrl+Alt+左箭頭 導(dǎo)航回到我們原來所在的地方(在Mac OS X上使用Cmd+Alt+左箭頭).
導(dǎo)航同樣可以在變量和過濾器上面使用. PhpStorm 也會在它不能找到給定的模塊，控制器或者過濾器時提示我們:
自定義指令和重構(gòu)的支持
PhpStorm 同樣支持對我們自己的指令的自動補全和導(dǎo)航. 我們甚至可以告訴PhpStorm在調(diào)用自動補全時應(yīng)該使用哪一項: 如果我們使用限制: 'E' 用于自定義元素, IDE 將會將自動補全限制到元素. 如果我們使用限制: 'A', 那么它只會對屬性起作用.
我們也可以為自定義指令里的表達式添加自動補全的支持. 我們要做的唯一的事情就是使用 @ngdoc, @name, 和 @param添加合適的文檔. IDE 將會轉(zhuǎn)換文檔來知曉哪一個屬性接收表達式.
如果我們使用Rename重構(gòu)對我們的自定進行了重命名 (Mac OS X上是Shift+F6 或者 Ctrl+T), PhpStorm 將會對HTML和Javascript(還有評論，文檔，...)都進行更新，以便我們的命名總是保持同步.
路由和URL模板的支持
PhpStorm 也會通過提供自動補全和導(dǎo)航來在路由和URL模板上為我們提供幫助. 這里類似的，我們可以簡單的將我們的鼠標(biāo)指針放到引號之間并按下Ctrl+Space來使用基于當(dāng)前路徑的自動補全. 如果我們按下 Ctrl+Space 兩次, 將會導(dǎo)致整個項目被展示出來.
請注意當(dāng)創(chuàng)建多個模塊是，我們需要將局部的父目錄標(biāo)記為一個資源根，以便自動補全和導(dǎo)航能正常工作.
重構(gòu)在這里也同樣可以起作用: 如果我們在任何文件或者URL模板上使用Rename進行重構(gòu), PhpStorm 將會更新我們整個項目中所有的引用.
對在PhpStorm中使用AngularJS感興趣? 那就下載***的 PhpStorm 8 EAP, 安裝 AngularJS插件跑起來 ! 歡迎你在 issue tracker 上提出反饋, 或者在我們的 論壇 回復(fù)評論!
快快樂樂開發(fā)!
– JetBrains PhpStorm 小組
英文原文：AngularJS support in PhpStorm
譯文鏈接：http://www.oschina.net/translate/angularjs-support-in-phpstorm
網(wǎng)頁標(biāo)題：PhpStorm對AngularJS的支持
分享地址：http://fisionsoft.com.cn/article/djdooic.html
