React 人看 Angular (一)

常常看到很多人在討論前端框架哪個好，React、Vue、Angular 學那個比較好。最好的方式就是就來寫一次就知道自己喜不喜歡了~ :)

Project Init

ng new projectName

跟 React 的 CRA 一樣，可以用 command line 很快速的建立一個 scaffold。

Main Module

React 通常會拿一個 Container Component 來做 Routing， Angular 在 framework 中已經有一個明確的 app.module.ts 來指定整個 APP 的 Routing Module 與 Root Component。

Main Module 是用 @NgModule decorator 來設定。

@NgModule({
  declarations: [ //定義可以使用的 components
    AppComponent
  ],
  imports: [  //額外需要的模組
    BrowserModule, 
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent] //程式進入點
})
export class AppModule { }

Root Component 是用 @Component 這個 decorator 來設定一個單純的 TypeScript class，而 class 中的 property 即是 React 中的 state，可以在 component 的 html 中使用。 <div>{{ title }}</div>

import { Component } from '@angular/core';
@Component({
  selector: 'app-root', //root tag
  templateUrl: './app.component.html', //component html
  styleUrls: ['./app.component.scss'] //component css
})
export class AppComponent {
  title = 'angular101';
}

Create component

Angular 可以下個指令就建一個新的 component，這個很方便。

ng generate component post

而且他不只的產生 component 而已，連 app.module.ts 都幫你 update 好了，很貼心。

然後只要在 app.component.html 中加個 <app-post></app-post> 可以成功的呼叫這個新增入的 component 了。

Event Binding

ng g class model/post 用 command line 產生了一個 Post model class。

export class Post {
    public title: string;
    public content: string;
    public readed: number;
    public favorite: boolean;
constructor() {
        this.title = 'Post1';
        this.content = 'Content1';
        this.readed = 0;
        this.favorite = false;
    }
toggleFavorite(): void {
        this.favorite = !this.favorite;
    }
}

將 post model 放入 post component 之中

import { Post } from './../model/post';
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-post',
  templateUrl: './post.component.html',
  styleUrls: ['./post.component.scss']
})
export class PostComponent implements OnInit {
  public post: Post;
  constructor() { }
ngOnInit(): void {
    this.post = new Post();
  }
}

然後用 Angular 特殊的 directives 將此 post 顯示

<div class="post-container">
    <h1>{{post.title}}</h1>
    <div class="post-content" [class]="post.favorite ? 'favorite' : ''">
        {{post.content}}
    </div>
    <button (click)="post.toggleFavorite()"
        [disabled]="post.favorite"
    >Add to Favorite</button>
</div>

感想

1. Angular 的 cli 功能很豐富，建專案，建 component，建 class 都以用指令產生。這點跟使用 Rails 的感覺很接近，非常棒。React 因為沒有限制框架，所以就沒有產生固定 scaffold 的內建工具。但 React 一定決定框架後，e.g. redux + saga，也可以使用類似 battlecry 的工具來達到一樣的效果。 https://github.com/pedsmoreira/battlecry
2. React 是用 Javascript 寫 HTML，而 Angular 是用 HTML 寫 code。雖然說的有點誇張了，但是體感很像。[class]="favorite ? 'classA' : 'classB'" (click)="func()" 這些 directives 要寫在 html 裡面，然後腦袋再想著你的 data source , component。
3. 就學了 Angular 第一課的 React 人來看。Angular 了解整個框架使用方式之後，還是很接近寫 Vue + HTML，但是一大堆的規範幫你已經規定好什麼東西要寫在哪。而 React 是了解 jsx 後，感覺自己會 React 了，但是真正開始寫專案的時侯，光一個簡單的form，就會一直問自己，這個在 React 要怎麼寫呀? :)