angular6开发不完全笔记(一) -- ng-cli

我是研究僧i 提交于 2019-12-28 04:35:09

新建项目

请在终端/控制台窗口中运行 ng -v 命令。 确定您已安装@angular/cli
if没有执行 npm install -g @angular/cli 全局安装 Angular CLI。

ng new project-name 

就具体项目开发前调研技术栈追加相关参数

  • 样式style 如 --style=scss value值可以是(css | scss | sass | less | stylus )等

  • 项目中使用路由routing 如 --routing 生成routing module

  • 前缀 prefix 如 --prefix-p 默认为app,参数自定义 比如 --prefix=wn

后话

angular.json 文件中 "prefix": "app", 会更改为"prefix": "wn"
tslint验证规则 项目中所有的组件前缀都改为wn开头的 index.html文件<app-root></app-root>变为<wn-root><wn-root>
所有 ng g c component-name 生成的组件 prefix默认时使用<app-componet-name></app-componet-name> 自定义前缀后 <wn-componet-name></wn-componet-name>

综合上述 ng new project-name --style=scss --routing --prefix=wn

更多参数参考 ng new

启动项目

ng serve 或者 npm run start

  • 开发环境项目如开始对接接口需要配置本地代理
  1. 一般在根目录下添加proxy.config.json文件
{
  "/api": {
    "target": "http://xxx.xxx.com",
    "secure": false,
    // "logLevel":"debug",
    "changeOrigin": true,
    "pathRewrite":{
      "^/api":""
    }
  }
}
  1. 文件package.json中scripts 下 start的value值ng serve --proxy-config proxy.config.json 或者在angular.json 中 serve下 options添加属性 "proxyConfig":"proxy.config.json"

ng serve 其他参数

  • 接口默认4200 --port 4201
  • 启动时自动打开浏览器 --open 简写-o
  • 用host指定运行主机 --host 0.0.0.0--public-host 192.168.1.111 指定浏览器客户端将使用的URL
  • 正在生成的应用程序的基URL --base-href /admin/或者 --base-href http://www.example.com/ 相当于index.html添加html标签 属性href规定页面中所有相对链接的基准 URL。 如 <base href="http://www.example.com/"> 注:参数值后面一定要多个 / 结尾,否则无效
综合上述1(未对接) ng serve --port 4201 --open
综合上述2 ng serve --proxy-config proxy.config.json --host 0.0.0.0 --port 4201 --open

更多参数参考 ng serve

项目开发

  1. 生成组件
  • ng g c component-name 生成在src下全局组件
  • ng g c module-name/component-name 组件生成在某模块下src下,并声明注册该模块
  • ng g c path/component-name 组件生成在项目path路径下,默认注册父模块,由父模块决定是否是全局组件还是某模块组件;

禁止生成spec.ts文件 -- --no-spec

  1. 生成模块 ng g m module-name 同上
    其他参数
  • --routing 生成路由模块。
  • --module 允许指定声明模块

    综上: ng g m module-name --routing --module module-name

  1. 生成服务 ng g s service-name 同上

  2. 生成管道(原1.x中过滤器) ng g p pipe-name

  3. 生成指令 ng g d directive-name
    指令分 属性型指令和结构型指令

  4. 生成class ng g cl class-name class-mame一般首字母大写,驼峰

  5. 生成接口interface ng g i interface-name 接口为ts特性 类型检查 声明参数类型

更多参数参考 ng generate

编译项目

ng buildnpm run build

参数

  • --base-href /myUrl/ 相当于在index.html中添加,默认

  • --prod 通过UglifyJS 删除更多未使用的代码,使项目编译后更小体积

  • --output-hashing all 编译后输出文件名以哈希模式,便于缓存

  • --stats-json 生成一个“stats.json”文件,可以使用诸如:webpack bundle analyzer'或https://webpack.github.io/analyse.等工具进行前端分析。

  • --aot 启用aot预编译
  • --build-optimizer 使用“aot”选项时启用@angular-devkit/build-optimizer 优化。

更多参数参考 ng build

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!