Angular で SPAの開発を始めよう

Angular はSPAフレームワークの1つです。よくReact や Vue.js と比較されます。Angular の特徴は、Typescriptで記述できることや、パッケージの導入により開発を進められることです。

Angular での開発の始め方

1. Angular CLI のインストールとひな形ソースの作成


npm i -g @angular/cli

でインストールできます。

そのあと、SPAアプリケーションのひな形を生成します。今回は app1 というアプリケーション名でひな形を作成します。


ng new app1

ルーティングを使用するかどうか聞かれますので、 y または N を入力します。


? Would you like to add Angular routing? (y/N) 

使用するスタイルシートフォーマットを選択します。十字キーの上や下で選択し、エンターキーを押します。


? Which stylesheet format would you like to use? (Use arrow keys)
>  CSS
  SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ]
  Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ]
  Less   [ http://lesscss.org                                                 ]
  Stylus [ http://stylus-lang.com                                             ]

app1 フォルダに移動します。


cd app1

テスト用httpサーバーを起動します。


ng serve

正常に処理が終われば、以下のように表示されます。


** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2019-04-02T03:12:16.952Z
Hash: b3a0c7750e80c3ca761e
Time: 25170ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.76 MB [initial] [rendered]
i 「wdm」: Compiled successfully.

http://localhost:4200/にアクセスします。

このように表示されるはずです。

2. コンポーネントの作成方法

Angular ではコンポーネント単位に開発を行います。コンポーネントは独自のHTMLタグで呼び出しができるようになります。

以下の例では、 component1 というコンポーネントを作成します。


ng generate component component1

以下のように表示されるはずです。


CREATE src/app/component1/component1.component.html (29 bytes)
CREATE src/app/component1/component1.component.spec.ts (656 bytes)
CREATE src/app/component1/component1.component.ts (285 bytes)
CREATE src/app/component1/component1.component.css (0 bytes)
UPDATE src/app/app.module.ts (491 bytes)

src/app/component1/component1.component.ts ファイルには以下のように作成されています。


import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-component1',
  templateUrl: './component1.component.html',
  styleUrls: ['./component1.component.css']
})
export class Component1Component implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

この中の selector がHTMLタグになります。

src/app/app.component.html の末尾に以下を追記します。


<app-component1></app-component1>

component1 works! と表示されていれば、成功です。

以下にチュートリアルがあります。

https://angular.jp/tutorial

Angular Material という、Material UI のAngularコンポーネントが用意されています。

https://material.angular.io/

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です