Angular, Blockchain, Science とか

Angular, Blockchain, Science全般 の情報を主に書いていきます。

【2】Angular v4 template html と css の使い方

Angular(v4) について前回はサーバを立てて Hello World をだすまでやったので、その続きを見ていきたいと思います。

まず、app.component.ts を見ましょう。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root', // index.html の app-rootタグに埋め込む
  templateUrl: './app.component.html', // htmlファイルを指定
 // template: '<h1>{{ title }}</h1>',  このように直接htmlを書くことも可能
  styleUrls: ['./app.component.css']   // cssファイルを指定
})
export class AppComponent {
  title = 'hello world';  // {{ title }} に hello world を埋め込む
}

コメントでごちゃごちゃしてますが、非常に簡単なので気楽にいきましょう。

app.component.htmlapp.component.css も開いてみましょう。

<h1>
  {{title}}
</h1>
h1 { color: blue; 
     size: 34px;} /* 自分で適当に装飾してください。*/

index.htmlも開いてみると、app-root タグ が見つかると思います。

要は、app-root の所に に app.component.ts の内容を入れ込むということです。

そして app.component.ts の内容は、 templateUrlに指定されたhtmlファイルとstyleUrlsに指定されたcssファイルで

export class AppComponent でデータを操作できるということです。

試しに、

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>{{comment}}</h2>
    `,
})
export class AppComponent {
  title = 'Hello World!!';
  comment = 'Angular is awesome!!';
}

のようにすると、以下のようになります。

f:id:firesparrow:20170422063111p:plain

とりあえず、templateUrl(またはtemplate), styleUrls, app.component.html, app.component.css を色々いじって慣れましょう。

今回はここまでで、次回は ngFor ngIf について書きます。