Angular学习笔记(工具篇)----Angular CLI

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular学习笔记(工具篇)----Angular CLI相关的知识,希望对你有一定的参考价值。

Angular CLI 的作用  

技术分享图片

首先安装npm 和node    详情:http://www.cnblogs.com/gorgeous/p/8074180.html

在安装    npm install -g @angular/cli

验证  

技术分享图片

 

 

创建Angular项目
ng new my-app

进入Angular项目
cd my-app

启动项目
ng serve


优化项目创建方法(优化点:npm速度较慢)

ng new my-app --skip-install
cd my-app
cnpm install
ng serve

Ng new 简介  多多阅读英文,不行就像我这样

ng help 查看

技术分享图片

技术分享图片

例如  常见的 ng version 

技术分享图片

 

 

Ng serve 简介(可以动态编译)
运行在不同的端口
ng serve --port 4201

 

Ng generate简介


创建一个组件
ng g component test

技术分享图片

上述更新的文件

技术分享图片

组件的基本用法(要有Angular5 的基础)

技术分享图片

成功

技术分享图片

 

创建一个服务
ng g service test

更多详细的  gitbub https://github.com/angular/angular-cli/wiki/generate


Ng test


Ng bulid打包 提升性能

技术分享图片

技术分享图片

ng build -prod 生产环境文件就更少了(自己实现报了个错  网友说 是cnpm原因,或者版本问题 下回解决就好 )

 















以上是关于Angular学习笔记(工具篇)----Angular CLI的主要内容,如果未能解决你的问题,请参考以下文章

什么是Angular? 我们为什么要学习它?

[Angularjs-学习笔记]工具篇

Vue学习笔记入门篇——组件的内容分发(slot)

GO1.6语言学习笔记3-工具篇(SublimeText 3+GoSublime组合)

AngularJS1.X学习笔记2-数据绑定

网络安全学习笔记工具篇——GSIL GITHUB敏感信息泄露检测工具