Angularのサイトにある「入門(Getting Started)」は
ブラウザのみでサンプルアプリに手を加えていける(開いてすぐ進められる)ので
どんなものか感覚をつかむのにはちょうど良かった。
■Angular.jp
https://angular.jp/start
ので、ローカルにAngularを導入、VSCodeをインストールし、
入門のサンプルアプリを表示(初期表示)してみる。
Node.jsのインストール
以下サイトから最新版をダウンロード、インストールする。
https://nodejs.org/en/download/
(インストールは任意で・・・今回の場合はデフォルトで行った)
Angular CLIのインストール
Node.js用のコマンドプロンプトが追加されてたのでソレを起動
npmコマンドを使用してCLIをインストール
npm install -g @angular/cli
途中で統計情報の取得を許可するかどうか聞かれるのでお好みのほうを。
※上記で警告「WARN deprecated request@~」とあるのは、2020年2月に非推奨となったらしい・・・
https://www.npmjs.com/package/request
とりあえず今は無視して進める。
バージョン確認
Visual Studio Codeのインストール
以下サイトから最新版をダウンロード、インストールする。
https://code.visualstudio.com//
(こちらもインストールは任意で・・・)
日本語化しておく
view を選択 command palette を選択 configure display language を選択 install additional laugage を選択 左に拡張言語パックが出てくるのでJapanese Language Pack for Visual Studio Codeを探してインストール Visual Studio Code を再起動
他、Angular Essentials等の拡張機能を入れた(割愛)
サンプルアプリをローカル上に展開・表示
上記Angularサイトの「Angular入門: はじめてのアプリ」画面から
サンプルアプリの開発画面を表示する。
左サイド上部のPROJECTにあるダウンロードボタンを押下して
ダウンロード、zipなので解凍しておく。
VSCodeを開いてターミナルを起動する。
(ワークスペースは”C:\workspace_cli”とした。)
ng new コマンドを使用して新しいAngular CLIワークスペースを作成する。
(”angular-example”とした。)
ng new angular-example
デフォルトのまま進める。(”y” , [enter])
作成成功(GitのPathが通ってないけど今は使用しないので気にせず進める)
まずはこのまま動作確認してみる。
cd .\angular-example\ ng serve
ブラウザから確認「http://localhost:4200/」
ダウンロードしたサンプルアプリと入れ替え
→一旦VSCodeを終了させてからsrcフォルダを置き換える。
Before
After
動作確認
cd .\angular-example\ ng serve
ブラウザから確認「http://localhost:4200/」
これでローカル環境で入門編から進められるっと。
おまけ:サーバデプロイ
当サーバにデプロイして表示を確認する。
サブディレクトリ「angular-example」に配備したいので
実行コマンドは「ng build –prod –base-href=/angular-example/」
ビルドされたindex.htmlに「angular-example」へのパスが記されている。
「angular-example」をそのままサーバにUPして確認
(注:今は削除済。)
おまけおわり。