Skip to main content

Angular

npm install -g @angular/cli
ng new my-app
// 处理 window 的事件
// window 还可以为
// document, window, body
// https://github.com/angular/angular/blob/3412aba46e387b234d72e9194e2308f1d71a62df/modules/angular2/src/platform/server/parse5_adapter.ts#L533
@HostListener('window:resize', ['$event'])
onResize(event) {
  event.target.innerWidth;
}

// 绑定 host 上的 class
@HostBinding('class.someClass') someField: boolean = false;
# 全局安装 ng
# 或者 npm i -g @angular/cli
yarn global add @angular/cli
# 如果全局路径不在 PATH 中可以添加以下命令输出的路径
yarn global bin
# 或者直接运行
$(yarn global bin)/ng

# 修改现有项目的样式类型
ng set defaults.styleExt scss
# 如果出现无法处理 css 的异常, 则修改 angular-cli.json 中的 "styles":["styles.css"] 为 "styles":["styles.scss"]

# 生成项目时使用 scss
ng new my-roject --style=scss

# 在当前目录,生成路由,添加 ServiceWorker
ng new --routing -sw --style scss -dir . proj

ng add @angular/pwa
ng add @angular/material
ng add @angular/elements

ng generate @angular/material:material-nav --name=my-nav
ng generate @angular/material:material-dashboard --name=my-dashboard
ng generate @angular/material:material-table --name=my-table


# 查看压缩情况
source-map-explorer dist/main.bundle.js

Notes​

  • ng-container
    • ngTemplateOutlet
      • *ngTemplateOutlet="customTemplate ? customTemplate: defaultTemplate"
    • 模板容器
  • ng-template
    • 模板定义
    • 可以被引用
    • 默认不会显示, 可以由结构指令控制
    • 代码引用
@ViewChild('defaultTabButtons')
defaultTabButtonsTpl: TemplateRef<any>;

SSR​

UI 组件​

Material​

yarn add @angular/material @angular/cdk
yarn add @angular/animations
yarn add hammerjs

Covalent​

  • Teradata/covalent
    • Covalent: UI Platform based on Angular-Material
  • 基于 Angular/Material
yarn add @covalent/core
## (optional) Additional Covalent Modules installs
yarn add @covalent/http @covalent/highlight @covalent/markdown @covalent/dynamic-forms

GraphQL​

yarn add apollo-angular

yarn add apollo-angular apollo-angular-link-http apollo-client apollo-cache-inmemory graphql-tag graphql

开发规范​

  • Style Guide
    • 官方规范手册
  • Architecture Overview
    • 架构概览
  • 标准目录结构
    • /e2e
      • 测试相关
    • /src
      • /app
        • 应用代码主目录
        • /shared
          • 全局公共组件
        • /pages
          • 全局公共页面
        • /<模块>
          • 自定义模块
          • /shared
            • 自定义模块下的共享组件
          • /<组件>
            • 自定义模块下的组件
      • /assets
        • 资源
          • 例如图片
      • /environments
        • 环境配置
        • 生产,开发,测试
      • main.ts
        • 入口
      • polyfills.ts
        • 添加 Polyfills 的地方
      • styles.scss
        • 全局样式, 添加主题的地方
  • 组件命名
    • 页面建议使用 page- 的前缀

NOTES​

  • 主要注解
    • @ContentChild
    • @ContentChildren
    • @HostBinding
    • @HostListener
    • @Input
    • @Output
    • @ViewChild
    • @ViewChildren
    • @Component
    • @Directive
    • @Pipe
  • Component, Directive 和 Pipe 注解不支持继承
  • AOT 后, 组件的元数据是不存在的

代码分析​

组件通讯​

  1. @Input 属性绑定
  2. @Output 对外事件触发, 多为 EventEmitter
  3. @Input + @Output 可以组成双向绑定
  4. @ViewChild 可以将引用到的组件直接注入, 可以直接操作组件方法
  5. 基于 Service 进行通讯

路由​

  • 路由的内容会在 <router-outlet> 标签中显示
  • 路由可以做多级

APF​