Angular2入門系列教程1-使用Angular-cli搭建Angular2開發環境


  一直在學Angular2,百忙之中抽點時間來寫個簡單的教程。

  2016年是前端飛速發展的一年,前端越來越形成了(web component)組件化的編程模式;以前Jquery通吃一切的田園時代一去不復返,如果你想了解前端最近究竟有什么變化,不妨去看看這篇文章:在2016年學習javascript是一種什么樣的體驗?

  在學習之前,你可能需要先粗略了解幾個東西!

  1.nodejs

  2.npm 包管理

  以下的東西就當你是知道了這些概念了

     1.首先,到nodejs 官網下載nodejs並安裝

  

 

  2.添加淘寶的npm鏡像(由於國內訪問國外網站的速度實在是太慢了),由於我們只有要用到的一些東西,我們采用以下的添加鏡像方法

  (windows 用戶使用cmd,輸入以下命令,新手請去看看npm使用教程吧)
    npm config set registry https://registry.npm.taobao.org
  值得說明一下的是不要直接使用淘寶的npm官方鏡像安裝模式,這樣我們只能使用cnpm命令,而Angular-cli創建新項目的時候是直接使用的npm,
會導致訪問速度奇慢,直接使用上面的這個命令就行了

3.使用npm 安裝Angular-cli

  Angular-cli是angular團隊針對Angular2提供的腳手架,用於環境搭建,運行等;具體參考Angular-cli GitHub
  在命令行中輸入

  npm install -g angular-cli

  之后我們就可以在全局使用ng命令了

  4.使用Angular-cli搭建開發環境

  首先到你的工作目錄下建立Angular工程目錄
  然后然后用命令行進入該目錄,輸入
  ng new projectName
  
  然后腳手架會幫我們搭建初始環境,由於初始化的時候Angualr-cli會去初始化node-modules依賴,所以會比較慢;如果沒有切換淘寶鏡像,那不是一般的慢
  


  最終安裝好了是這樣的

  

  5.  運行Angular

  這個時候整個Angular2已經搭建好了,命令行進入進入剛才的工程目錄,輸入

  ng serve

  Angular-cli會編譯整個項目,只有打開localhost:4200 (可以切換其他端口,具體參考Angular-cli的使用)就可以看到效果了

  

  關於工程目錄結構是下面這個樣子的

  

 

  

   結束語:Angular2可以使用javascript,typescript,dart來編寫;個人推薦使用typescript來編寫。TypeScript最近也發布了2.1版本,我們可以使用可愛的Async/await來編寫我們的項目了。Angular2有專門的中文官方網站Angular.cn,上面有對所有的概念的詳細的解釋,並且有一個完整小項目的教程,很有幫助;還有,我推薦大家使用我寫的模式來搭建自己的Angular項目,一方面Angualr-cli是官方出的腳手架(雖然還是beta版),另一方面,你如果自己獨立去使用Webpack或者SystemJs又增加了學習難度,項目出錯你都不知道是代碼錯了還是打包的問題!

  代碼編輯器推薦兩個:vs code和sublime;

  有些人學習前端不知道該學哪個框架,就我而言,目前值得學習和廣為大眾接受的是Vue.js,angular,reactjs;我受不了React語法,pass;vue有着簡單的結構,容易上手且速度很快,但是Angular更像是一個工業級別的產品,工程化程度更高,而且有着web app 開發神器IONIC,是一個非常不錯的選擇!

  以后的文章會開始介紹Angular2的語法等

  更新ing。。。

 


免責聲明!

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



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