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! と表示されていれば、成功です。
以下にチュートリアルがあります。
Angular Material という、Material UI のAngularコンポーネントが用意されています。
コメント