【Angular入門(5)】Angular CLIについて確認してみる

はじめに

前回までで、Angularの開発環境構築とHelloWorldでの動作確認は完了しました。

 

これから本格的な開発に入る前に、

HelloWorldの際にAngular CLIが雛形プロジェクトを生成したり、

プログラムをビルドしてくれたり、

ローカル環境でサーバを立ち上げてくれたりといろいろやってくれていたので

それらについて本記事では確認しておきます。

 

具体的に、本記事では以下3つを確認します。

  • Angular CLIで作成したプロジェクトのディレクトリ構造
  • Angular CLIでビルド&Webサーバ起動した際の処理の流れ
  • Angular CLIで作成したプロジェクトのソースコード

 

前提

本記事では、Angularの開発環境構築が完了し、HelloWorldが行えたことを前提に説明します。

【Angular入門(4)】ひとまずHello Worldしてみる(Mac編)

 

 

プロジェクトのディレクトリ構造確認

まず、ng newコマンドにて作成したhelloWorldプロジェクトのファイル構造を確認します。

MEMO
■distフォルダ

アプリのビルド成果物が保存されるフォルダ。

成果物をWebサーバにアップロードしてアプリを公開できる。

 

■node_modulesフォルダ

アプリで利用したいライブラリはnpmを利用してインストールし、

最終的にnode_modulesフォルダに保存される。

 

■srcフォルダ

アプリのソースコード(HTML、CSS、Type Script)が保存されるフォルダ。

 

 

プロジェクトビルド時の処理の流れ

ng serveコマンドでプロジェクトをビルドすると、

処理の流れは以下のようになります。

  1. style.bundle.js、main.bundle.js、scripts.bundle.js、index.htmlをdistフォルダに生成
  2. distフォルダの内容を開発Webサーバへデプロイ
  3. WebブラウザからWebサーバにアクセスしてアプリ起動

絵にすると、


MEMO
■style.bundle.js、main.bundle.js、scripts.bundle.js

プロジェクトのモジュール依存関係をAngular CLIが解決し、

CSS、HTML、Type ScriptをJava Scriptファイルにバンドル(結合)したものです。

 

■index.html

ビルド後のindex.htmlはbundle.jsの読み込みタグが自動追加されています。

 

helloWorldのソースコード確認

まず、helloWorldプロジェクトのsrc、src/appディレクトリを確認します。

 

アプリ起動時の処理は以下のようになります。

 

①index.htmlの読み込み

アプリが起動するとブラウザは最初にindex.htmlを読み込みます。

index.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DisplayListSample</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>
  <!--AppCompornentの出力が挿入される-->
  <app-root></app-root>
</body>
</html>

 

②app.module.tsの呼び出し

app.module.tsにはアプリ全体の設定情報が記述されています。

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//AppComponentクラスを、src/app/app.component.tsからインポート
import { AppComponent } from './app.component';

@NgModule({
  //このアプリで利用するクラス
  declarations: [
    AppComponent
  ],
  //このアプリで利用するモジュール
  imports: [
    BrowserModule
  ],
  //DI元となるクラス
  providers: [],
  //最初に起動するコンポーネント
  bootstrap: [AppComponent]
})
export class AppModule { }

 

③app.component.tsの呼び出し

app.component.tsのようなコンポーネントは画面毎に作成します。

また、コンポーネント毎にHTMLテンプレート、CSSファイルを用意します。

app.component.ts
import { Component } from '@angular/core';

@Component({
  //HTMLの出力先として&lt;app-root&gt;を指定(index.htmlに出力される)
  selector: 'app-root',
  //HTMLテンプレートファイルを指定(src/app/app.component.html)
  templateUrl: './app.component.html',
  //CSSファイルを指定(src/app/app.component.css)
  styleUrls: ['./app.component.css']
})
//コンポーネントクラス
export class AppComponent {
  //変数titleに「app」を代入し、app.component.htmlに表示される
  title = 'app';
}

おわりに

本記事では、以下について確認しました。

  • Angular CLIで作成したプロジェクトのディレクトリ構造
  • Angular CLIでビルド&Webサーバ起動した際の処理の流れ
  • Angular CLIで作成したプロジェクトのソースコード

 

Angular CLIのおかげで我々の開発効率はめちゃめちゃ上がる!!!

ということで、次回以降は開発に集中していろいろ作っていきましょう。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください