Angular4记账webApp练手项目之一（利用angular-cli构建Angular4.X项目）

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使用组件

这里写图片描述

这里写图片描述