ng-cli搭建angular項目框架
環境準備
以下步驟都不需要事先創建文件夾,只是環境的準備過程,只有到需要搭建項目的時候才需要創建文件夾用來存放項目文件。
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項目框架