AngularJSの基礎的な使い方についてまとめました。
【環境構築】Angularのインストール
① Node.jsをインストールします。
– | Node.jsのインストール方法はこちら |
---|---|
※ | ■Node.jsのインストール方法 |
② Angular CLI をインストールします。
$ npm install -g @angular/cli
③ アプリケーションを新規作成します。
※アプリの雛形が作成されます。
$ ng new [アプリ名]
例)sampleという名前でアプリを作成するときは「ng new sample」
④ 作成したアプリのルートディレクトリに移動します。
$ cd [アプリ名]
⑤ アプリの「ビルド」「起動」をします。
起動したアプリケーションがブラウザに表示されます。
$ ng serve --open
– | 詳細記事 |
---|---|
※ | ■【AngularJS】インストール・環境構築(Windows編) |
【準備】モジュール、ルートコンポーネント、スタートアップ、メインページ
モジュール
モジュールは、アプリを構成するコンポーネント(オブジェクト)を束ねる仕組みで、アプリを作るのに必要なモジュールをインポートします。
また、アプリを起動するときに呼び出されるモジュールを「ルートモジュール」といいます。
ルートモジュールは、「src/app/app.module.ts」で次のようにデフォルト設定されています。
■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] }) // ルートモジュール(モジュールクラス)の準備 // 他のモジュールから呼び出す際に、AppModuleを利用 export class AppModule { }
デフォルトだと、BrowserModuleを参照し、ルートコンポーネントとしてAppComponentを含むAppModuleモジュールを定義しています。
ルートコンポーネント
ルートコンポーネントとは、アプリで最初に呼び出されるコンポーネントです。
次のようにmy-app要素に対して、「<h1>エクスカリバー</h1>」というテンプレートを適用するAppComponentコンポーネントを定義してみます。
■src/app/app.component.ts
import { Component } from '@angular/core'; // コンポーネントの構成情報を定義するデコレータ @Component({ // コンポーネントの適用先を表すセレクター式 selector: 'app-root', // コンポーネントに適用するスタイルシート styleUrls: ['./app.component.css'], // コンポーネントに適用するテンプレート template: '<h1>エクスカリバー</h1>' // 追加 }) export class AppComponent { title = 'sample'; }
スタートアップコード
設定したコンポーネントを起動するスタートアップコードを作成します。
■src/app/main.ts
// 起動に必要なモジュールのインポート import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; // ブラウザーでアプリを起動するための標準モジュール import { AppModule } from './app.module'; // ルートモジュール // モジュールの起動 const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule); // ルートモジュールを起動
メインページ
アプリを動作するためのメインページは次のHTMLファイルで定義されています。
■src/index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Sample</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>
【動作確認】アプリのビルド・起動
① アプリの「ビルド」「起動」をします。
$ ng serve --open
② 「エクスカリバー」と書かれたページが表示されます。
– | 詳細ページ |
---|---|
※ | ■【AngularJS】コンポーネント・モジュールとは |
【テンプレート】外部ファイル化
@ComponentデコレーターのtemplateUrlパラメーターで、テンプレートを外部ファイル化できます。
■src/app/app.component.ts
import { Component } from '@angular/core'; // コンポーネントの構成情報を定義するデコレータ @Component({ // コンポーネントの適用先を表すセレクター式 selector: 'app-root', // コンポーネントに適用するスタイルシート styleUrls: ['./app.component.css'], // コンポーネントに適用するテンプレート(外部ファイルから読み込み) templateUrl: './app.component.html', // アプリケーションルートからの相対パスで指定 }) export class AppComponent { title = 'sample'; contents = 'エクスカリバー'; }
■app/app.component.html
<h1>{{title}}</h1> <h2>{{contents}}</h2>
データバインド({{…}})でコンポーネントの値をHTMLビューに反映しています。
– | 詳細ページ |
---|---|
1 | ■【AngularJS】templateUrlでテンプレートの外部ファイル化 |
2 | ■【AngularJS】データバインド({{…}})でコンポーネントの値をHTMLビューに反映 |
【パイプ】データ変換など
angularパイプを使うことで、簡単にデータ変換などができます。
例えば、次のようにjsonパイプを使えば、JavaScriptのオブジェクトをJSON形式に変換できます。
オブジェクト→JSON
■app/app.component.ts
import { Component } from '@angular/core'; // コンポーネントの構成情報を定義するデコレータ @Component({ // コンポーネントの適用先を表すセレクター式 selector: 'app-root', // コンポーネントに適用するスタイルシート styleUrls: ['./app.component.css'], // コンポーネントに適用するテンプレート(外部ファイルから読み込み) templateUrl: './app.component.html', }) export class AppComponent { // オブジェクトを作成 sarvant: any = { name: 'アルトリア', class: 'savar', status: [14560, 15439], }; }
■app/app.component.html
<pre>{{ sarvant | json }}</pre>
– | angularパイプの使い方まとめ |
---|---|
1 | 【AngularJS】便利なパイプの使い方まとめ |
【*ngFor属性】配列の要素を順に取り出し
*ngFor属性を使うと、配列の要素を順に取り出すことができます。
書式
<element *ngFor="let item of list"> contents </element>
パラメータ | 概要 |
---|---|
element | 要素 |
item | 仮変数 |
list | 配列 |
contents | 繰り返し出力するコンテンツ |
配列listの先頭から順に要素を取り出されます。
そして、最後の要素を取り出すと、処理を終了します。<
■app/app.component.ts
import { Component } from '@angular/core'; // コンポーネントの構成情報を定義するデコレータ @Component({ // コンポーネントの適用先を表すセレクター式 selector: 'app-root', // コンポーネントに適用するスタイルシート styleUrls: ['./app.component.css'], // コンポーネントに適用するテンプレート(外部ファイルから読み込み) templateUrl: './app.component.html', }) export class AppComponent { sites = [ { url: 'https://algorithm.joho.info', title:'アルゴリズム雑記', depre: '「アルゴリズム雑記」です。', }, { url: 'https://www.google.co.jp', title:'Google検索', depre: '「Google検索」です。', } ]; }
■app/app.component.html
<table> <tr> <th>サイト</th><th>概要</th> </tr> <tr *ngFor="let site of sites"> <td><a href="{{site.url}}">{{site.title}}</a></td> <td>{{site.depre}}</td> </tr> </table>
■実行結果
補足
「index as i」を付加することで、連番を追加することもできます。
■app/app.component.html
<table> <tr> <th>サイト</th><th>概要</th> </tr> <tr *ngFor="let site of sites; index as i"> <td>{{i + 1}}</td> <td><a href="{{site.url}}">{{site.title}}</a></td> <td>{{site.depre}}</td> </tr> </table>
– | 詳細記事 |
---|---|
1 | ■【AngularJS】*ngFor属性で配列の要素を順に取り出し |
2 | ■【Angular】二次元配列に要素を追加して表に出力 |
【関数】定義
■app/app.component.ts
import { Component } from '@angular/core'; // 関数(引数xの型:number、戻り値の型:string) function myFunc(x: number): string { x = x * 1000; return x.toLocaleString() + '点'; } // コンポーネントの構成情報を定義するデコレータ @Component({ // コンポーネントの適用先を表すセレクター式 selector: 'app-root', // コンポーネントに適用するスタイルシート styleUrls: ['./app.component.css'], // コンポーネントに適用するテンプレート(外部ファイルから読み込み) templateUrl: './app.component.html', }) export class AppComponent { x = myFunc(2); };
■app/app.component.html
{{x}}
– | 詳細記事 |
---|---|
1 | ■【TypeScript】関数の定義(引数・戻り値あり) |
– | 参考文献・関連記事 |
---|---|
参考 | ■【AngularJS入門】基礎とサンプル集 |
関連 | ■【Ionic入門】Android・iPhoneアプリ開発編 |
コメント