WEBAPP开发之Angular4记账webApp练手项目之一（利用angular-cli构建Angular4.X项目）-职坐标

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

白羽 2018-07-19 来源：网络阅读 1122 评论 0

摘要：本文将带你了解WEBAPP开发之Angular4记账webApp练手项目之一（利用angular-cli构建Angular4.X项目），希望本文对大家学WebApp有所帮助。

前提

1、已经安装了node.js环境
2、已经安装了npm环境
windows可以通过cmd输入以下指令查看

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

安装angular-cli脚手架
npminstall-g@angular/cli

安装失败可以尝试下面方法，先卸载清楚缓存，再安装
npmuninstall-g@angular/cli
npmcacheclean
npminstall-g@angular/cli@latest

官方文档：https://github.com/angular/angular-cli
官方提供了一些指令

创建项目
创建一个名为ng-account的项目
ngnewng-account

进入项目
cdng-account

运行项目
ngserver--open

生成打包（发布），默认会在项目文件夹下生成一个名为dist的文件夹。
ngbuild

开发项目
用自己喜欢的开发工具打开项目文件夹。vscode、webStroem或者其他

这里写图片描述

和vue-cli构建的vue2项目很类似。我们主要修改src文件夹下的内容。其中我们新建的代码放在app中。其中spec.ts文件是测试文件，可以删除。
新建菜单模块（menu），记账模块（accounting），统计模块（count），统计模块下面的子模块：年（count-year），月（count-month）
nggcomponentmenu
nggcomponentaccounting
nggcomponentcount
nggcomponentcount\count-year
nggcomponentcount\count-month

每个组建默认都有四个文件，图中已经把测试文件删除了，剩下一看后缀就知道，.css里是放样式的，.html里是页面布局的，.ts里是写代码的。

用官方提供的指令创建，会将组件自动添加到app.module中，我们就可以直接使用了。

在app.component.html使用组件