Angularの開発をするために雛形を作る

AngularJSからAngularへの移行する為に基礎を学びます。まずは開発環境を構築するためにに雛形ファイルを作成します。

※ここではangular6.xを使っています。

angular cliを使っての雛形を作成

雛形作成にはangular cliを利用します。

//Angular CLIをインストール
npm install -g @angular/cli

//プロジェクトを作成
ng new MyApp

//プロジェクトに移動
cd MyApp

//サーバーを起動
ng server

こんな感じの画面が表示されます。

ファイル構成

作成したプロジェクトの構成は以下です。

.
├── README.md
├── angular.json
├── e2e
│   ├── protractor.conf.js
│   ├── src
│   └── tsconfig.e2e.json
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── app・・・・・・・・・・・・・・・・・・・アプリの中身
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts　・・・・・テスト用
│   │   ├── app.component.ts　・・・・・・・・ルートコンポーネント
│   │   └── app.module.ts　・・・・・・・・・・ルートモジュール(コンポーネント・サービスの入れ物)
│   ├── assets
│   ├── browserslist
│   ├── environments
│   ├── favicon.ico
│   ├── index.html　　・・・・・・・・・・・・・トップページ
│   ├── karma.conf.js
│   ├── main.ts 　・・・・・・・・・・・・・・・アプリを起動する為のスタートアップファイル
│   ├── polyfills.ts
│   ├── styles.css　・・・・・・・・・・・・・・標準のスタイルシート
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── tslint.json
├── tsconfig.json　・・・・・・・・・・・・・・TypeScriptのコンパイラーの設定情報
└── tslint.json

ルートモジュールについて(src/app/app.module.ts)

アプリ起動時に呼び出されるモジュールです。

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

import { AppComponent } from './app.component';

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

①利用するモジュールをインポート

アプリ全体で利用する共有モジュールを読み込みます。

BrowserModuleはアプリをブラウザ上で動かすためのモジュール。 NgModuleはディレクティブ、パイプ、サービスなどを定義する為のモジュール。 AppComponentはアプリのコンポーネント。ここをメインで触っていく。

※モジュール名に@angular/がついているものはAngularが提供するモジュールです。

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

import { AppComponent } from './app.component';

②モジュールの構成を宣言

NgModuleを利用して、モジュールの情報を定義します。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

NgModuleのパラメータ

パラメータ名	概要
imports	現在のモジュールで利用する、他のモジュール
export	外部に公開するコンポーネント
declarations	現在のモジュールに属するコンポーネントとディレクティブ
bootstrap	最初に起動する最上位のコンポーネント

AppComponentについて(src/app/app.component.ts)

NgModuleのbootstrapで定義している、AppComponentはアプリが起動時に最初に読み込まれるコンポーネントです。 ルートコンポーネントと呼ばれる場合もあります。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'MyApp';
}

①必要なモジュールを読み込む

コンポーネントを定義するために必要なモジュールを読み込みます。

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

②コンポーネントとして定義する

コンポーネントとして定義する為には、@Componentデコレータを利用する必要があります。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [hogeService]
})

@Componentのよく使うパラメーターは以下になります。

パラメータ名	概要
selector	コンポーネントを適用する為のセレクタ名
templateUrl	コンポーネントが表示するhtmlファイルのパス
template	コンポーネントが表示するhtml
styleUrls	コンポーネントに設定するcssファイルのパス
styles	コンポーネントに設定するcss
providers	DIしたいクラス

その他はもたくさんあります。公式のドキュメントを参照。

③コンポーネントの本体クラスを定義

コンポーネントの本体を定義します。他からimportできるようにexprort設定しておきます。

export class AppComponent {
}

④コンポーネントになにか表示してみる

AppComponentを以下の設定にしてみます。

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

@Component({
  selector: 'app-root',
  template: '<h1>{{title}}</h1>'
})
export class AppComponent {
  title = 'MyApp';
}

以下のように表示されます。

main.tsについて(src/main.ts)

ルートモジュールと、ルートコンポーネントを起動するためのコードです。

必要なモジュールを読み込んで、platformBrowserDynamic().bootstrapModule(ルートモジュール)を実行します。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

index.htmlについて

ルートのhtmlファイルです。 bodyないにルートコンポーネントの<app-root></app-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>
</body>
</html>

その他のスクリプトのインポートなどはwebpackがやってくれてるのだと思いますが、webpackの設定ファイルが見当たりませんでした。。。

webpackをカスタマイズ

webpackの設定がどうなっているか見たかったので、ng ejectを実行してみます。すると以下のエラーが発生しました。利用している、angular cliが6.2.1だった為動かないようです。

The 'eject' command has been temporarily disabled, as it is not yet compatible with the new
angular.json format. The new configuration format provides further flexibility to modify the
configuration of your workspace without ejecting. Ejection will be re-enabled in a future
release of the CLI.

If you need to eject today, use CLI 1.7 to eject your project.

angular cliの6系でwebpackをカスタマイズする場合は以下のような方法があるみたいです。

Angular CLI 1.x ng eject VS Angular CLI 6 builders

npm install --save @angular-builders/custom-webpack @angular-devkit/build-angular

angular.jsonを編集

"architect": {
   ...
  "build": {
      "builder": "@angular-builders/custom-webpack:browser"
      "options": {
            "customWebpackConfig": {
               "path": "./extra-webpack.config.js"
            }  
            ...
      }
  ...
}

extra-webpack.config.jsを作成して処理を追加。ただ、この方法だと隠蔽されているwebpackは表示されませんでした。。。

まとめ

agnular cliを利用すると雛形ファイルが簡単に作成できます。とても便利です！

また、まだBeta版のようですがGUIから雛形を作れるangular consoleなるものができたようです。 Angular Console

のぐそんブログ

暗いおじさんがシコシコ書くブログです。