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模塊）
前臺源碼
前提
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)會在項(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)建，會將組件自動添加到app.module中讼积，我們就可以直接使用了肥照。
在app.component.html使用組件
