最近、Angularの勉強を下記本で勉強しているので、頭の整理がてらメモを投稿してみる。
- 作者: 山田祥寛
- 出版社/メーカー: 技術評論社
- 発売日: 2017/08/04
- メディア: 大型本
- この商品を含むブログを見る
今回は、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
実行画面
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>
以上