ng-辅助操做

建立组件,指令,过滤器和服务

# 建立组件
ng generate component my-new-component

# 建立组件别名
ng g component my-new-component # using the alias

# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ../newer-cmp
# your component will be generated in src/app/newer-cmp
# if in the directory src/app you can also run
ng g component feature/new-cmp
# and your component will be generated in src/app/feature/new-cmp

可辅助建立资源的功能列表:css

Scaffold Usage
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

angular-cli will add reference to components, directives and pipes automatically in the app.module.ts. If you need to add this references to another custom module, follow this steps:git

  1. ng g module new-module to create a new module
  2. call ng g component new-module/new-component

This should add the new component, directive or pipe reference to the new-module you've created.github

在脚手架项目中使用 SASS 预处理器

SASS 是一款很是好用的 CSS 预编译器,Bootstrap 官方从4.0开始已经切换到了 SASS。shell

若是想要在脚手架项目中使用 SASS 预处理器,咱们须要本身手动修改一些配置文件,请按照如下步骤依次修改:npm

  • angular-cli.json 里面的 styles.css 后缀改为 .scss

当你后面再使用 ng g c *** 自动建立组件的时候,默认就会生成 .scss 后缀的样式文件了。json

  • angular-cli.json 里面的 styleExt 改为 .scss

  • src 下面 styles.css 改为 styles.scss

  • app.component.scss

  • app.component.ts 里面对应修改

改完以后,从新 ng serve,打开浏览器查看效果。浏览器

SASS 的 API 请参考官方网站sass

SASS 只是一个预编译器,它支持全部 CSS 原生语法。利用 SASS 能够提高你的 CSS 编码效率,加强 CSS 代码的可维护性,可是千万不要幻想今后就能够不用学习 CSS 基础知识了。app

更新 Angular CLI

其它

切换包管理器

# 默认为 npm
ng set --global packageManager=npm

# 将包管理器设置为 yarn
ng set --global packageManager=yarn

# 将包管理器设置为 cnpm
ng set --global packageManager=cnpm

详细参考文档

https://github.com/angular/angular-cli/wiki学习

相关文章
相关标签/搜索