Angular

如果想要实现默认的嵌套多级路由,并且希望将路由定义在别的地方,似乎只能使用 loadModule 来实现
内容映射可以使用 ng-content 实现
- 例如 <ng-content select="header"></ng-content>
angular-cli.json
ngrx/store
Angular Weekly Meeting Notes
Angular Universal Design
Augury
- Angular Debugging and Visualization Tools
相关资源
- Angular resources
CDK
NOTES:
- 目前没有比较好的退出登录 ICON, power_settings_new 算是最接近的了
  - #71
- Angular 9 默认 Ivy

bash

npm install -g @angular/cli
ng new my-app

Packages@angular/cli

JavaScript

// 处理 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;

bash

# 全局安装 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

Packages@angular/cli

Notes

ng-container
- ngTemplateOutlet
  - *ngTemplateOutlet="customTemplate ? customTemplate: defaultTemplate"
- 模板容器
ng-template
- 模板定义
- 可以被引用
- 默认不会显示, 可以由结构指令控制
- 代码引用

TypeScript

@ViewChild('defaultTabButtons')
defaultTabButtonsTpl: TemplateRef<any>;

Angular ng-template, ng-container and ngTemplateOutlet - The Complete Guide To Angular Templates

SSR

Server Side Rendering With Angular4

UI 组件

angular/flex-layout
- yarn add @angular/flex-layout
- API Documentation
Onsen UI for Angular 2+
- Create beautiful high-quality hybrid mobile apps the fastest way with Angular 2+ or AngularJS 1 and Onsen UI Framework.
Teradata/covalent
- Covalent: UI Platform based on Angular-Material
PrimeNG
- The Most Complete User Interface Suite for Angular
- primefaces/primeng
vmware/clarity
- UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences
- clarity.design
swimlane
- ngx-charts
- ngx-datatable
- ngx-dad
valor-software/ng2-tree
akserg/ng2-dnd
- 更好用

Material

Angular Material
注意官方的字体是使用的谷歌在线字体, 建议下载下来本地托管
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
- 下载 google/material-design-icons/iconfont
- 设计规范 google.github.io/material-design-icons
- 在线搜索 material.io/icons
- 也可以安装 material-design-icons 来使用
  - 该模块非常大 (~60M), 因为会下载整个仓库
- <i class="material-icons">face</i>
当分模块时, 可能每个模块都要导不同的 md 组件, 官方建议用一个自己的 Md 模块, 导入需要的, 然后导入该模块即可
已知问题
_elevation
- _elevation.scss
- Adding Box Shadow (md-elevation/z-depth) to Angular Material 2 Components

bash

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

Packages@angular/material@angular/cdk@angular/animationshammerjs

Covalent

Teradata/covalent
- Covalent: UI Platform based on Angular-Material
基于 Angular/Material

bash

yarn add @covalent/core
## (optional) Additional Covalent Modules installs
yarn add @covalent/http @covalent/highlight @covalent/markdown @covalent/dynamic-forms

Packages@covalent/core@covalent/http@covalent/highlight@covalent/markdown@covalent/dynamic-forms

GraphQL

Setup and options

bash

yarn add apollo-angular

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

Packagesapollo-angularapollo-angular-link-httpapollo-clientapollo-cache-inmemorygraphql-taggraphql

开发规范

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 后, 组件的元数据是不存在的