備忘録
シンプルなやつ
用語メモ
| 用語 | 説明 |
|---|---|
| モジュール | Angularアプリの構成部品を束ねる コンポーネントやサービスを内包する 起動時に呼び出されるモジュールをルートモジュール or メインモジュールと呼ぶ |
| コンポーネント | ページを構成するUI部品を定義する |
| デコレーター | クラスやプロパティ、メソッド、引数に対して構成情報を付与するための仕組み |
- モジュール: Angularアプリの構成部品を束ねる
コンポーネントやサービスを内包する
起動時に呼び出されるモジュールをルートモジュール or メインモジュールと呼ぶ。
コンポーネント:
画面
ソース
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<!-- このmy-appに挿入される -->
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { AppComponentDetail1 } from "./app.component_detail1";
import { AppComponentDetail2 } from "./app.component_detail2";
@NgModule({
//imports: 現在のモジュールで利用する他のモジュール
imports: [BrowserModule],
// declarations: 現在のモジュールに属するコンポーネント
declarations: [AppComponent, AppComponentDetail1, AppComponentDetail2],
// アプリで最初に起動すべき最上位のコンポーネント
bootstrap: [AppComponent],
})
export class AppModule {}
app.component.ts
import { Component } from "@angular/core";
@Component({
// selector: コンポーネントを適用すべき要素を表すセレクター式
selector: "my-app",
// template: コンポーネントを適用すべきビュー
template: `
<h1>Hello {{ name }}</h1>
<div>
<my-app-detail1>...1</my-app-detail1>
<my-app-detail2>...2</my-app-detail2>
</div>
`,
})
export class AppComponent {
name = "Angular";
}
app.component_detail1.ts
import { Component } from "@angular/core";
@Component({
selector: "my-app-detail1",
template: `<p>Detail-1</p>`,
})
export class AppComponentDetail1 {}
app.component_detail2.ts
import { Component } from "@angular/core";
@Component({
selector: "my-app-detail2",
template: `<p>Detail-2</p>`,
})
export class AppComponentDetail1 {}
仕組み
app-moduleは各コンポーネントとルートモジュールを定義している