Angularとは？

「Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop. 」とのことです。要するにモダンフロントエンド開発に必要なものをパッケージ化した開発環境ということでしょう。　AngularにするかReactにするかなんて言う議論がありますが、これはまた別途まとめてみたいと思います。

Angular開発に必要なもの

IDE

普段からVisual Studio(VS)を使ています。VSじゃなくてもいいのですが、ここから先はVS使って進めていきます。今回 Visual Studio Professional 2017 Version 15.9.3を使っています。

Node.js

AngularはNode.jsを必要とします、こちらをご参照ください

npm

また、npmという関連パッケージを管理するプログラムが必要となります。npmに関してはこちらをご参照ください。

はじめてみる

細かい説明はあとにして、早速はじめてみます。

VSを立ち上げて「新規プロジェクト」

新しいASP.Net Core アプリケーションを選択して、Angularテンプレートを選択

これで必要なファイルがすべて生成されてました。

生成されたファイル群

下記格納されたファイルやフォルダーの説明です。また後で細かい説明はするので、読み飛ばしてもOKです。

アプリのルートフォルダーはClientAppです。

アプリ本体のコードはsrcの中に格納されています。
- index.html はトップページファイルです
- main.ts はスタートアップファイルとよばれ、名前の通りスタートアップするときに使われます
- appフォルダーの中にはAngularアプリ関連のファイルが格納されいてます。
- app.component.tsはロートのコンポーネントファイルです
- app.module.tsはルートモジュールファイルです

e2eにはテスト関連のファイルが格納されています。
package.jsonにはパッケージ情報が格納されています。

細かい話はあとにして早速実行ボタンを押してみましょう。

実行をクリックして初めてのAngularアプリケーションを実行。

下記のようにサンプルアプリケーションを起動することができました。

次（基本編）

では次はAngularの基本となる部分を説明。　Angularはいくつもの部品で構成されていて、その部品をModule(モジュール)と呼んでいます。また表示するページのUIの部品をComponent(コンポーネント)と呼んでいます。　Angularアプリがたちがる際にはスタート時にMain.tsが読み込まれます、まずはここを見てきましょう。

[Angular] 入門