黃聰：AngularJS最理想開發工具WebStorm

 

Aug 29, 2013

Tags:

angular angular.js angularjs webstorm

Comments:

23 Comments

AngularJS最理想開發工具WebStorm

AngularJS體驗式編程系列文章，將介紹如何用angularjs構建一個強大的web前端系統。angularjs是由Google團隊開發的一款很是優秀web前端框架。在當前如此多的web框架下，angularjs能脫穎而出，從架構設計上就高人一等，雙向數據綁定，依賴注入，指令，MVC，模板。Angular.js創新地把後臺技術融入前端開發，掃去jQuery一度的光芒。用angularjs就像寫後臺代碼，更規範，更結構化，更可控。

關於做者

• 張丹(Conan), 程序員Java,R,PHP,Javascript
• weibo：@Conan_Z
• blog: http://blog.fens.me
• email: bsspirit@gmail.com

轉載請註明出處：
http://blog.fens.me/angularjs-webstorm-ide/

前言
俗語講：「工欲善其事，必先利其器」，爲了玩轉AngularJS，順手的工具要選好。在上一篇文章中，經過yeoman咱們構建了一個AngularJS的工程，經過vi編輯器和命令行操做，咱們幾乎能夠完成整個的項目開發。可是，隨着代碼量和文件數的增長，文件和目錄愈來愈難把握，代碼文件各類難懂，縮進不一致，controller和directive被多少個地方所引用，。。。

咱們須要一個IDE，來幫助咱們更好的看懂項目，管理代碼。WebStorm是目前我認爲AngularJS開發最理想工具。

目錄

1. WebStorm介紹
2. 導入Javascript工程
3. 安裝AngularJS插件
4. WebStorm使用

1. WebStorm介紹

WebStorm 是jetbrains公司旗下一款JavaScript 開發工具。被廣大中國JS開發者譽爲「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaSscript IDE」等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。

下載：http://www.jetbrains.com/webstorm/index.html

WebStorm可能最大的缺點就是須要付費，對於我的開發者49刀。不過，WebStorm還推出了幾種免費的liences。

• Classroom License:申請課堂演示
• Open Source Project License:申請作爲開源項目的貢獻者
• MVP License: 申請微軟的專家

能夠經過購買頁面找到信息：http://www.jetbrains.com/webstorm/buy/index.jsp

固然我是不會告訴你們，在google裏能夠找到過去版本的liences的，只是中國的程序員真是太苦逼了。

2. 導入Javascript工程

打開WebStorm後，咱們能夠經過操做：

"file"==>"open Directory..."==>"select Directory" ==> "ok"

來選擇咱們已經構建好的工程。

WebStrom對Html5, javascript, css，json… 大部分的代碼都支持很是好。

3. 安裝AngularJS插件

不過，默認的WebStrom並不認識，AngularJS的指令，當我嘗試寫代碼ng-controller時，編輯器沒有出現對應該的提示。

<div ng

對於特別熟悉的AngularJS的人來講，並非那麼重要。可是，若是有語法提示不是會更好嗎？

安裝AngularJS插件，兩種辦法：

1. 在IDE中，自動下載自動安裝
2. 手動下載，手動安裝

1). 在IDE中，自動下載自動安裝
咱們須要如下的操做：

1. File->Settings->Plugins
2. 點擊 「Browse Repositories」
3. 選中 「AngularJS」 雙擊
4. 選擇 「Yes」
5. 重啓WebStorm

我在使用這個方法的時候失敗了

2). 手動下載，手動安裝
咱們在jetbrains的插入庫中，找到AngularJS：http://plugins.jetbrains.com/plugin/6971

下載angularjs-plugin.zip，而後解壓到D:\toolkit\WebStorm 6.0.1\plugins\目錄

~ D:\toolkit\WebStorm 6.0.1\plugins\angularjs-plugin

重啓WebStorm

再次輸入代碼：

<div ng-c

語法的提示，太帥氣了！！

我查了一下插件的開發者的代碼，支持所有的angularJS指令語法：

ng-app,ng-bind,ng-bind-html-unsafe,ng-bind-template,ng-class,ng-class-even,ng-class-odd,
ng-cloak,ng-controller,ng-form,ng-hide,ng-include,ng-init,ng-non-bindable,ng-pluralize,
ng-repeat,ng-show,ng-submit,ng-style,ng-switch,ng-switch-when,ng-switch-default,ng-options,
ng-view,ng-transclude,ng-model,ng-list,ng-change,ng-value,ng-required,required

4. WebStorm使用

1). 對於HTML的頁面：WebStorm會在右上角出現瀏覽器的圖標方便咱們打開測試

2). 對Javascript腳本：WebStorm會方便的配置NodeJS啓動, UnitTest啓動 等等

IDE的功能很強大，熟悉後會極大地提高咱們的開發效率的，特別是對於大規模的多人項目。

轉載請註明出處：
http://blog.fens.me/angularjs-webstorm-ide/