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/

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱