Skip to main content

Angular

npm install -g @angular/cling 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/cliyarn 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"]
# 生成项目时使用 scssng new my-roject --style=scss
# 在当前目录,生成路由,添加 ServiceWorkerng new --routing -sw --style scss -dir . proj
ng add @angular/pwang add @angular/materialng add @angular/elements
ng generate @angular/material:material-nav --name=my-navng generate @angular/material:material-dashboard --name=my-dashboardng 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/cdkyarn add @angular/animationsyarn add hammerjs

Covalent#

  • Teradata/covalent
    • Covalent: UI Platform based on Angular-Material
  • 基于 Angular/Material
yarn add @covalent/core## (optional) Additional Covalent Modules installsyarn 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, DirectivePipe 注解不支持继承
  • AOT 后, 组件的元数据是不存在的

代码分析#

组件通讯#

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

路由#

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