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