Madogiwa Blog

主に技術系の学習メモに使っていきます。

JavaScript:Anglar勉強整理メモ - サンプルアプリの実行と概要について -

最近、Angularの勉強を下記本で勉強しているので、頭の整理がてらメモを投稿してみる。

Angularアプリケーションプログラミング

Angularアプリケーションプログラミング

今回は、Angularの基本についてです。


Angularの基本

Angular利用するための準備

サンプルプログラムのクローン

rem サンプルプログラムのクローン
$ git clone https://github.com/angular/quickstart

Angularアプリの基本構造

# Quickstartプロジェクトのフォルダ構成
# ★:最低限必要なファイル
quickstart
├src・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・アプリ本体を格納するフォルダ
│├index.html・・・・・・・・・・・・・・・・・・・・・・トップページ★
│├main.ts・・・・・・・・・・・・・・・・・・・・・・・・・スタートアップファイル★
│├style.css・・・・・・・・・・・・・・・・・・・・・・・標準のスタイルシート
│├system.config.js・・・・・・・・・・・・・・・・System.jsの設定ファイル★
│├tsconfig.js・・・・・・・・・・・・・・・・・・・・・TypeScriptコンパイラの設定情報
│└app・・・・・・・・・・・・・・・・・・・・・・・・・・・・・Angularアプリ関連のコード一式
│  ├app.cmnponent.ts・・・・・・・・・・・・・・ルートコンポーネント★
│  ├app.component.spec.ts・・・・・・・・・コンポーネントのテストスクリプト
│  └app.module.ts・・・・・・・・・・・・・・・・・ルートモジュール★
├e2e・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・E2Eテスト関連のスクリプト
│├app.e2e.spec.ts・・・・・・・・・・・・・・・・・E2Eテストスクリプト
│└ts.config.json・・・・・・・・・・・・・・・・・・TypeScriptコンパイラの設定情報
├karma.conf.js・・・・・・・・・・・・・・・・・・・・・karma設定ファイル
├package.json・・・・・・・・・・・・・・・・・・・・・・パッケージ情報ファイル
├protractor.config.js・・・・・・・・・・・・・・Protractor設定ファイル
└tslint.json・・・・・・・・・・・・・・・・・・・・・・・tslint設定情報

Angularアプリの実行

rem ライブラリのインストール
$ npm install
rem サーバーを起動
$ npm start

実行画面
f:id:madogiwa0124:20171016001213p:plain

Angularの基本構文の確認

モジュール

モジュールとは?:ソースコードの集合体

種類 概要
ルートモジュール アプリ起動時に実行されるモジュール
サブモジュール アプリの特定機能単位に実行されるモジュール
Anglerモジュール Angularがフレームワークとして提供するモジュール

ルートモジュールapp.module.tsを例に概要を説明

// Angularモジュールのインポート
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// アプリを構成するコンポーネントのインポート
import { AppComponent }  from './app.component';

/* モジュール構成の定義
   この定義によりAngular上でモジュールとして扱えるようになる。
   ・imports:現在のモジュールで使用する他のモジュール
   ・declarations:現在のモジュールに属するコンポーネントなど
   ・bootstrap:アプリで最初に起動すべきルートコンポーネント
*/
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

// モジュールクラスの定義
// export:他モジュールから参照可能
export class AppModule { }

コンポーネント

コンポーネント:UI部品
ルートコンポーネント:最初に呼ばれるコンポーネント

ルートコンポーネントapp.component.tsを例に説明

// コンポーネントを定義するために必要なオブジェクトのインポート
import { Component } from '@angular/core';

/* コンポーネントの構成情報を定義
   この定義によりAngular上コンポーネントとして扱えるようになる。
   ・selector:コンポーネントを適用すべき要素
   ・template:コンポーネントに適用するView
   例)<my-app></my-app>に<h1>Hello Angular</h1>を反映する
*/
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})

// コンポーネントクラスの定義
// プロパティとしてnameを宣言し'Angular'を代入
export class AppComponent  { name = 'Angular'; }

テンプレートへ変数を埋め込む Interpolation(補完)

Interpolation(補完)構文{{...}}を用いることで、コンポーネントクラスのプロパティをテンプレートに代入することが可能。


メインページ

アプリが動作するメインページindex.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 必要なモジュールのインポート -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    
    <!-- システム情報設定をインポート -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>

  </head>

  <body>
    <!-- ルートコンポーネントの表示領域 -->
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

以上