依赖

  • Node 6.9.0 or higher
  • Python
  • C++ 编译工具

安装

初始化项目

启动开发服务

  1. ng serve

ng serve 默认占用 4200 端口号，可以通过下面选项配置：

  1. # 创建组件
  2. ng generate component my-new-component
  4. # 创建组件别名
  5. ng g component my-new-component # using the alias
  7. # components support relative path generation
  8. # if in the directory src/app/feature/ and you run
  9. # your component will be generated in src/app/feature/new-cmp
  11. ng g component ../newer-cmp
  12. # your component will be generated in src/app/newer-cmp
  13. # if in the directory src/app you can also run
  14. ng g component feature/new-cmp
  15. # and your component will be generated in src/app/feature/new-cmp

可辅助创建资源的功能列表：

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:

  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.

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

如果想要在脚手架项目中使用 SASS 预处理器，我们需要自己手动修改一些配置文件，请按照以下步骤依次修改：

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

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

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

1515424609137

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

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

1515424806351

改完之后，重新 ，打开浏览器查看效果。

SASS 的 API 请参考官方网站 。

更新 Angular CLI

详细参考文档