angular-cli入门

• 安装

cnpm install -g @angular/cli // 全局安装
ng -v // 检查是否安装成功 （Angular CLI: 1.5.2, Angular: 5.0.2）

• 新建项目

npm new my-app --skip install // 新建一个my-app项目，阻止npm下载安装，npm安装太慢了
// 或者
npm new my-app --skip install --routing // 新建一个my-app项目，添加路由

cnpm install // 使用cnpm安装
ng serve // 运行,默认端口4200
ng serve -port:4201 // 修改端口，可以开多个端口

ng clear // 清空cmd

• 添加模块

// ng generate 简写 ng g
ng generate component test // 生成test模块 (自动注入到app.module) 
生成4个文件：
  app.component.css
  app.component.html
  app.component.spec.ts // 测试文件
  app.component.ts

ng g component .png

• 添加服务

ng generate service test -m app.module // 在app.module中生成test服务（自动注入到app.module）

ng g service.png

• 修改服务

  
  

• 引入服务

  
  
  
  

• 测试

ng test // 测试，生产测试报告

• 打包

ng build  (ng b)  // 普通打包，大概3M

1.png

ng build --aot // 优化编译angular， 大概1.7M

2.png

ng build -prod // 生成模式，仅 300K 还带上hash值

3.png