angular 実行環境の導入

# angular　チュートリアル環境準備

- [angular　チュートリアル環境準備](#angularチュートリアル環境準備)
  - [記事の対象者](#記事の対象者)
    - [環境](#環境)
    - [主な参考記事](#主な参考記事)
  - [そもそも Angular とは](#そもそも-angular-とは)
  - [導入](#導入)
    - [1.VScode を導入](#1vscode-を導入)
    - [2.はじめに node.js をインストールする](#2はじめに-nodejs-をインストールする)
    - [3.typescript のインストール](#3typescript-のインストール)
      - [TypeScript って？](#typescript-って)
      - [TypeScript の HelloWorld](#typescript-の-helloworld)
    - [4.angular cli のインストール](#4angular-cli-のインストール)
    - [5.プロジェクト生成](#5プロジェクト生成)
    - [5.1.あっ！エラーだ！](#51あっエラーだ)
    - [5.2.もう一度実行](#52もう一度実行)
    - [6.実行確認](#6実行確認)
  - [拡張機能](#拡張機能)

## 記事の対象者

プログラミングの基礎知識はあるけどWeb 開発とか初めてでよくわかんない…/Angular ってのがいいの？なんだこれ？って人向け。
環境導入について書いてます。
かなりざっくりとした記事。

### 環境

vscode:1.45.1
Windows10 home 64bit

以下、ng version コマンドにて確認
@angular-devkit/architect 0.1001.1
@angular-devkit/core 10.1.1
@angular-devkit/schematics 10.1.1
@schematics/angular 10.1.1
@schematics/update 0.1001.1
rxjs 6.6.2

### 主な参考記事

https://angular.jp/guide/setup-local
https://qiita.com/yk0807/items/b2e2332979dfb35ad816
https://qiita.com/Targityen/items/3d2e0b5b0b7b04963750

## そもそも Angular とは

SPA(Single Page Application)を実現する JavaScript のフレームワーク
JavaScript を拡張した TypeScript を使っている。
MVC モデルを実現
また、MEAN と呼ばれるソフトウェアハンドルの構成要素の一つ
・MongoDB
・Express
・Angular
・Node.js
それぞれデータベース、バックエンド、フロントエンド、サーバーを担当している。
今の自分の認識では、Web ページの構成要素の一つ。これの他にも Express とか DB 学べばサーバー側もできるよ！って感じ。

## 導入

### 1.VScode を導入

略。vscode導入に関しては他の方がきっといいものを書いてくれてるはずなので…

### 2.はじめに node.js をインストールする

<https://nodejs.org/en/>
とりあえず LTS 版である 12.18.3 を選択した。
起動後、chocolatey のインストールを選択するチェックボックスにもチェックを入れ続行。
chocolatey は linux で使われている apt-get コマンドの Win 版のようなものっぽい。

### 3.typescript のインストール

下記コマンドを実行

'''shell:shell
npm install -g typescript
'''

#### TypeScript って？

TypeScript ってなんだよ。
→MicroSoft が開発した、型定義などの機能をつけた JavaScript

#### TypeScript の HelloWorld

tstest.ts を作成して以下のようにコードを書く。

```typescript:qiita
function helloWorld(name:string):void{
console.log("HelloWorld! "+name+"!");
}
let langName = "TypeScript";
helloWorld(langName)
```

で、コンパイルと実行

```shell:shell
tsc .\tstest.ts  # コンパイル用コマンド
node .\tstest.js # 実行用コマンド
```

以下が出力されていれば OK

```shell:shell
HelloWorld! TypeScript!
```

コンパイルに関しては gulp というものを使えば効率化可能？

### 4.angular cli のインストール

```shell:shell
npm install -g @angular/cli
```

Angular アプリのプロジェクト生成や実行が行えるコマンドラインツール。
今後、ng コマンドが出てきたら angular cli を使ってると思ってOK

### 5.プロジェクト生成

下記実行。

```shell:shell
ng new AngularTutorial
```

### 5.1.あっ！エラーだ！

ng : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Users\XXXX\AppData\Roaming\npm\ng.ps1 を読み込むことができません。詳細については、「about_Execution_Policies」(http
s://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
発生場所 行:1 文字:1

```shell:shell
- ng new AngularTutorial
- ~~
  - CategoryInfo : セキュリティ エラー: (: ) []、PSSecurityException
  - FullyQualifiedErrorId : UnauthorizedAccess
```

どうやら PowerShell の ExecutionPolicy に引っかかってしまったらしい。
ひとまず管理者権限で恒久的な設定を変更することにした。
PowerShell を開いて下記コマンド実行。

```shell:shell
Set-ExecutionPolicy RemoteSigned
```

### 5.2.もう一度実行

設定を変更したので再度実行。
チュートリアルを実行するつもりなのでいい感じな名前にしてプロジェクト生成。

```shell:shell
ng new AngularTutorial
```

CSS について聞かれたけどデフォのままエンター押下。

### 6.実行確認

AngularTutorial へと移動して
以下コマンド実行。

```shell:shell
ng serve --open
```

ブラウザにて以下の画像ページが出力されるはず。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/728667/98d36c1f-b72b-3176-951d-158f4400e8e0.png)

ちなみに--open はブラウザから自動的に
<http://localhost:4200/>
を開くためのオプション。

## 拡張機能

ひとまずエディタの補完とかほしいので拡張機能導入。
私はこれ使ってます。
Angular 10 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout