【AngularJS入門】基礎的な使い方まとめ

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アプリ開発編
Javascript
スポンサーリンク

コメント