01-Angularjs開發環境搭建

1、概述##

時下web前端很是熱門，新的框架層出不窮，web前端的三駕馬車VueJS、AngularJS、ReactJS發展很是迅猛。其中VueJS是國人開發的項目，百度熱點趨勢以1000%的速度在增加，其中是否有有我大天朝的情懷在吧。AngularJS在國外很是受歡迎，在國內用的不是很是多。此次咱們開始學習一下AngularJS，師夷長技以制夷。AngularJS在學習的過程當中，上手比較難，主要有一下方面的緣由：

1. AngularJS概念比較難懂
2. AngularJS使用TypeScript進行開發，用到不少es6的特性
3. AngularJS在項目建立的時候須要進行不少配置，很複雜。

本文經過實現一個實例，詳細演示如何一步步實現AngularJS項目的搭建。說明一下，本文中的AngularJS都是基於Angular2.0以上的。

在實際項目中，搭建AngularJS主要有三種方式：

一、第一種方式###

這種方式是徹底經過開發者搭建起來，不適用任何工具，這種方式要求開發者對AngularJS框架有很是深刻的瞭解，不然會出現不少問題。

二、第二種方式###

第二種就是使用Angular2 seed，經過webpack的方式，這種方式在Github上有不少優秀的項目，能夠根據本身的須要在別人的基礎上搭建項目。推薦一個webpack的項目：https://github.com/kunl/Angular-webpack-AOT

三、第三種方式###

本文講的就是第三種方式，經過Angular-cli方式構建，這種方式很是簡單，可是這樣會致使項目構建不靈活，不過仍是推薦這種方式

在這裏簡單介紹一下Angular-cli的特性：

• Angular-cli能夠快速搭建框架，建立module，service，class，directive等；
• 有webpack的功能，能夠實現代碼分隔、按需加載等；
• 自動配置開發環境、測試環境、生產環境，能夠實現代碼的打包壓縮和熱部署，還能夠實現模塊測試、端到端測試
• Angular-cli能夠經過後綴自動識別sass、less的預編譯；
• Angular-cli能夠在建立的時候進行TypeScript的配置，還能夠作一些個性化配置；
• 經過Angular-cli建立的工程結構是最佳實踐，能夠用於生產環境；

接下來咱們正式開始構建咱們第一個Angular2實例：

2、安裝nodejs##

AngularJS須要用到Nodejs，因此咱們須要先安裝nodejs，須要用到nodejs，nodejs的下載地址是：https://nodejs.org/en/download/，能夠根據本身的機器下載，這裏是演示Windows10下的安裝：

Windows系統下下載安裝包，是一個exe的可執行文件，雙擊開始安裝：

 

 

點擊next進入下一步：

 

 

進入到這裏須要勾選接受協議，不勾選不能進入下一步，勾選以後點擊next進入下一步：

 

 

進入這一步，能夠自定義安裝路徑，也可使用默認路徑，選好以後點擊next進入下一步：

 

 

這裏是選擇安裝nodejs的組件，通常狀況下默認便可，而後點擊next

 

 

進入到這一步以前還有一個界面的，忘記截圖了，直接點擊Install就能夠了，等待進度條走完，就會自動進入下一步：

 

 

到這裏點擊Finish完成nodejs的安裝，進入命令面板，輸入node -v查看是否安裝完成。

 

 

這是查看nodejs安裝版本的命令，也是能夠確認咱們的nodejs已經正確安裝了。

3、安裝npm和cnpm##

下一步是安裝npm，

NPM是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題，常見的使用場景有如下幾種：

• 容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
• 容許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
• 容許用戶將本身編寫的包或命令行程序上傳到NPM服務器供別人使用。

 

 

到這裏已經完成了nodejs和npm的安裝，不過在大天朝內用npm安裝的話會有一些問題，因此咱們用cnpm安裝，cnpm也是npm的一個包。

安裝cnpm，執行命令

npm i -g cnpm

 

 

執行這個命令以後，等待完成，而後輸入cnpm version查看是否安裝完成，這裏我已經安裝過了，因此能夠進去了。

安裝完成cnpm以後，咱們開始安裝Angular-cli。

執行命令

cnpm i -g angular-cli

等待命令執行完成，

 

 

而後能夠執行ng version命令，查看是否安裝完成和angular-cli的版本

 

 

安裝完成以後咱們就可使用ng命令，下面開始建立項目。

4、項目建立##

安裝完成angular-cli以後就能夠直接建立項目了，執行命令

ng new JustForTest 

其中JustForTest是項目名稱

 

 

執行這個命令是建立不少文件，並且須要等待一下，

 

 

等待到這裏，就完成了項目的建立，咱們到目錄下去看一下建立的工程結構

 

 

須要等待好久，就是爲了建立紅框中的包。

咱們用命令進去到這個項目中，而後執行命令

ng serve -prod -aot

啓動項目，-prod -aot不是必須的，也能夠直接使用ng serve啓動。

 

 

這樣就能夠直接啓動項目，咱們在瀏覽器中輸入：http://localhost:4200能夠直接訪問：

 

 

這樣就是經過cnpm安裝angular-cli，用angular-cli建立一個angular2項目。

5、在導入項目##

若是是從網上找項目，咱們怎麼在本地啓動呢？下面咱們具體操做一下：

推薦你們去看一下大漠老師的這個教程：Angular2.0視頻教程來了
，在這裏演示咱們也是用大漠老師的一個項目：NiceFish，首先咱們須要經過git將項目clone下來，這裏就不演示這個了，這是NiceFish的項目地址：http://git.oschina.net/mumu-osc/NiceFish

項目clone下來以後，命令行進入項目所在目錄。

執行命令

cnpm i -g @angular/cli 

這裏說明一下，以前咱們安裝的是全局的angular-cli。

 

 

等待命令執行完成，以後再執行命令

cnpm install

 

 

而後執行命令

ng serve -prod -aot

 

 

而後等待編譯完成。

 

 

完成以後，咱們就能夠在瀏覽器中輸入：

http://localhost:4200 

訪問項目。

 

 

到這裏，就完成了新項目的建立和項目導入，接下來開始進去Angular2的正式學習了。

做者：張文文同窗連接：https://www.jianshu.com/p/5c40f9d5ce17來源：簡書簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。