Angularベースの汎用WEBアプリサンプル


はじめに
---
AngularでWEBアプリを作るとき、ベースとなるような汎用的なサンプルがあると便利なので、作成。
上部にトップメニュー、左にサイドメニューがあって・・・というよくあるサイトです。
サイドメニューから自由にページを追加、削除したりする機能もあります。

[web-page-manager-limited](https://github.com/kyv28v/web-page-manager-limited)

開発環境は、いわゆるMEANスタック（MongoDB、Express、Angular、Node.js）をベースにしています。
（DBは、MongoDB以外にPostgreSQLも対応しています。）

サイドメニューのUIは、angular-tree-componentを使用しています。
ここから自由にページを追加、削除できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/57a422bd-1781-2b38-f448-1bd0e0b5c0f8.png)

開発環境
---
・node.js 10.24.0
・npm 7.6.3
・Angular 11.1.0
・MongoDB 4.4.4
・PostgreSql 12.6

実行方法
---
[web-page-manager-limited](https://github.com/kyv28v/web-page-manager-limited)

のREADMEの記述に従ってnpm installなどを行ってください。
DB は MongoDB と PostgreSQL に対応していますので、どちらかを選んで構成してください。

機能
---
### ユーザ作成
初回は自動的に管理ユーザでログインされますので、右上のメニューのユーザ管理よりユーザを作成してください。
（管理ユーザのままでの使用も可能ですが。）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/0b31edd0-cb64-05ba-f1f0-fc286c500916.png)

※ READMEの通りにDB構築すると、デフォルトで「admin」と「guest」の2ユーザができます。
　　パスワードはどちらも「123456」です。

### メニュー作成
ユーザを作ったら、一度ログアウトして入り直します。
最初は「メニュー」がありませんので、まずは新規に「メニュー」を作成します。
ユーザ名の右側からコンテキストメニューを開けますので、そこから選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/7c39cdad-8c7a-1bb3-baa6-fe5642a9ddbe.png)

### ページ作成
メニューを作ったら、そのメニューに対してページを作成できます。
フォルダーを作って階層化することも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/26031a78-7867-8ea6-1e8f-26f7adba5d8a.png)

編集したページの保存は、右上のアイコンから保存できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/752d8883-b680-4d18-f342-67fa4c4471b3.png)


### メニューの管理
ページまたはフォルダーの集まりを「メニュー」として管理しています。
「メニュー」はPublicとPrivateがあり、Publicメニューは他のユーザからもリンクさせ、共有することが可能です。
他のユーザが作ったPublicメニューをリンクしたい場合は、「既存メニューの追加」からリンクを追加できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/42b261da-27f4-2d20-4f11-398265bd59a0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/4449dacb-96a7-3823-33a9-7a150f1a8fc4.png)

※ リンクは「メニュー」単位で管理しています。
　　あるユーザがあるメニューをリンクした場合、そのメニュー配下のフォルダ、ページはすべて参照・操作可能となります。
　　ページ、フォルダを個別にリンク設定することはできません。

### メニューの操作
ドラッグでページやフォルダの位置を移動したり、ダブルクリックで名称を変更したりも可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/f1c01dcd-0a58-652c-31cf-4422bde2bd0c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/c137a34c-2184-e3e5-0cd8-e511546614d1.png)

ページの種類について
---
ページの種類は、現時点では「テキスト、テーブル、ファイル管理」のみです。

・テキスト：単純なテキストを保存するだけ。
・テーブル：1行データをテーブル表示する。簡単なCRUDのサンプルとして。
・ファイル管理：ファイルのアップロード、ダウンロードのサンプルとして。
※データをDBに登録するようにしているので、大きなファイルだとエラーになるかもしれません。
　数十MB程度までのファイルしか保存できないので、実用化するならファイルでの保存に変更したほうがよさそうです。

ソースの「front\src\app\views\pages」などを追加・拡張することによって、比較的簡単に新しいページ種類を追加することができると思います。
以下は、Quillエディタを使用できるように機能拡張したイメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285246/d70e160f-b24e-df35-f012-8a6ba2828620.png)


ソース構成
---
本アプリは、以下のサンプルをベースに作成しています。
ソース構成などの概要は、以下のサイトを参考にしてください。

[Angular ＋ Expressの開発環境サンプル](https://qiita.com/kyv28v/items/92c0480aef9b77b7880e)

その他
---
その他、以下のような基本的な機能を実装しています。
どれも簡易的なものですが、何かの参考になれば幸いです。

・ログイン、認証
　→jsonwebtokenを使用した認証
・ダイアログ
　→ヘッダーをドラッグすることで位置移動が可能な共通ダイアログ
・ユーザ管理
　→シンプルなCRUD機能を扱える共通ダイアログ
・多言語化
　→ngx-translateを使用した言語の切り替え機能
・テーマ切り替え
　→Angular Materialのテーマ切り替え。
　（うまくスタイルを指定できなくて、一部、強引にスタイルをセットしています・・・。）