Angularで作るER DIAGRAM TOOL – 第三回 ngx-bootstrap の BsDropdownModule と CollapseModule によるnavbarの実装

(1)bootstrapのテンプレートをもとにnavbarを作成する

■bootstrap – navbar
https://getbootstrap.com/docs/4.0/components/navbar/

上記を参考に、
/src/app/navbar/navbar.component.html を修正
https://github.com/dog-ears/er-diagram-tool/commit/a733232fa89b2e9759f8b47bfb181b90f03fc105#diff-017b6e710461134e5b4c9fd34aeabe7c

メニューは、下記で作成
ER-DIAGRAM-TOOL
– Edit
— Create Model
– Export
— Export JSON
– Setting
— Data Setting

bootstrapのjsを読み込んでいないので、
このままだとドロップダウンが動きません。

なので、ngx-bootstrapを読み込みます。

(2)ngx-bootstrap – Dropdowns の読み込みと適用

■ngx-bootstrap – Dropdowns
https://valor-software.com/ngx-bootstrap/#/dropdowns

モジュールに ngx-bootstrap – Dropdowns を追加する

/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/811ffc799c21a55775d59b626891537ab0358cfb#diff-fc6b22833aeaf77f8440c4970ade705e

・BsDropdownModuleをインポート
・imports に BsDropdownModule.forRoot() を追加

/src/app/navbar/navbar.component.html を修正
https://github.com/dog-ears/er-diagram-tool/commit/811ffc799c21a55775d59b626891537ab0358cfb#diff-017b6e710461134e5b4c9fd34aeabe7c

・不要な属性を削除
・上位liに「dropdown」追加
・ドロップダウンを開くaタグに「dropdownToggle」追加
・ドロップダウンで開く内容のdivタグに「*dropdownMenu」を追加

これでドロップダウンが動くようになりました。

しかし、スマホ用の Collapse がまだ動かないので、
こちらも読み込みます。

(3)ngx-bootstrap – CollapseModule の読み込みと適用

■ngx-bootstrap – Collapse
https://valor-software.com/ngx-bootstrap/#/collapse

モジュールに ngx-bootstrap – CollapseModule を追加する

/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/5d3c8998478751b64ab961db5302bc8aef2ccdb3#diff-fc6b22833aeaf77f8440c4970ade705e

・CollapseModuleをインポート
・imports に CollapseModule.forRoot() を追加

/src/app/navbar/navbar.component.ts を修正
https://github.com/dog-ears/er-diagram-tool/commit/5d3c8998478751b64ab961db5302bc8aef2ccdb3#diff-12468dba4acc93d6788c4f72b2b89a70

・メンバ変数 isCollapsed を追加

/src/app/navbar/navbar.component.html を修正
https://github.com/dog-ears/er-diagram-tool/commit/5d3c8998478751b64ab961db5302bc8aef2ccdb3#diff-017b6e710461134e5b4c9fd34aeabe7c

・メニュを開閉するボタンに (click)=”isCollapsed = !isCollapsed” を追加。
これにより、クリックで isCollapsed が切り替わります。

・開くメニュー側に [collapse]=”isCollapsed” を追加

これで、スマホ用のメニューが開くようになりました。
次回は、いったんnavbarの作成から離れて、
データサービスの作成を進めていきます。

Angularで作るER DIAGRAM TOOL – 第二回 ngx-bootstrapのインストール、google material iconの追加と、navbarコンポーネントの準備

(1)ngx-bootstrapのインストール

■ngx-bootstrap
https://valor-software.com/ngx-bootstrap/#/

npm install ngx-bootstrap bootstrap --save

/.angular-cli.json を修正
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-c78e1fddb79799856010780b5453a800

スタイルに、bootstrapのcssを追加

(2)google material icon を追加&モデルの追加

index.html を修正
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-e249faefed5757034596c5096d33dab6

(3)ナビバーの導入

Angularのデフォルトページを削除しつつ、
navbarをコンポーネントとして実装します。

/src/app/navbarフォルダを作成
以下、3ファイルを配置

/src/app/navbar/navbar.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-12468dba4acc93d6788c4f72b2b89a70

/src/app/navbar/navbar.component.html
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-017b6e710461134e5b4c9fd34aeabe7c

/src/app/navbar/navbar.component.css

コンポーネントをモジュールに追加して、表示できるようにする

/src/app/app.module.ts
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-fc6b22833aeaf77f8440c4970ade705e

NavbarComponentのimport、およびDeclarationsの追加

/src/app/app.component.ts
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-5c26d2c8f8838f32ace87fdecd6344ea

/src/app/app.component.html
https://github.com/dog-ears/er-diagram-tool/commit/a797be9f3d40153e2f529ab4fc6a042c1c914239#diff-465e9f13ce23ec4a1e366935273fdbb6

これで、画面には[navbar component]と表示されるようになりました。
次回は、ngx-bootstrapでnavbarを実装していきます。

Angularで作るER DIAGRAM TOOL – 第一回 Cloud9へAngularをインストールする

自前で開発しているLaravel用Scaffoldパッケージが、
複雑化するとともに、JSONデータを書くのが煩雑になってきたため、
Angularの勉強もかねて、ER図作成ツールを作ることにしました。

■開発環境
IDE:Cloud9
開発言語:Typescript
フレームワーク:Angular v5.2.3
CSSフレームワーク:bootstrap、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をインストールしましょう。

“Angularで作るER DIAGRAM TOOL – 第一回 Cloud9へAngularをインストールする”の続きを読む

【更新履歴】 crud-d-scaffold v2.6.0 – バリデーションと、Inputデータの保持の実装(2017.12.05)

ども、dog-earsです。

crud-d-scaffoldにバリデーション機能を実装し、
さらにInputデータを保持するように修正しました。

■github – dog-ears/crud-d-scaffold
https://github.com/dog-ears/crud-d-scaffold

カラムスキーマに’validation’を追加するだけで設定されます。

“【更新履歴】 crud-d-scaffold v2.6.0 – バリデーションと、Inputデータの保持の実装(2017.12.05)”の続きを読む

【更新履歴】 crud-d-scaffold v2.5.1 – many to many リレーションシップの追加(2017.11.02)

ども、dog-earsです。

crud-d-scaffoldにmany to many リレーションシップを追加したので、
ご紹介します。

■github – dog-ears/crud-d-scaffold
https://github.com/dog-ears/crud-d-scaffold

many to many リレーションシップは、crud-d-scaffold.jsonに、
ピボットテーブルの情報を追加するだけで、簡単に作れます。

“【更新履歴】 crud-d-scaffold v2.5.1 – many to many リレーションシップの追加(2017.11.02)”の続きを読む