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

Angular での開発の始め方

1. Angular CLI のインストールとひな形ソースの作成
2. コンポーネントの作成方法
1. 関連

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 の末尾に以下を追記します。