Angular4記賬webApp練手項(xiàng)目之一（利用angular-cli構(gòu)建Angular4.X項(xiàng)目）
Angular4記賬webApp練手項(xiàng)目之二（在angular4項(xiàng)目中使用Angular WeUI）
Angular4記賬webApp練手項(xiàng)目之三（在angular4項(xiàng)目中使用路由router）
Angular4記賬webApp練手項(xiàng)目之四（在Angular4項(xiàng)目中用echarts繪制圖表）
Angular4記賬webApp練手項(xiàng)目之五（Angular4項(xiàng)目中創(chuàng)建service（服務(wù)）和使用http模塊）
前臺(tái)源碼

前提

1、已經(jīng)安裝了node.js環(huán)境
2、已經(jīng)安裝了npm環(huán)境
windows可以通過cmd輸入以下指令查看

node -v  // node版本
npm -v   // npm版本

安裝angular-cli 腳手架

npm install -g @angular/cli

安裝失敗可以嘗試下面方法，先卸載清楚緩存，再安裝

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

官方文檔 ：https://github.com/angular/angular-cli

官方提供了一些指令

這里寫圖片描述

創(chuàng)建項(xiàng)目

創(chuàng)建一個(gè)名為ng-account的項(xiàng)目

ng new ng-account

進(jìn)入項(xiàng)目

cd ng-account

運(yùn)行項(xiàng)目

ng server --open

生成打包（發(fā)布），默認(rèn)會(huì)在項(xiàng)目文件夾下生成一個(gè)名為dist的文件夾。

ng build

開發(fā)項(xiàng)目

用自己喜歡的開發(fā)工具打開項(xiàng)目文件夾。vs code、webStroem或者其他

這里寫圖片描述

和vue-cli構(gòu)建的vue2項(xiàng)目很類似。我們主要修改src文件夾下的內(nèi)容。其中我們新建的代碼放在app中。其中spec.ts 文件是測試文件，可以刪除。

新建菜單模塊（menu），記賬模塊（accounting），統(tǒng)計(jì)模塊（count），統(tǒng)計(jì)模塊下面的子模塊：年（count-year），月（count-month）

ng g component menu
ng g component accounting
ng g component count
ng g component count\count-year
ng g component count\count-month

每個(gè)組建默認(rèn)都有四個(gè)文件，圖中已經(jīng)把測試文件刪除了，剩下一看后綴就知道，.css里是放樣式的，.html里是頁面布局的，.ts里是寫代碼的。

這里寫圖片描述

用官方提供的指令創(chuàng)建，會(huì)將組件自動(dòng)添加到app.module中，我們就可以直接使用了。

這里寫圖片描述

在app.component.html使用組件

這里寫圖片描述

這里寫圖片描述