使用Visual Studio Code開發AngularJS應用


(此文章同時發表在本人微信公眾號“dotNET每日精華文章”,歡迎右邊二維碼來關注。)

題記:VSC發布之后,尤其最近剛剛更新到0.3之后,社區出現了很多介紹VSC使用的好文章。比如今天分享的這篇介紹AngularJS開發的文章。

今天分享的這篇文章以AngularJS的官方練習(Phonecat)作為基礎,來逐步講解如何使用Visual Studio Code來開發AngularJS應用。

1,首先需要用Git克隆Phonecat的代碼庫

2,啟動VSC,打開angular-phonecat文件夾

3,利用VSC內置的Git功能來切換分支或者標簽,VSC有個強大的功能就是對“git”命令也可以智能感知,就是會自動列出命令,及其分支或標簽名稱。如下圖所示:

1881.clip_image001_thumb_352BE0071638.clip_image002_thumb_1E0065898424.clip_image003_thumb_782F6087

4,嘗試VSC內置Angular指令支持,比如在HTML中打“ng”會列出完成的指令列表,如下圖:

4135.clip_image005_thumb_3240BE18

5,打開練習中的/test/e2e/scenarios.js文件,可以看到VSC會提供警告。這是因為VSC把所有JavaScript都當作TypeScript,換句話說就是VSC會用TypeScript的編譯器來處理JavaScript文件,所以能夠更好幫助你編寫js代碼。為了消除這些警告,需要安裝所需的TypeScript定義文件。而安裝tsd文件,可以通過一個npm擴展來實現。由於這個scenarios.js文件是使用Jasmine和Protractor來做單元測試,所以我們需要執行如下命令:

   1: tsd query jasmine angular-protractor --action install --save

安裝完成后,可以看到文件夾多出了一個“typings”的子文件夾:

3005.clip_image007_thumb_448C158B

再回到scenarios.js文件中,在頂部引用“tsd.d.ts”文件后,警告就消失了,Jasmine和Protractor的智能感知也出現了。

6,實現對AngularJS的Module和Services的智能感知支持。同上面一樣,執行如下命令:

1: tsd query angular --action install –save

添加相關tsd文件的引用就可以實現。

通過以上步驟,Visual Studio Code就成為一個強大的AngularJS開發利器了。其實我現在機器上是長期同時打開VS和VSC了。有興趣深入了解的可以“閱讀原文”。

原文地址:http://blogs.msdn.com/b/vscode/archive/2015/05/22/getting-started-with-angular-and-visual-studio-code.aspx


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM