Angularでアプリをつくって展開するまでの作業

投稿者: | 2018/10/3 水曜日

Angular6でアプリのスケルトンをつくり、サーバで動かすまでの記録。開発作業は行わない準備とテストの話。Windowsで実験

Angularとは

Angularはウェブアプリのフレームワーク。高速で動くアプリをつくれる。アプリはJavaScriptで動き、基本的にはサーバとは最初しか通信しない。リンクをクリックしてURLが変わってもサーバと通信しないので速い。

Angularは現在の最新バージョンは6だが2までと3からで大きく違う。3からはTypeScriptで記述するようになった。それまでの2までAngularはAngularJSなどという。

AngularではPHPのテンプレートのようにJavaScript内に特殊な書き方で変数を書いて、ビューとロジックを分離できる。この変数のバインディングが読み込み書き込みの双方向などにすることもできる。

Angularはコンポーネントのまとまりで構築される。ビュー上(html上)では1つのカスタムタグで表され。このタグの位置に書く。

Angularはnode.jsを使って管理されるのでクロスプラットフォームで動く。

node.js

開発と準備にはnode.jsを使うのでインストールしておく。インストール時にPATH設定をしないとモジュールのパスとかがユーザディレクトリの中になっていたりして分かりづらい。以下の2つのパスがPATHにセットされている必要がある。インストールした直後はPATHが反映されない可能性があるので注意。

確認

ng

Angularのコマンドラインツールngをインストールする。

-gはグローバルにインストールする。@はスコープを表してangularというグループの下のcliをインストールするという意味。

確認

c:\work\myangproj>ng -v

_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ Γû│ \ | ‘_ \ / _ | | | | |/ _ | ‘__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/

Angular CLI: 6.2.4
Node: 10.11.0
OS: win32 ia32
Angular:

Package Version
——————————————————
@angular-devkit/architect 0.8.4
@angular-devkit/core 0.8.4
@angular-devkit/schematics 0.8.4
@schematics/angular 0.8.4
@schematics/update 0.8.4
rxjs 6.2.2
typescript 2.9.2

これで準備ができた。

スケルトンアプリをつくる

インストールしたngコマンドをつかってスケルトンアプリをつくる。いろいろダウンロードするので結構時間がかかる。

gitがないとか怒られているが特に問題はないはず。

成功するとangappというサブフォルダが作成され、この中にアプリのスケルトンができる。ここから開発が始まるがここではスキップ。Visual Studio Codeをインストールしてあれば、ここからコマンドラインで起動するとパスも通って楽。

Visual Studio Codeにはターミナル機能もあるのでここからコマンド入力することもできる。

開発用サーバで動かしてみる

ngにはサーバ機能があり、これでアプリを動かすことができる。プロジェクトのファイルを変更しても変更も即座にブラウザがリロードされて反映される。

–openをつけるとデフォルトのブラウザが起動してアプリが表示される。

展開

今回は開発はしないので、ここでできたアプリを展開(デプロイ)してサーバにアップロードしてみる。

展開のコマンドはbuild

–base-hrefをつけないと、デフォルトでルート(/)になってしまうのでこうするか、あるいはできたindex.htmlのヘッダからbase hrefを削除する。

これでdistというフォルダができて、その中にアプリがあるのでこれをサーバに置けばいい。basehrefがちゃんとしてればローカルから開いても動く。

できたのがこれ

うまく動かない場合はブラウザの開発コンソールにエラーが出力されるのでそれを確認する。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です