Angular Style Guide แปล สรุป เรียบเรียงจาก https://angular.io/guide/styleguide
- Single responsibility
- Naming
- Application structure and NgModules
- Components
- Directives
- Services
- Data Services
- Lifecycle hooks
สร้างแต่ละอย่างเป็นไฟล์ๆไป เช่น Component 1 ไฟล์ Service 1 ไฟล์ พยายามให้ Code ในแต่ละไฟล์ไม่เกิน 400 บรรทัด เพราะไฟล์เล็กจะทำให้อ่านง่ายกว่า ดูแลง่ายกว่า เพราะการประกาศ 1 Component ต่อ 1 ไฟล์ ทำให้ไม่สับสน การมีเกิน 1 Component ต่อไฟล์อาจทำให้ใช้ตัวแปรตัวเดียวกัน ทำให้เกิดบัคได้ง่าย การประกาศ 1 Component ต่อไฟล์จึงทำให้ Reuse ได้ง่ายกว่า อ่าน Code ง่ายกว่า และผิดพลาดน้อยกว่า
ตัวอย่างที่ไม่ดี:
app/heroes/hero.component.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component, OnInit } from '@angular/core';
class Hero {
id: number;
name: string;
}
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<pre>{{heroes | json}}</pre>
`,
styleUrls: ['app/app.component.css']
})
class AppComponent implements OnInit {
title = 'Tour of Heroes';
heroes: Hero[] = [];
ngOnInit() {
getHeroes().then(heroes => this.heroes = heroes);
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
const HEROES: Hero[] = [
{id: 1, name: 'Bombasto'},
{id: 2, name: 'Tornado'},
{id: 3, name: 'Magneta'},
];
function getHeroes(): Promise<Hero[]> {
return Promise.resolve(HEROES); // TODO: get hero data from the server;
}สร้างฟังก์ชั่นที่มีขนาดเล็ก โดย 1 ฟังก์ชั่นไม่ควรเกิน 75 บรรทัด ฟังก์ชั่นเล็กมีข้อดีคือ เทสง่าย reuse ง่าย อ่านง่าย ดูแลง่าย เกิดบัคยาก