Angular6でアプリのスケルトンをつくり、サーバで動かすまでの記録。開発作業は行わない準備とテストの話。Windowsで実験
Angularとは
Angularはウェブアプリのフレームワーク。高速で動くアプリをつくれる。アプリはJavaScriptで動き、基本的にはサーバとは最初しか通信しない。リンクをクリックしてURLが変わってもサーバと通信しないので速い。
Angularは現在の最新バージョンは６だが２までと３からで大きく違う。３からはTypeScriptで記述するようになった。それまでの２までAngularはAngularJSなどという。
AngularではPHPのテンプレートのようにJavaScript内に特殊な書き方で変数を書いて、ビューとロジックを分離できる。この変数のバインディングが読み込み書き込みの双方向などにすることもできる。
Angularはコンポーネントのまとまりで構築される。ビュー上（html上）では１つのカスタムタグで表され。このタグの位置に書く。
Angularはnode.jsを使って管理されるのでクロスプラットフォームで動く。
node.js
開発と準備にはnode.jsを使うのでインストールしておく。インストール時にPATH設定をしないとモジュールのパスとかがユーザディレクトリの中になっていたりして分かりづらい。以下の２つのパスがPATHにセットされている必要がある。インストールした直後はPATHが反映されない可能性があるので注意。
|
1 2 |
C:\Program Files\nodejs\ C:\Users\<<<ユーザ名>>>\AppData\Roaming\npm |
確認
|
1 2 3 |
> node -v v10.11.0 > |
ng
Angularのコマンドラインツールngをインストールする。
|
1 2 3 4 5 |
c:\work\myangproj>npm install -g @angular/cli ... + @angular/cli@6.2.4 added 242 packages from 191 contributors in 91.124s c:\work\myangproj> |
-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コマンドをつかってスケルトンアプリをつくる。いろいろダウンロードするので結構時間がかかる。
|
1 2 3 4 5 6 7 |
C:\work\myangproj>ng new angapp added 1081 packages from 1326 contributors and audited 39006 packages in 464.533 s found 0 vulnerabilities 'git' is not recognized as an internal or external command, operable program or batch file. |
gitがないとか怒られているが特に問題はないはず。
成功するとangappというサブフォルダが作成され、この中にアプリのスケルトンができる。ここから開発が始まるがここではスキップ。Visual Studio Codeをインストールしてあれば、ここからコマンドラインで起動するとパスも通って楽。
|
1 2 |
C:\work\myangproj>cd angapp C:\work\myangproj\angapp>start "" "<<<パス>>>\Code.exe" . |
Visual Studio Codeにはターミナル機能もあるのでここからコマンド入力することもできる。
開発用サーバで動かしてみる
ngにはサーバ機能があり、これでアプリを動かすことができる。プロジェクトのファイルを変更しても変更も即座にブラウザがリロードされて反映される。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
C:\work\myangproj\angapp>ng serve --open ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** Date: 2018-10-03T06:05:06.497Z Hash: 042a902369917998eab6 Time: 33439ms chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered] chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered] chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered] chunk {vendor} vendor.js, vendor.js.map (vendor) 3.28 MB [initial] [rendered] i ｢wdm｣: Compiled successfully. ... |
–openをつけるとデフォルトのブラウザが起動してアプリが表示される。
展開
今回は開発はしないので、ここでできたアプリを展開（デプロイ）してサーバにアップロードしてみる。
展開のコマンドはbuild。
|
1 |
C:\work\myangproj\angapp>ng build --base-href="./" |
–base-hrefをつけないと、デフォルトでルート(/)になってしまうのでこうするか、あるいはできたindex.htmlのヘッダからbase hrefを削除する。
これでdistというフォルダができて、その中にアプリがあるのでこれをサーバに置けばいい。basehrefがちゃんとしてればローカルから開いても動く。
できたのがこれ。
うまく動かない場合はブラウザの開発コンソールにエラーが出力されるのでそれを確認する。