這次帶給大家AngularJS環境搭建步奏詳解,AngularJS環境搭建的注意事項有哪些,以下就是實戰案例,一起來看一下。
AngularJS是什麼?
AngularJS是一個開源Web應用程式框架。它最初是由MISKO Hevery和Adam Abrons於2009年開發。現在是由Google維護
AngularJS特性
# AngularJS是一個功能強大的基於JavaScript開發框架用於創建富互聯網應用(RIA)。
AngulajJS為開發者提供的選項(使用JavaScript)在一個乾淨的MVC(模型 - 視圖 - 控制器)的方式來編寫客戶端應用程式。
AngularJS寫的應用程式都是跨瀏覽器相容。 AngularJS使用JavaScript程式碼自動處理適應每種瀏覽器。
AngularJS是開源的,完全免費的,並且由數千名世界各地的開發者開發和維護。它是根據Apache許可證2.0版許可發布。
整體來說,AngularJS是一個用來建立大型應用,高效能的網路應用程式的框架,同時使它們易於維護。
一 、在這裡簡單介紹一下Angular-cli的特性:
Angular-cli可以快速建立框架,建立module,service,class,directive等;
有webpack的功能,可以實現程式碼分隔、按需載入等;
自動配置開發環境、測試環境、生產環境,可以實現程式碼的打包壓縮和熱部署,還可以實現模組測試、端對端測試
Angular-cli可以透過後綴自動辨識sass、less的預編譯;
# Angular-cli可以在創建的時候進行TypeScript的配置,還可以做一些個人化配置;
透過Angular-cli創建的工程結構是最佳實踐,可以用於生產環境;
# 二、安裝nodejs
# AngularJS需要用到Nodejs,所以我們需要先安裝nodejs,需要用到nodejs,nodejs的下載位址是:https://nodejs.org/en/download/,
三、安裝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指令,下面開始建立專案。
四、專案建立
# 安裝完成angular-cli之後就可以直接建立專案了,執行指令
#
ng new JustForTest
其中JustForTest是專案名稱
執行這個指令是創建很多文件,而且需要等待一下,這個步驟會等很久,需要等到nod_.modules的安裝完成
直接使用ng serve啟動。
這樣就可以直接啟動專案,我們在瀏覽器中輸入:http://localhost:4200可以直接存取:
五、在導入專案
# 如果是從網路上找項目,我們要怎麼在本地啟動呢?下面我們具體操作一下:
推薦大家去看一下沙漠老師的這個教學: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 訪問項目。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是AngularJS環境搭建步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!