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

前提

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

这里写图片描述

这里写图片描述

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

PHP连接mysql

昨天介绍了一下mysql的简单操作,今天来说一下mysql如何和php连接在一起!

20830
来自专栏皮振伟的专栏

[linux][network]bond技术分析

前言: 云计算场景下,经常会使用到bond技术的主备模式。这里分析一下bond技术的原理。 原理: 简单回忆一下IPV4协议栈,以用户发送一个HTTP请求为...

397110
来自专栏Java编程技术

Dubbo剖析-服务分组与服务版本号

在Dubbo中接口类并不能唯一确定一个服务,在dubbo中接口+服务分组+版本号才能唯一确定一个服务,本文就来讲解下服务分组和版本号的使用。

29420
来自专栏smy

git同步远程已删除的分支和删除本地多余的分支

可以发现红框中的分支是远程分支已被删除的分支,根据提示可以使用 git remote prune 来同步删除这些分支。

13420
来自专栏liulun

在CentOS上搭建PHP服务器环境

 您也可以使用一键自动部署环境的工具,请参见网友开发的这个工具 http://www.centos.bz/2013/08/ezhttp-tutorial/ ...

53080
来自专栏黑泽君的专栏

svn: Can't connect to host 'localhost': 由于目标计算机积 的原因及解决办法

今天使用eclipse连接svn服务器提交代码的时候提示:svn: Can't connect to host 'localhost': 由于目标计算机积 ,如...

20420
来自专栏黑泽君的专栏

Java如何制作帮助文档(API)

步骤如下:   (1)写一个工具类   (2)对这个类加入文档注释   (3)用工具解析文档注释     javadoc工具   (4)格式 ...

53320
来自专栏Golang语言社区

Go 开发的 IM 和推送服务 goim

goim 是一个支持集群的im及实时推送服务(支持websocket,http和tcp协议) 特性: 轻量级 高性能 纯Golang实现 支持单个、多个以及广播...

1.1K20
来自专栏韦弦的偶尔分享

git push 错误:failed to push some refs to

2.1K40
来自专栏测试驿栈

Jmeter(二十一)_完整Demo

3:设置你的信息头管理器:application/json;text/plain;charset=UTF-8  

29630

扫码关注云+社区

领取腾讯云代金券