Angularで遊んでみる2

続き。

「Demoです」だけを表示させたい。

src/index.htmlを弄った

app-rootをコメントアウトして、demo-rootを記載しておく。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <!--<app-root></app-root>-->
  <demo-root></demo-root>
</body>
</html>

src配下にdemoを作る

  • demo.component.css
  • demo.component.html
  • demo.component.ts
  • demo.module.ts

demo.component.html

<h1>{{ title }}</h1>

demo.component.ts

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

@Component({
  selector: 'demo-root',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css']
})
export class DemoComponent {
  title = 'Demoです';
}
````

### demo.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';

import { DemoComponent } from './demo.component';

@NgModule({ declarations: [ DemoComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [DemoComponent] }) export class DemoModule { }

## 実行
[f:id:levia9071:20200629175716p:plain]
---

# 生成されたディレクトリの役割について
|ディレクトリ名|役割|
|:--|:--|
|src|ソースコードを置く。よく使う|
|src/app|アプリケーションのソースコードを置く|
|src/assets|画像などの静的ファイルを置く|
|src/environments|開発環境と本番環境などの環境ごとに変動させたい値を格納するファイル（application.ymlみたいなやつ）を置く。|
|e2e|e2e(end to end) テスト(実際にブラウザを動かしてページのテストを行うもの)のコードを置く。src/test配下みたいなイメージ|
|node_modules|nodeのモジュールが置かれるディレクトリ。基本的には触らない。libs配下？|

## src/app配下のファイルについて

|ファイル名|役割|
|:--|:--|
|src/app/app.component.ts|ロジック。`.ts`とは、Typescript コードを示す拡張子である|
|src/app/app.component.html|表示|
|src/app/app.component.css|スタイル|