1. 程式人生 > >ng-cli搭建angular項目框架

ng-cli搭建angular項目框架

aid CA 安裝完成 cli 簡單的 ML 網上 -m 進入

環境準備

  以下步驟都不需要事先創建文件夾,只是環境的準備過程,只有到需要搭建項目的時候才需要創建文件夾用來存放項目文件。

1、安裝NodeJs

  NodeJs的安裝步驟是很簡單的,在網上下載一個一個nodeJs安裝包,然後按照提示一步一步的安裝。
  NodeJs安裝好之後會連帶著安裝一個npm,nodeJs的安裝流程很簡單,按著步驟一步一步下來即可。
  安裝完成之後在控制臺上輸入npm -v 以及 node -v若成功則會輸出對應版本,並且已經將npm和node部署到了全局的環境變量。

  技術分享圖片

2、安裝angulr-cli

方式一:ng-cli原生指令

  npm install -g @angular/cli

方式二:該指令同樣可以完成功能,但是會有一些奇怪的問題,比如ng eject的指令就不存在

  npm install -g angular-cli

3、查看angular-cli版本,檢查是否安裝成功

  ng -v

  技術分享圖片

搭建項目框架

4、新建項目

  ng new Anuglar2Demo1 //如下圖則是項目創建成功的樣子

  技術分享圖片

5、進入項目目錄

  cd Anuglar2Demo1

6、啟動項目——執行ng serve命令

  ng serve

  技術分享圖片

7、訪問項目

  訪問http://localhost:4200/

總結

  以上的步驟都是我從網上各個博客中邊差邊寫的,並且本地根據上述的步驟也實現了好幾次的搭建簡單的angular項目的框架。當然有時候也可能因為nodejs的版本或者ng-cli的版本問題導致安裝的失敗,這時候不要著急,可以嘗試著將版本降低或者重新搭建一次環境。利用ng-cli搭建angular看起來高大上,但是要搭建一個簡單基礎的項目框架,根據我上面的操作基本能夠實現,但是一個全面的更加優秀的框架還是需要不斷的完善才可以的。

最後

  這個是我已經搭建好的angular項目框架,如果不想花時間去搭建的可以直接克隆我搭建好的就可以使用了。

  關於angular一些的實例應用中的angular-demo-base

  //項目克隆之後,需要執行以下命令才可以啟動項目 npm install npm run start

原文地址

  https://www.jianshu.com/p/0a8f4b0f29b3

參考網址

使用 angular-cli 創建 angular2 項目
使用webStrom創建angular2項目
使用cnpm搭建項目

ng-cli搭建angular項目框架