angular 実行環境の導入

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

• angular　チュートリアル環境準備
  • 記事の対象者
    • 環境
    • 主な参考記事
  • そもそも Angular とは
  • 導入
    • 1.VScode を導入
    • 2.はじめに node.js をインストールする
    • 3.typescript のインストール
      • TypeScript って？
      • TypeScript の HelloWorld
    • 4.angular cli のインストール
    • 5.プロジェクト生成
    • 5.1.あっ！エラーだ！
    • 5.2.もう一度実行
    • 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 を作成して以下のようにコードを書く。

qiita

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

で、コンパイルと実行

shell

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

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

shell

HelloWorld! TypeScript!

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

4.angular cli のインストール

shell

npm install -g @angular/cli

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

5.プロジェクト生成

下記実行。

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

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

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

shell

Set-ExecutionPolicy RemoteSigned

5.2.もう一度実行

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

shell

ng new AngularTutorial

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

6.実行確認

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

shell

ng serve --open

ブラウザにて以下の画像ページが出力されるはず。

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

拡張機能

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