Angular CLIについて確認する(Angularの開発を始める前に抑えておくべきこと)

Angular CLIが行っている役割について確認します。
本格的にAngularで開発をする前に、なんとなくAngular CLIを利用するのではなく役割や動きを確認しておきましょう。

Angular CLIがHello Worldを行うまでに行うこと

Angular CLIがHello Worldをするまでに果たしてくれていた役割について一つずつ確認していきます。

この記事を読む前に

前回AngularでHello Worldするところまで実施しました。まだ実施していない方は以下参考にしてください。

>>AngularでHello Worldしてみる(for Windows)

>>AngularでHello Worldしてみる(for Mac)

前回、AngularでHelloWorldして動作確認を行いました。これから本格的な開発に入っていくのですが、その前に、、、

HelloWorldした際にAngular CLIは実は、、雛形プロジェクトを生成したり、プログラムをビルドしてくれたり、ローカル環境でサーバを立ち上げてくれたりといろいろやってくれていました。それらについて確認したいと思います。

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

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

Angular CLIで作成したプロジェクトのディレクトリ構造確認

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

MEMO
■distフォルダ

アプリのビルド成果物が保存されるフォルダ。 成果物をWebサーバにアップロードしてアプリを公開できる。  

■node_modulesフォルダ

アプリで利用したいライブラリはnpmを利用してインストールし、 最終的にnode_modulesフォルダに保存される。  

■srcフォルダ

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

Angular CLIでビルド、サーバ起動した際の動き

ng serveコマンドでAngularプロジェクトをビルドしてサーバ起動すると、処理の流れは以下のようになります。

  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の読み込みタグが自動追加されています。

Angular CLIで作成したプロジェクトのソースコード

まず、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のおかげで我々の開発効率はめちゃめちゃ上がる!!!

ということで、次は実際に動くものを作りながらAngularでの開発に集中していろいろ作っていきましょう。

次はAngularでコンポーネント作成をしてみましょう!!Webコンポーネントって何??ってところから解説しています。

>>Angularでコンポーネントを作成する

コメントを残す

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

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