自前で開発しているLaravel用Scaffoldパッケージが、
複雑化するとともに、JSONデータを書くのが煩雑になってきたため、
Angularの勉強もかねて、ER図作成ツールを作ることにしました。
■開発環境
IDE：Cloud9
開発言語：Typescript
フレームワーク：Angular v5.2.3
CSSフレームワーク：ngx-bootstrap
JSライブラリ：jsplumb Community Edition
■機能要件
・Model(Table)の作成・修正・削除
・Schema(Column)の作成・修正・削除・並び替え
・Relationship(one-to-many or many-to-many)の作成・削除
※one-to-manyの削除は、targetのSchemaを削除で実装
※many-to-manyの削除は、pivot modelの削除で実装
・JSONのエクスポート
■gitリポジトリ（随時更新）
https://github.com/dog-ears/er-diagram-tool
自分が、Angular初心者なので、
初心者にもわかりやすい解説をしようと思ってます。
では、まずCloud9へAngularをインストールしましょう。
（１）Cloud9
■cloud9
https://c9.io/
アカウントを作る、またはGithubのアカウントでログイン。
Create new workspaceする。
・templateはblankを選択
・READMEは削除
（２）nodeとnpmのアップデート
もともとのバージョン（2018/2/6現在）
node v6.11.2
npm 3.10.10
■nodeJS 公式
https://nodejs.org/
Recommended Version は 8.9.4なので、
それをインストールする。
//node アップデート
nvm install v8.9.4
nvm alias default v8.9.4
node v8.9.4に
npm 5.6.0になりました。
（３）Angularのインストール
公式に従って、AngularCLIを使用。
// Angularのインストール
npm install -g @angular/cli
// プロジェクトの作成
ng new er-diagram
ルート直下にer-diagramフォルダができるが、不要なので、階層を変更します。
shopt -s dotglob
mv er-diagram/* ./
rm -rf er-diagram
// ドキュメントルートを変更
sudo vi /etc/apache2/sites-available/001-cloud9.conf
・iで編集モードに移行。
・終了するときは、escキーを押して、:wq!で保存終了できます。
[変更]
DocumentRoot /home/ubuntu/workspace
↓
DocumentRoot /home/ubuntu/workspace/dist
これで、
ng build
を実行すると、distフォルダが生成されます。
distフォルダ内のindex.htmlを開いて、「Run」でプレビューしましょう。
※表示されるurlは、https://.c9users.io/dist/index.htmlで、notFoundになるため、
https://.c9users.io/を開きましょう。
なお、作業中は、
ng build -w
を実行すれば、ファイル状況を監視するようになり、
保存するたびに自動で更新されます。
（４）githubの設定
Angular CLIでインストールした時点で、git init されてます。
なので、リモート設定して、pushします。
git remote add origin git@github.com:dog-ears/er-diagram-tool.git
git push -u origin master
git tag 0.1.0
git push origin 0.1.0
■github
https://github.com/dog-ears/er-diagram-tool/tree/0.1.0
今回はここまで。
次回は、ngx-bootstrapのインストール、google material iconの追加、ナビバーの作成を行います。