Angular4记账webApp练手项目之一(利用angular-cli构建Angular4.X项目)
来源:互联网 发布:linux ping 超时时间 编辑:程序博客网 时间:2024/06/06 14:02
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/clinpm cache cleannpm 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 menung g component accountingng g component countng g component count\count-yearng g component count\count-month
每个组建默认都有四个文件,图中已经把测试文件删除了,剩下一看后缀就知道,.css里是放样式的,.html里是页面布局的,.ts里是写代码的。
用官方提供的指令创建,会将组件自动添加到app.module中,我们就可以直接使用了。
在app.component.html使用组件
- Angular4记账webApp练手项目之一(利用angular-cli构建Angular4.X项目)
- Angular4记账webApp练手项目之二(在angular4项目中使用Angular WeUI)
- Angular4记账webApp练手项目之三(在angular4项目中使用路由router)
- Angular4记账webApp练手项目之四(在Angular4项目中用echarts绘制图表)
- Angular4记账webApp练手项目之五(Angular4项目中创建service(服务)和使用http模块)
- angular4实战(1) angular-cli
- 最新angular cli 安装教程(angular4 )
- Angular4.0 启动项目时,报错:The “@angular/compiler-cli” package was not properly installed
- Angular4.x开发环境及项目创建(一)
- 安装Angular-Cli以及失败原因解决(Angular4.0)
- angular4项目启动步骤
- 安装Angular-Cli以及失败原因解决(Angular4.0),Angular-Cli卸载
- angular4 项目启动报错
- ionic3+angular4+cordova 项目实例
- angular4实战一项目创建
- Asp.net+Vue2构建简单记账WebApp之一(设计)
- Angular4
- Angular4
- HDU 5514 Frog 容斥(技巧)
- shared_ptr的引用计数原理
- ActiveMQ多集群的负载均衡
- 有趣的js匿名函数写法
- Linux服务器性能评估与优化(二)
- Angular4记账webApp练手项目之一(利用angular-cli构建Angular4.X项目)
- Java使用纯真IP库获取IP对应省份和城市
- 谈Resources中Drawable的缓存与享元设计模式
- JS gps定位城市信息
- Git-搭建Git服务器并使用Git进行协同工作
- Oracle分组查询3——grouping sets
- iPhone X官方人机交互指南
- 倾斜摄影 OSGB to DOM/DSM
- thymeleaf模板引擎调用java类中的方法(附源码)