ng admin
v1.0.7
RESTFul API に接続すると、すぐに完全な管理インターフェイス (データグリッド、フィルター、複雑なフォーム ウィジェット、マルチモデル リレーションシップ、ダッシュボード) を取得できます。 ng-admin を使用すると、単純な CRUD を超えて、邪魔にならずに洗練された GUI を構築できます。
このプロジェクトは現在メンテナンス モードになっています。私たちは React.js を使ってそれを一から再構築し (新しいプロジェクトは、react-admin と呼ばれます)、React バージョンに全力を注いでいます。
現在の ng-admin バージョン (マスター) は、Angular.js 1.6 に依存しています。 Angular 1.3 との互換性が必要な場合は、ng-admin 0.9 を使用してください。
お気に入りのパッケージ マネージャーから ng-admin を取得します。
npm install ng-admin --save
# or
yarn add ng-adminng-admin Webpack と完全な互換性があり、利用可能なすべての主要モジュール バンドラーとも互換性がある必要があります。これらのいずれかを使用する場合は、次の行を追加するだけです。
const myApp = angular . module ( 'myApp' , [
require ( 'ng-admin' ) ,
// ...
] ) ;重要な注意事項: templateUrlによって暗示される AJAX リクエストを防ぐためにrequireを使用する HTML テンプレートが含まれているため、HTML を処理するようにモジュール バンドラーを構成する必要があります。これは、HTML ローダーを使用する Webpack で実現できます。
module . exports = {
// ...
module : {
loaders : [
// ...
{ test : / .html$ / , loader : 'html' } ,
]
} ,
} ;モジュール バンドラーが SASS または CSS もサポートしている場合は、以下を使用してスタイルシートを含めることもできます。
// SASS version
require ( 'ng-admin/lib/sass/ng-admin.scss' ) ;
// CSS version
require ( 'ng-admin/build/ng-admin.min.css' ) ;モジュール バンドラーを使用すると、すべての JavaScript とスタイルシートのソース マップを生成することもできるため、最もわかりにくいバグも見つけることができます。
モジュール バンドラーがない場合でも、心配する必要はありません。 <script>タグを使用してng-adminを含めることもできます。
< link rel =" stylesheet " href =" node_modules/ng-admin/build/ng-admin.min.css " >
< script src =" node_modules/ng-admin/build/ng-admin.min.js " > </ script > ng-admin.min.cssとng-admin.min.js HTML に追加し、 <div ui-view="ng-admin">を追加して、管理者を構成します。
<!doctype html >
< html lang =" en " >
< head >
< title > My First Admin </ title >
< link rel =" stylesheet " href =" node_modules/ng-admin/build/ng-admin.min.css " >
</ head >
< body ng-app =" myApp " >
< div ui-view =" ng-admin " > </ div >
< script src =" node_modules/ng-admin/build/ng-admin.min.js " > </ script >
< script type =" text/javascript " >
var myApp = angular . module ( 'myApp' , [ 'ng-admin' ] ) ;
myApp . config ( [ 'NgAdminConfigurationProvider' , function ( NgAdminConfigurationProvider ) {
var nga = NgAdminConfigurationProvider ;
// create an admin application
var admin = nga . application ( 'My First Admin' ) ;
// more configuration here later
// ...
// attach the admin application to the DOM and run it
nga . configure ( admin ) ;
} ] ) ;
</ script >
</ body >
</ html > 初心者向けのステップバイステップのチュートリアルについては、「はじめに」の専用章を参照してください。
ng-admin の管理は、複数のエンティティを含む 1 つのアプリケーションで構成されます。各エンティティには最大 5 つのビューがあり、各ビューには多くのフィールドがあります。
application
|-header
|-menu
|-dashboard
|-entity[]
|-creationView
|-editionView
|-deletionView
|-showView
|-listView
|-field[]
|-name
|-type
詳細については、構成 API リファレンスの専用の章を参照してください。
ヒント: ng-admin プロジェクトには関連クラスが見つかりません。実際、管理構成 API は、admin-config という、フレームワークに依存しないスタンドアロンのライブラリとして存在します。詳細については、遠慮せずにそのライブラリのソースを参照してください。
Ng-admin は、読み取りビューと書き込みビューのエンティティ間の関係をサポートし、それに特化したフィールド タイプ、 reference 、 referenced_list 、 reference_many 、 embedded_listを提供します。リレーションシップのリファレンスの章では、どのような場合にどのフィールド タイプを使用するかについて詳しく説明します。
また、「構成 API リファレンス」の章の「フィールド」セクションには、これらの各フィールド タイプのすべての設定のリストが記載されています。
デフォルトでは、ng-admin はエンティティごとに 1 つのエントリを含むサイドバー メニューを作成します。このサイドバーをカスタマイズする場合 (ラベル、アイコン、順序、サブメニューの追加など)、メニューを手動で定義する必要があります。
「メニュー設定」の専用の章を参照してください。
ng-admin アプリケーションのホームページは、ダッシュボードと呼ばれます。最新のエントリやグラフなどの重要な情報をエンド ユーザーに表示するために使用します。
ダッシュボード設定の専用の章を参照してください。
ng-admin によって REST API に対して行われたすべての HTTP リクエストは、強化された$resourceような Restangular によって実行されます。
REST 仕様では、管理 GUI のすべての要件をカバーするのに十分な詳細が提供されていません。 ng-admin は、API がどのように設計されているかについていくつかの仮定を立てます。これらの前提はすべて、Restangular のリクエストおよびレスポンス インターセプターを介してオーバーライドできます。
つまり、API を ng-admin に適合させる必要はありません。 ng-admin は、Restangular の柔軟性のおかげで、あらゆる REST API に適応できます。
「API マッピングのカスタマイズ」専用の章を参照してください。
ng-admin によって生成されたほぼすべての HTML をさまざまなレベルでオーバーライドできます。
「テーマ設定」専用の章を参照してください。
ng-admin インターフェイスはデフォルト言語として英語を使用しますが、angular-translate のおかげで別の言語への切り替えがサポートされています。
「翻訳」専用の章を参照してください。
ng-admin は、エンティティごとに、このエンティティの作成、取得、更新、削除 (CRUD) に必要なページを作成します。エンティティに対してより具体的なアクションを実行する必要がある場合は、カスタム ページ (たとえば、メッセージの送信先の電子メール アドレスを要求するページ) を追加する必要があります。特定のページにルーティングして、それを ng-admin レイアウトで表示するにはどうすればよいですか?
「カスタム ページの追加」専用の章を参照してください。
REST API 応答と ng-admin の間でフィールドをマップするときは、フィールドにタイプを指定します。このタイプは、データの表示および編集方法を決定します。既存の ng-admin タイプをカスタマイズしたり、新しいタイプを追加したりするのは非常に簡単です。
「カスタム タイプの追加」専用の章を参照してください。
必要な依存関係を含む ng-admin ソースを構築し、パフォーマンス向上に関するヒントを得るには、「本番環境の準備」専用の章に進んでください。
ng-admin に関するニュース (チュートリアル、プラグイン、新しいリリースなど) については、marmelab ブログをフォローしてください。
新しいリリースに関する発表や完全な変更ログについては、GitHub の ng-admin リリース ページも参照してください。
Ng-admin はオープンソース プロジェクトであり、コミュニティは日々拡大しています。次のいずれかのチャネルで丁寧に質問すると、サポートが得られます。
管理構成スニペットやマッピングしている API からの応答など、できるだけ多くのコンテキストを提供してください。
同じチームによる marmelab/admin-on-rest は、異なるアーキテクチャを使用していますが、同様のサービスを提供しています。REST API 用の管理 GUI で、今回は React.js、Redux、react-router、およびマテリアル UI が使用されています。
特定のコンテキストでの ng-admin の使用法に関するフィードバックは貴重です。問題や質問がある場合は、遠慮なく GitHub の問題を開いてください。
すべての貢献を歓迎します。フィードバックする価値があると思われるフォークの新機能/バグ修正については、プル リクエストを送信してください。
また、ng-admin の使用経験がある場合は、いずれかのサポート チャネル (上記を参照) で初心者からの質問に答えてください。
installターゲットを呼び出して、npm 依存関係 (テスト用) をインストールします。
make install変更をテストするには、以下を呼び出して、サンプル REST API にバンドルされているサンプル アプリを実行します。
make run次に、 http://localhost:8000/に接続して管理アプリを参照します。このタスクでは webpack-dev-server を使用します。これは、ソース内の 1 つのファイルが更新されるとすぐにブラウザーがページをリロードすることを意味します。これにより、ブログ アプリが推奨されるライブ テスト環境になります。
ng-admin には、単体テスト (karma を利用) とエンドツーエンド テスト (分度器を利用) があります。以下を呼び出して、テスト スイート全体を起動します。
make testヒント: Karma テストに取り組んでいる場合は、単一実行を無効にすることでプロセス全体の再起動を防ぐことができます。
./node_modules/.bin/karma start src/javascripts/test/karma.conf.js
新しいバージョンをリリースする前に、以下を使用して JS ソースと CSS ソースを連結して縮小スクリプトにし、縮小スクリプトを作成します。
make build
git add build
git commit -m ' update built files '
git push origin master
git tag vx.x.x
# create a new tag
git push origin --tags
# publish to npm
npm publishヒント: プル リクエストでビルドされたファイルをコミットしないでください。他の PR でリベースが強制されます。コア チームは、これらのビルドされたファイルを定期的に更新します。
ng-admin は MIT ライセンスに基づいてライセンスされており、marmelab のスポンサーとなっています。
