Angular vs Ember Polaris - JavaScript 框架语法对比

响应式

声明状态

Angular

import { Component, NgModule } from "@angular/core";

@Component({
  selector: "app-name",
  template: `<h1>你好 {{ name }}</h1>`,
})
export class NameComponent {
  name = "张三";
}

@NgModule({
  declarations: [NameComponent],
  exports: [NameComponent],
})
export class NameModule {}

Ember Polaris

import Component from "@glimmer/component";

export default class NameComponent extends Component {
  name = "张三";

  <template>
    <h1>你好 {{this.name}}</h1>
  </template>
}

更新状态

Angular

import { Component, NgModule } from "@angular/core";

@Component({
  selector: "app-name",
  template: `<h1>你好 {{ name }}</h1>`,
})
export class NameComponent {
  name = "张三";

  constructor() {
    this.name = "李四";
  }
}

@NgModule({
  declarations: [NameComponent],
  exports: [NameComponent],
})
export class NameModule {}

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class CounterComponent extends Component {
  @tracked name = "张三";

  constructor(owner, args) {
    super(owner, args);

    this.name = "李四";
  }

  <template>
    <h1>你好 {{this.name}}</h1>
  </template>
}

计算属性

Angular

import { Component, NgModule } from "@angular/core";

@Component({
  selector: "app-doublecount",
  template: `<div>{{ doubleCount }}</div>`,
})
export class DoublecountComponent {
  count = 10;

  get doubleCount() {
    return this.count * 2;
  }
}

@NgModule({
  declarations: [DoublecountComponent],
  exports: [DoublecountComponent],
})
export class DoublecountModule {}

Ember Polaris

import Component, { tracked } from "@glimmer/component";

export default class DoubleCount extends Component {
  @tracked count = 10;

  get doubleCount() {
    return this.count * 2;
  }

  <template>
    <div>{{this.doubleCount}}</div>
  </template>
}

模板语法

最简模板

Angular

import { Component, NgModule } from "@angular/core";

@Component({
  selector: "app-helloworld",
  template: `<h1>你好，世界</h1>`,
})
export class HelloworldComponent {}

@NgModule({
  declarations: [HelloworldComponent],
  exports: [HelloworldComponent],
})
export class HelloworldModule {}

Ember Polaris

<template>
  <h1>你好，世界</h1>
</template>

样式

Angular

import { Component, NgModule } from "@angular/core";

@Component({
  selector: "app-cssstyle",
  template: `
    <h1 class="title">我是红色的</h1>
    <button style="font-size: 10rem">我是一个按钮</button>
  `,
  styles: [
    `
      .title {
        color: red;
      }
    `,
  ],
})
export class CssStyleComponent {}

@NgModule({
  declarations: [CssStyleComponent],
  exports: [CssStyleComponent],
})
export class CssStyleModule {}

Ember Polaris

<template>
  <h1 class="title">我是红色的</h1>
  <button style="font-size: 10rem;">我是一个按钮</button>

  <style>
    .title {
      color: red;
    }
  </style>
</template>

DOM循环

Angular

import { Component, NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

@Component({
  selector: "app-colors",
  template: `
    <ul>
      <li *ngFor="let color of colors">{{ color }}</li>
    </ul>
  `,
})
export class ColorsComponent {
  colors = ["红", "绿", "蓝"];
}

@NgModule({
  declarations: [ColorsComponent],
  imports: [CommonModule],
  exports: [ColorsComponent],
})
export class ColorsModule {}

Ember Polaris

const colors = ["红", "绿", "蓝"];

<template>
  <ul>
    {{#each colors as |color|}}
      <li>{{color}}</li>
    {{/each}}
  </ul>
</template>

点击事件

Angular

import { Component, NgModule } from "@angular/core";

@Component({
  selector: "app-counter",
  template: `
    <p>计数器: {{ count }}</p>
    <button (click)="incrementCount()">+1</button>
  `,
})
export class CounterComponent {
  count = 0;

  incrementCount() {
    this.count++;
  }
}

@NgModule({
  declarations: [CounterComponent],
  exports: [CounterComponent],
})
export class CounterModule {}

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class Counter extends Component {
  @tracked count = 0;

  incrementCount = () => this.count++;

  <template>
    <p>计数器: {{this.count}}</p>
    <button {{on "click" this.incrementCount}}>+1</button>
  </template>
}

DOM引用

Angular

import {
  Component,
  ViewChild,
  ElementRef,
  OnInit,
  NgModule,
} from "@angular/core";

@Component({
  selector: "app-inputfocused",
  template: `<input type="text" #inputRef />`,
})
export class InputfocusedComponent implements OnInit {
  @ViewChild("inputRef", { static: true })
  inputRef!: ElementRef<HTMLInputElement>;

  ngOnInit() {
    this.inputRef.nativeElement.focus();
  }
}

@NgModule({
  declarations: [InputfocusedComponent],
  exports: [InputfocusedComponent],
})
export class InputfocusedModule {}

Ember Polaris

import { modifier } from "ember-modifier";

const autofocus = modifier((element) => element.focus());

<template>
  <input {{autofocus}} />
</template>

条件渲染

Angular

import { Component, NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";

const TRAFFIC_LIGHTS = ["红灯", "黄灯", "绿灯"];

@Component({
  selector: "app-trafficlight",
  template: `
    <button (click)="nextLight()">下一个灯</button>
    <p>现在亮着的是: {{ light }}</p>
    <p>
      你应该
      <ng-container [ngSwitch]="light">
        <span *ngSwitchCase="'红灯'">停下</span>
        <span *ngSwitchCase="'黄灯'">慢行</span>
        <span *ngSwitchCase="'绿灯'">赶紧走</span>
      </ng-container>
    </p>
  `,
})
export class TrafficlightComponent {
  lightIndex = 0;

  get light() {
    return TRAFFIC_LIGHTS[this.lightIndex];
  }

  nextLight() {
    this.lightIndex = (this.lightIndex + 1) % TRAFFIC_LIGHTS.length;
  }
}

@NgModule({
  declarations: [TrafficlightComponent],
  imports: [CommonModule],
  exports: [TrafficlightComponent],
})
export class TrafficlightModule {}

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

const TRAFFIC_LIGHTS = ["红灯", "黄灯", "绿灯"];

export default class TrafficLight extends Component {
  @tracked lightIndex = 0;

  get light() {
    return TRAFFIC_LIGHTS[this.lightIndex];
  }

  nextLight = () => {
    this.lightIndex = (this.lightIndex + 1) % TRAFFIC_LIGHTS.length;
  };

  <template>
    <button {{on "click" this.nextLight}}>下一个灯</button>
    <p>现在亮着的是: {{this.light}}</p>
    <p>
      你应该
      {{#if (eq this.light "红灯")}}
        停下
      {{else if (eq this.light "黄灯")}}
        慢行
      {{else if (eq this.light "绿灯")}}
        赶紧走
      {{/if}}
    </p>
  </template>
}

生命周期

组件加载时

Angular

import { Component, NgModule, OnInit } from "@angular/core";

@Component({
  selector: "app-pagetitle",
  template: `<p>页面标题: {{ pageTitle }}</p>`,
})
export class PagetitleComponent implements OnInit {
  pageTitle = "";

  ngOnInit() {
    this.pageTitle = document.title;
  }
}

@NgModule({
  declarations: [PagetitleComponent],
  exports: [PagetitleComponent],
})
export class PagetitleModule {}

Ember Polaris

const pageTitle = () => document.title;

<template>
  <p>页面标题: {{(pageTitle)}}</p>
</template>

组件卸载时

Angular

import { Component, NgModule, OnDestroy } from "@angular/core";

@Component({
  selector: "app-time",
  template: `<p>当前时间: {{ time }}</p>`,
})
export class TimeComponent implements OnDestroy {
  time = new Date().toLocaleTimeString();

  timer = setInterval(() => {
    this.time = new Date().toLocaleTimeString();
  }, 1000);

  ngOnDestroy() {
    clearInterval(this.timer);
  }
}

@NgModule({
  declarations: [TimeComponent],
  exports: [TimeComponent],
})
export class TimeModule {}

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { registerDestructor } from "@ember/destroyable";

export default class Time extends Component {
  @tracked time = new Date().toLocaleTimeString();

  constructor(owner, args) {
    super(owner, args);

    let timer = setInterval(() => {
      this.time = new Date().toLocaleTimeString();
    }, 1000);

    registerDestructor(this, () => clearInterval(timer));
  }

  <template>
    <p>当前时间: {{this.time}}</p>
  </template>
}

组件组合

组件Props传参

Angular

import { Component, NgModule } from "@angular/core";
import { UserprofileModule } from "./userprofile.component";

@Component({
  selector: "app-root",
  template: `
    <app-userprofile
      name="张三"
      [age]="20"
      [favouriteColors]="['green', 'blue', 'red']"
      [isAvailable]="true"
    >
    </app-userprofile>
  `,
})
export class AppComponent {}

@NgModule({
  declarations: [AppComponent],
  imports: [UserprofileModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Ember Polaris

import UserProfile from "./user-profile.gjs";

const favoriteColors = ["green", "blue", "red"];

<template>
  <UserProfile
    @name="张三"
    @age={{20}}
    @favouriteColors={{favoriteColors}}
    @isAvailable={{true}}
  />
</template>

向父组件emit事件

Angular

import { Component, NgModule } from "@angular/core";
import { AnswerButtonModule } from "./answer-button.component";

@Component({
  selector: "app-root",
  template: `
    <p>你快乐吗?</p>

    <app-answer-button (yes)="onAnswerYes()" (no)="onAnswerNo()">
    </app-answer-button>

    <p style="font-size: 50px">{{ isHappy ? "😀" : "😥" }}</p>
  `,
})
export class AppComponent {
  isHappy = true;

  onAnswerYes() {
    this.isHappy = true;
  }

  onAnswerNo() {
    this.isHappy = false;
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [AnswerButtonModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Ember Polaris

<template>
  <button {{on "click" @onYes}}> 是的！ </button>
  <button {{on "click" @onNo}}> 不是！ </button>
</template>

slot插槽

Angular

import { Component, NgModule } from "@angular/core";
import { FunnyButtonModule } from "./funny-button.component";

@Component({
  selector: "app-root",
  template: `<app-funny-button>点我!</app-funny-button>`,
})
export class AppComponent {}

@NgModule({
  declarations: [AppComponent],
  imports: [FunnyButtonModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Ember Polaris

import FunnyButton from "./funny-button";

<template>
  <FunnyButton>点我!</FunnyButton>
</template>

slot插槽内容

Angular

import { Component, NgModule } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <app-funny-button></app-funny-button>

    <app-funny-button>
      <ng-template #content>这是传到slot的内容!</ng-template>
    </app-funny-button>
  `,
})
export class AppComponent {}

@NgModule({
  declarations: [AppComponent],
  imports: [FunnyButtonModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Ember Polaris

import FunnyButton from "./funny-button";

<template>
  <FunnyButton />
  <FunnyButton>这是传到slot的内容!</FunnyButton>
</template>

上下文

Angular

import { Component, NgModule } from "@angular/core";
import { UserService } from "./user.service";
import { UserProfileModule } from "./user-profile.component";

@Component({
  providers: [UserService],
  selector: "app-root",
  template: `
    <h1>欢迎回来, {{ userService.user.username }}</h1>
    <app-user-profile />
  `,
})
export class AppComponent {
  constructor(public userService: UserService) {}
}

@NgModule({
  declarations: [AppComponent],
  imports: [UserProfileModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

Ember Polaris

import UserProfile from "./user-profile";

<template>
    <UserProfile />
</template>

表单输入

输入框

Angular

import { Component, NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";

@Component({
  selector: "app-input-hello",
  template: `
    <p>{{ text }}</p>
    <input [(ngModel)]="text" />
  `,
})
export class InputHelloComponent {
  text = "";
}

@NgModule({
  declarations: [InputHelloComponent],
  imports: [FormsModule],
  exports: [InputHelloComponent],
})
export class InputHelloModule {}

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class InputHello extends Component {
  @tracked text = "你好世界";

  handleInput = (event) => (this.text = event.target.value);

  <template>
    <p>{{this.text}}</p>
    <input value={{this.text}} {{on "input" this.handleInput}} />
  </template>
}

复选框

Angular

import { Component, NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";

@Component({
  selector: "app-is-available",
  template: `
    <input id="is-available" type="checkbox" [(ngModel)]="isAvailable" />
    <label for="is-available">这是一个checkbox</label>
  `,
})
export class IsAvailableComponent {
  isAvailable = false;
}

@NgModule({
  declarations: [IsAvailableComponent],
  imports: [FormsModule],
  exports: [IsAvailableComponent],
})
export class IsAvailableModule {}

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class InputHello extends Component {
  @tracked isAvailable = false;

  handleChange = (event) => (this.isAvailable = event.target.checked);

  <template>
    <input
      id="is-available"
      type="checkbox"
      checked={{this.isAvailable}}
      {{on "change" this.handleChange}}
    />
    <label for="is-available">这是一个checkbox</label>
  </template>
}

单选框

Angular

import { Component, NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";

@Component({
  selector: "app-pick-pill",
  template: `
    <div>你选择了: {{ picked }}</div>

    <input id="blue-pill" type="radio" value="blue" [(ngModel)]="picked" />
    <label for="blue-pill">蓝色</label>

    <input id="red-pill" type="radio" value="red" [(ngModel)]="picked" />
    <label for="red-pill">红色</label>
  `,
})
export class PickPillComponent {
  picked = "red";
}

@NgModule({
  declarations: [PickPillComponent],
  imports: [FormsModule],
  exports: [PickPillComponent],
})
export class PickPillModule {}

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class PickPill extends Component {
  @tracked picked = "red";

  handleChange = (event) => (this.picked = event.target.value);

  <template>
    <div>你选择了: {{this.picked}}</div>

    <input
      id="blue-pill"
      type="radio"
      value="blue"
      checked={{eq this.picked "blue"}}
      {{on "change" this.handleChange}}
    />
    <label htmlFor="blue-pill">蓝色</label>

    <input
      id="red-pill"
      type="radio"
      value="red"
      checked={{eq this.picked "red"}}
      {{on "change" this.handleChange}}
    />
    <label htmlFor="red-pill">红色</label>
  </template>
}

选择器

Angular

import { Component, NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";

@Component({
  selector: "app-color-select",
  template: `
    <select [(ngModel)]="selectedColorId">
      <option
        *ngFor="let color of colors"
        [value]="color.id"
        [disabled]="color.isDisabled"
      >
        {{ color.text }}
      </option>
    </select>
  `,
})
export class ColorSelectComponent {
  selectedColorId = 2;

  colors = [
    { id: 1, text: "红" },
    { id: 2, text: "蓝" },
    { id: 3, text: "绿" },
    { id: 4, text: "灰", isDisabled: true },
  ];
}

@NgModule({
  declarations: [ColorSelectComponent],
  imports: [FormsModule],
  exports: [ColorSelectComponent],
})
export class ColorSelectModule {}

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

export default class ColorSelect extends Component {
  @tracked selectedColorId = 2;

  select = (event) => (this.selectedColorId = event.target.value);

  isSelected = (colorId) => this.selectedColorId === colorId;

  colors = [
    { id: 1, text: "红" },
    { id: 2, text: "蓝" },
    { id: 3, text: "绿" },
    { id: 4, text: "灰", isDisabled: true },
  ];

  <template>
    <select {{on "change" this.select}}>
      {{#each this.colors as |color|}}
        <option
          value={{color.id}}
          disabled={{color.isDisabled}}
          selected={{this.isSelected color.id}}
        >
          {{color.text}}
        </option>
      {{/each}}
    </select>
  </template>
}

Web应用特性

渲染应用

Angular

<!doctype html>
<html>
  <body>
    <app-root></app-root>
  </body>
</html>

Ember Polaris

<!doctype html>
<html>
  <body>
    <script type="module" src="./index.js"></script>
  </body>
</html>

fetch获取数据

Angular

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";

export interface UsersState {
  users: User[];
  error: string | null;
  loading: boolean;
}

export const initialState: UsersState = {
  users: [],
  error: null,
  loading: false,
};

@Injectable({ providedIn: "root" })
export class UserService {
  private state = new BehaviorSubject<UsersState>(initialState);
  state$ = this.state.asObservable();

  constructor(private http: HttpClient) {}

  loadUsers() {
    this.state.next({ ...initialState, loading: true });

    this.http
      .get<UserResponse>("https://randomuser.me/api/?results=3")
      .subscribe({
        next: ({ results }) =>
          this.state.next({ ...initialState, users: results }),
        error: (error) => this.state.next({ ...initialState, error }),
      });
  }
}

export interface UserResponse {
  results: User[];
  info: any;
}

export interface User {
  name: {
    title: string;
    first: string;
    last: string;
  };
  picture: {
    large: string;
    medium: string;
    thumbnail: string;
  };
}

Ember Polaris

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";

class State {
  @tracked isLoading = false;
  @tracked error = null;
  @tracked data = null;
}

function fetchUsers() {
  let state = new State();
  
  async function fetchData() {
    try {
      let response = await fetch("https://randomuser.me/api/?results=3");
      let { results: users } = await response.json();
      state.data = users;
      state.error = null;
    } catch (err) {
      state.data = null;
      state.error = err;
    }
    state.isLoading = false;
  }
  
  fetchData();
  return state;
}

export default class App extends Component {
  <template>
    {{#let (this.fetchUsers) as |request|}}
      {{#if request.isLoading}}
        <p>正在获取用户信息……</p>
      {{else if request.error}}
        <p>获取用户信息出错</p>
      {{else}}
        <ul>
          {{#each request.data as |user|}}
            <li>
              <img src={{user.picture.thumbnail}} alt="user" />
              <p>{{user.name.first}} {{user.name.last}}</p>
            </li>
          {{/each}}
        </ul>
      {{/if}}
    {{/let}}
  </template>
}

响应式 #

声明状态 #

Angular

Ember Polaris

更新状态 #

Angular

Ember Polaris

计算属性 #

Angular

Ember Polaris

模板语法 #

最简模板 #

Angular

Ember Polaris

样式 #

Angular

Ember Polaris

DOM循环 #

Angular

Ember Polaris

点击事件 #

Angular

Ember Polaris

DOM引用 #

Angular

Ember Polaris

条件渲染 #

Angular

Ember Polaris

生命周期 #

组件加载时 #

Angular

Ember Polaris

组件卸载时 #

Angular

Ember Polaris

组件组合 #

组件Props传参 #

Angular

Ember Polaris

向父组件emit事件 #

Angular

Ember Polaris

slot插槽 #

Angular

Ember Polaris

slot插槽内容 #

Angular

Ember Polaris

上下文 #

Angular

Ember Polaris

表单输入 #

输入框 #

Angular

Ember Polaris

复选框 #

Angular

Ember Polaris

单选框 #

Angular

Ember Polaris

选择器 #

Angular

Ember Polaris

Web应用特性 #

渲染应用 #

Angular

Ember Polaris

fetch获取数据 #

Angular

Ember Polaris

响应式

声明状态

更新状态

计算属性

模板语法

最简模板

样式

DOM循环

点击事件

DOM引用

条件渲染

生命周期

组件加载时

组件卸载时

组件组合

组件Props传参

向父组件emit事件

slot插槽

slot插槽内容

上下文

表单输入

输入框

复选框

单选框

选择器

Web应用特性

渲染应用

fetch获取数据