Angular4记账webApp练手项目之一（利用angular
Angular4记账webApp练手项目之一（利用angular-cli构建Angular4.X项目）
Angular4记账webApp练手项目之二（在angular4项目中使用Angular WeUI）
Angular4记账webApp练手项目之三（在angular4项目中使用路由router）
Angular4记账webApp练手项目之四（在Angular4项目中用echarts绘制图表）
Angular4记账webApp练手项目之五（Angular4项目中创建service（服务）和使用http模块）
前台源码
前提
1、已经安装了node.js环境
2、已经安装了npm环境
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
官方提供了一些指令
这里写图片描述
创建项目
创建一个名为ng-account的项目
ng new ng-account
进入项目
cd ng-account
运行项目
ng server --open
生成打包（发布），默认会在项目文件夹下生成一个名为dist的文件夹。
ng build
开发项目
用自己喜欢的开发工具打开项目文件夹。vs code、webStroem或者其他
和vue-cli构建的vue2项目很类似。我们主要修改src文件夹下的内容。其中我们新建的代码放在app中。其中spec.ts 文件是测试文件，可以删除。
新建菜单模块（menu），记账模块（accounting），统计模块（count），统计模块下面的子模块：年（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
每个组建默认都有四个文件，图中已经把测试文件删除了，剩下一看后缀就知道，.css里是放样式的，.html里是页面布局的，.ts里是写代码的。
这里写图片描述
用官方提供的指令创建，会将组件自动添加到app.module中，我们就可以直接使用了。
这里写图片描述
在app.component.html使用组件
这里写图片描述
