はじめに
AngularでWEBアプリを作るとき、ベースとなるような汎用的なサンプルがあると便利なので、作成。
上部にトップメニュー、左にサイドメニューがあって・・・というよくあるサイトです。
サイドメニューから自由にページを追加、削除したりする機能もあります。
開発環境は、いわゆるMEANスタック（MongoDB、Express、Angular、Node.js）をベースにしています。
（DBは、MongoDB以外にPostgreSQLも対応しています。）
サイドメニューのUIは、angular-tree-componentを使用しています。
ここから自由にページを追加、削除できます。
開発環境
・node.js 10.24.0
・npm 7.6.3
・Angular 11.1.0
・MongoDB 4.4.4
・PostgreSql 12.6
実行方法
のREADMEの記述に従ってnpm installなどを行ってください。
DB は MongoDB と PostgreSQL に対応していますので、どちらかを選んで構成してください。
機能
ユーザ作成
初回は自動的に管理ユーザでログインされますので、右上のメニューのユーザ管理よりユーザを作成してください。
（管理ユーザのままでの使用も可能ですが。）
※ READMEの通りにDB構築すると、デフォルトで「admin」と「guest」の2ユーザができます。
パスワードはどちらも「123456」です。
メニュー作成
ユーザを作ったら、一度ログアウトして入り直します。
最初は「メニュー」がありませんので、まずは新規に「メニュー」を作成します。
ユーザ名の右側からコンテキストメニューを開けますので、そこから選択してください。
ページ作成
メニューを作ったら、そのメニューに対してページを作成できます。
フォルダーを作って階層化することも可能です。
編集したページの保存は、右上のアイコンから保存できます。
メニューの管理
ページまたはフォルダーの集まりを「メニュー」として管理しています。
「メニュー」はPublicとPrivateがあり、Publicメニューは他のユーザからもリンクさせ、共有することが可能です。
他のユーザが作ったPublicメニューをリンクしたい場合は、「既存メニューの追加」からリンクを追加できます。
※ リンクは「メニュー」単位で管理しています。
あるユーザがあるメニューをリンクした場合、そのメニュー配下のフォルダ、ページはすべて参照・操作可能となります。
ページ、フォルダを個別にリンク設定することはできません。
メニューの操作
ドラッグでページやフォルダの位置を移動したり、ダブルクリックで名称を変更したりも可能です。
ページの種類について
ページの種類は、現時点では「テキスト、テーブル、ファイル管理」のみです。
・テキスト：単純なテキストを保存するだけ。
・テーブル：1行データをテーブル表示する。簡単なCRUDのサンプルとして。
・ファイル管理：ファイルのアップロード、ダウンロードのサンプルとして。
※データをDBに登録するようにしているので、大きなファイルだとエラーになるかもしれません。
数十MB程度までのファイルしか保存できないので、実用化するならファイルでの保存に変更したほうがよさそうです。
ソースの「front\src\app\views\pages」などを追加・拡張することによって、比較的簡単に新しいページ種類を追加することができると思います。
以下は、Quillエディタを使用できるように機能拡張したイメージです。
ソース構成
本アプリは、以下のサンプルをベースに作成しています。
ソース構成などの概要は、以下のサイトを参考にしてください。
その他
その他、以下のような基本的な機能を実装しています。
どれも簡易的なものですが、何かの参考になれば幸いです。
・ログイン、認証
→jsonwebtokenを使用した認証
・ダイアログ
→ヘッダーをドラッグすることで位置移動が可能な共通ダイアログ
・ユーザ管理
→シンプルなCRUD機能を扱える共通ダイアログ
・多言語化
→ngx-translateを使用した言語の切り替え機能
・テーマ切り替え
→Angular Materialのテーマ切り替え。
（うまくスタイルを指定できなくて、一部、強引にスタイルをセットしています・・・。）