Angularプロジェクトの構成 #Angular

前回ではAngularプロジェクトを作成。実際に起動して確認!というとこまでやりました！
まだの人は以下の記事で！
Angularプロジェクトの作成

※読んだ方でおかしいと思う点があればコメントいただけると嬉しいです！

それでは

Angularを動かす前に

は？また？？って思わないでください
まずはファイルの構成から見ていきましょう

色々ファイルがありますが、
基本的に使うのは、

src/assets　
src/app/

の二つになります！

src/assets :ここは画像とかiconとかを置く時に使うので初めは空だと思います！
src/app　　 :ここは実際に編集を行っていくディレクトリで、中にはすでにいくつかあって⬇︎

app-routing.module.ts       // ng newの時にrouting実装しますかって聞かれた時にyっていうとこれ作ってくれます
app.component.html          // appっていうコンポーネントのhtml
app.component.scss　　　　　　// appっていうコンポーネントのscss
app.component.spec.ts       // appっていうコンポーネントのテストファイル（自動生成されます）
app.component.ts            // appっていうコンポーネントのtypescript
　　　　　　　　　　　　　　　　   | jsに型がついたもで。コンパイルするとjsになります。
　　　　　　　　　　　　　　　　   | jsもそのままかけたりするのでJqueryとかも同じとこにかける(厳密にいうと違う))
app.module.ts               // ここにはプロジェクトで使うモジュールやコンポーネントの定義を書く

プレーンな環境ではこんな構成になっています！

コンポーネントって？（Component）

ちょっと待って、さっきからコンポーネントとか、モジュールとか言ってるけどそれって何？？
ってなる人もいると思います！

Wikipedia先生によると

構成要素。部品。
コンピュータ機器やソフトウェアの部品。
ステレオで、チューナー・アンプ・プレーヤー・スピーカーなどの単独の機器。コンポ。

なるほど、用は部品だ。でもここでいうコンポーネントってどのこと？

Angularでいうコンポーネント(部品)ってのは実際にコンポーネントを作ってみるとわかりやすくて、

$ng generate component header   //ちなみにgenerate は g と略せる
CREATE src/app/header/header.component.scss (0 bytes)
CREATE src/app/header/header.component.html (25 bytes)
CREATE src/app/header/header.component.spec.ts (628 bytes)
CREATE src/app/header/header.component.ts (270 bytes)
UPDATE src/app/app.module.ts (475 bytes)

src/app/header/というディレクトリができたらしいので見てみる

$cd src/app/header
$ls -l
header.component.html
header.component.scss
header.component.spec
header.component.ts

テストのspec.tsはこのプロジェクトでは無視しておいてください
このようにAngularでは

html　　　　　　 ->  実際の表示
css　　　　　　  ->　そのデザイン
typescript　　　->  データの受け渡しや、上二つと自身が三つで一つのコンポーネントであることの定義など

これらを一つのコンポーネントとして考えられています

下がPCでみたWebページの１画面と考えてください（クソ適当でごめんなさい）

こんな風に実際に作るときにはいろんなコンポーネントを合わせて一つのWebページを構成していく感じになります

モジュールって？（Module）

これもWikipediaによると

モジュール（英: module）とは、工学などにおける設計上の概念で、システムを構成する要素となるもの。いくつかの部品的機能を集め、まとまりのある機能を持った部品のこと。モジュールに従っているものをモジュラー（英: modular）という。

工学科とか専攻していた人たちなら直感的に伝わるかもしれませんがその他を専攻してきた人たちはこれだけ聞くとコンポーネントとの違いがわからない人も少なくないと思います

僕も言語化が難しいのですが、イメージとしては、
Angularでは
コンポーネントは画面の構成要素、モジュールはそれに対してコンポーネントの中で使う機能や、デザインとかを使い回せるようにした細かい部品のこととして考えられていると思います

???

具体的にどんなものがあるかというと
イケイケなボタン、フォーム機能、データツリーそのほかにも山ほどあります

例えばこれとか

大枠はあるので中に表示させるものだけピョコってはめ込めばこういうものも簡単に作れると。

こういう
デザインや仕様はある程度すでに整っていて中身を定義さえすれば独自のものとして使える
がAngularでのモジュールの定義だと思います（違ったらすいません本当）

最低限知っておくべき構成要素についてはこんな感じです！！

どうやってコンポーネントとして定義されているか

ではさっき作ったheader/ディレクトリに行ってみましょう

$cd src/app/header
header.component.html    header.component.spec.ts
header.component.scss    header.component.ts

このtsファイルを開きましょう！
中を見ると

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

＠Componentっていうアノテーションが付いてる部分がComponentの定義になります
解説すると
selecter: このコンポーネントを呼び出すときのタグの名前
tempplateUrl: このコンポーネントのHTMLファイルのPATH
styleUtls: このコンポーネントのCSSファイルのPATH

になっていますが色々編集は可能で、ここにHTML、CSSを直接書くこともできます

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

@Component({
  selector: 'app-header',
  template: `
    <h1>Heder だよーーー！</h1>
 `,
  styles:[`
    h1 { color:   red; }
  `],
})
export class HeaderComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

改行するなら「`」（名前知らない）しないなら「'」(シングルクォーテンション)で囲わないとエラーになります！
でもこれでコンポーネントとしては成りたちますが、本来はこのままでは使えずapp.module.tsにこのプロジェクトで使うコンポーネントとして登録しないといけません
結局何すればいいかというと

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
↑ここでインポートしてーー

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent      ←　ここに追加するだけ！！！！
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

これだけで使えるようにないます！あと多分ng コマンドで生成するとここを勝手にやってくれますが、たまに不具合とか起きるので都度確認するようにしましょう！

じゃぁ早速表示させてみましょう！
$ng serve ←プロジェクトのルートディレクトリで
app.component.htmlを以下のように編集します

<!--  他の表示されているもの鬱陶しいので全部消しちゃいましょう！（route-outletは一応おいといてください）-->
<app-header></app-header>

<router-outlet></router-outlet>

これでhttp://localhost:4200/
にアクセスすると

と表示されるはずです！
では試しにheader.component.tsのselecterの部分を書き換えてみましょう！

@Component({
  selector: 'headerdayo',     //←headerだけにするとhtml本来のheaderが使えなくなる
  template: `
    <h1>Heder だよーーー！</h1>
 `,
  styles:[`
    h1 { color:   red; }
  `],
})

あとはapp.component.htmlのタグを<app-header>から<headerdayo>に変更したら

と表示されるはずです！

これでざっくりとした全体の構成、Component,Module,についてわかったかと思います！

次は実際にコリコリと書いていきたいと思います！
Angularでの基本的なページレイアウトを理解する