ng admin
v1.0.7
Schließen Sie mich an Ihre RESTFul-API an, um im Handumdrehen eine vollständige Verwaltungsschnittstelle (Datagrid, Filter, komplexe Formular-Widgets, Beziehungen mit mehreren Modellen, Dashboard) zu erhalten! Über einfaches CRUD hinaus können Sie mit ng-admin anspruchsvolle GUIs erstellen, ohne sich in die Quere zu kommen.
Dieses Projekt befindet sich jetzt im Wartungsmodus. Wir haben es mit React.js von Grund auf neu erstellt (das neue Projekt heißt React-Admin) und stecken alle unsere Anstrengungen in die React-Version.
Die aktuelle ng-admin-Version (Master) hängt von Angular.js 1.6 ab. Wenn Sie Kompatibilität mit Angular 1.3 benötigen, verwenden Sie ng-admin 0.9.
Holen Sie sich ng-admin von Ihrem bevorzugten Paketmanager:
npm install ng-admin --save
# or
yarn add ng-admin ng-admin ist vollständig mit Webpack kompatibel und sollte auch mit allen verfügbaren Hauptmodul-Bundlern kompatibel sein. Wenn Sie eines davon verwenden, müssen Sie nur diese Zeile hinzufügen:
const myApp = angular . module ( 'myApp' , [
require ( 'ng-admin' ) ,
// ...
] ) ; Wichtiger Hinweis: Da wir HTML-Vorlagen mithilfe von require einbinden, um die durch templateUrl implizierte AJAX-Anfrage zu verhindern, müssen Sie Ihren Modul-Bundler für den Umgang mit HTML konfigurieren. Dies kann mit Webpack mithilfe des HTML-Loaders erreicht werden:
module . exports = {
// ...
module : {
loaders : [
// ...
{ test : / .html$ / , loader : 'html' } ,
]
} ,
} ;Wenn Ihr Modul-Bundler auch SASS oder CSS unterstützt, können Sie Stylesheets auch einbinden mit:
// SASS version
require ( 'ng-admin/lib/sass/ng-admin.scss' ) ;
// CSS version
require ( 'ng-admin/build/ng-admin.min.css' ) ;Mit einem Modul-Bundler könnten Sie auch die Quellzuordnung für Ihr gesamtes JavaScript und Ihre Stylesheets generieren und so selbst die dunkelsten Fehler aufspüren.
Wenn Sie keinen Modul-Bundler haben, machen Sie sich keine Sorgen: Sie können ng-admin trotzdem mit einem <script> -Tag einbinden:
< 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 > Fügen Sie ng-admin.min.css und ng-admin.min.js zum HTML hinzu, fügen Sie ein <div ui-view="ng-admin"> hinzu und konfigurieren Sie den Administrator:
<!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 > Im speziellen Kapitel „Erste Schritte“ finden Sie eine Schritt-für-Schritt-Anleitung für Anfänger.
Eine Verwaltung in ng-admin besteht aus einer Anwendung, die mehrere Entitäten enthält. Jede Entität hat bis zu 5 Ansichten und jede Ansicht hat viele Felder .
application
|-header
|-menu
|-dashboard
|-entity[]
|-creationView
|-editionView
|-deletionView
|-showView
|-listView
|-field[]
|-name
|-type
Weitere Einzelheiten finden Sie im entsprechenden Kapitel zur Konfigurations-API-Referenz.
Tipp : Die zugehörigen Klassen finden Sie nicht im ng-admin-Projekt. Tatsächlich existiert die Admin-Konfigurations-API als eigenständige, Framework-unabhängige Bibliothek namens admin-config. Zögern Sie nicht, die Quelle dieser Bibliothek zu durchsuchen, um mehr zu erfahren.
Ng-admin unterstützt Beziehungen zwischen Entitäten in Lese- und Schreibansichten und stellt dafür spezielle Feldtypen bereit: reference , referenced_list , reference_many und embedded_list . Im Kapitel „Referenz zu Beziehungen“ wird ausführlicher beschrieben, welcher Feldtyp für welchen Fall verwendet werden sollte.
Außerdem enthält der Abschnitt „Felder“ des Kapitels „Konfigurations-API-Referenz“ eine Liste aller Einstellungen für jeden dieser Feldtypen.
Standardmäßig erstellt ng-admin ein Seitenleistenmenü mit einem Eintrag pro Entität. Wenn Sie diese Seitenleiste anpassen möchten (Beschriftungen, Symbole, Reihenfolge, Hinzufügen von Untermenüs usw.), müssen Sie Menüs manuell definieren.
Siehe das entsprechende Kapitel zur Menükonfiguration.
Die Startseite einer ng-admin-Anwendung wird Dashboard genannt. Verwenden Sie es, um dem Endbenutzer wichtige Informationen anzuzeigen, z. B. die neuesten Einträge oder Diagramme.
Siehe das entsprechende Kapitel zur Dashboard-Konfiguration.
Alle HTTP-Anfragen, die ng-admin an Ihre REST-API stellt, werden von Restangular ausgeführt, was $resource auf Steroiden ähnelt.
Die REST-Spezifikation bietet nicht genügend Details, um alle Anforderungen einer Verwaltungs-GUI abzudecken. ng-admin macht einige Annahmen darüber, wie Ihre API gestaltet ist. Alle diese Annahmen können mit den Request- und Response-Interceptoren von Restangular außer Kraft gesetzt werden.
Das bedeutet, dass Sie Ihre API nicht an ng-admin anpassen müssen; Dank der Flexibilität von Restangular kann sich ng-admin an jede REST-API anpassen.
Weitere Informationen finden Sie im entsprechenden Kapitel „Anpassen der API-Zuordnung“.
Sie können praktisch den gesamten von ng-admin generierten HTML-Code auf verschiedenen Ebenen überschreiben.
Weitere Informationen finden Sie im entsprechenden Kapitel zur Thematisierung.
Die ng-admin-Schnittstelle verwendet Englisch als Standardsprache, unterstützt aber dank Angular-Translate den Wechsel zu einer anderen Sprache.
Siehe das entsprechende Kapitel zur Übersetzung.
Für jede Entität erstellt ng-admin die erforderlichen Seiten zum Erstellen, Abrufen, Aktualisieren und Löschen (CRUD) dieser Entität. Wenn Sie spezifischere Aktionen für eine Entität ausführen möchten, müssen Sie eine benutzerdefinierte Seite hinzufügen – beispielsweise eine Seite, auf der Sie nach einer E-Mail-Adresse gefragt werden, an die eine Nachricht gesendet werden soll. Wie können Sie zu einer bestimmten Seite weiterleiten und diese im ng-admin-Layout anzeigen?
Weitere Informationen finden Sie im entsprechenden Kapitel „Hinzufügen benutzerdefinierter Seiten“.
Wenn Sie ein Feld zwischen einer REST-API-Antwort und ng-admin zuordnen, geben Sie ihm einen Typ. Dieser Typ bestimmt, wie die Daten angezeigt und bearbeitet werden. Es ist sehr einfach, vorhandene ng-admin-Typen anzupassen und neue hinzuzufügen.
Weitere Informationen finden Sie im entsprechenden Kapitel „Hinzufügen benutzerdefinierter Typen“.
Um die ng-admin-Quelle mit den von Ihnen benötigten Abhängigkeiten zu erstellen und Hinweise zu Leistungssteigerungen zu erhalten, lesen Sie das entsprechende Kapitel „Vorbereitung für die Produktion“.
Folgen Sie dem Marmelab-Blog für Neuigkeiten über ng-admin (Tutorials, Plugins, neue Versionen usw.).
Sie sollten sich auch die ng-admin-Release-Seite auf GitHub ansehen, um Ankündigungen zu neuen Releases und ein vollständiges Änderungsprotokoll zu erhalten.
Ng-admin ist ein Open-Source-Projekt, dessen Community jeden Tag größer wird. Sie erhalten Hilfe, indem Sie höflich über einen der folgenden Kanäle fragen:
Bitte geben Sie so viel Kontext wie möglich an, einschließlich eines Admin-Konfigurationsausschnitts und der Antwort der API, die Sie zuordnen.
marmelab/admin-on-rest vom selben Team verwendet eine andere Architektur, bietet aber einen ähnlichen Dienst: eine Admin-GUI für REST-APIs, dieses Mal mit React.js, Redux, React-Router und Material-UI.
Ihr Feedback zur Verwendung von ng-admin in Ihrem spezifischen Kontext ist wertvoll. Zögern Sie nicht, GitHub Issues zu öffnen, wenn Sie ein Problem oder eine Frage haben.
Alle Beiträge sind willkommen: Bitte senden Sie uns eine Pull-Anfrage für alle neuen Funktionen/Fehlerbehebungen in Ihrem Fork, die Ihrer Meinung nach eine Rückgabe wert sind.
Wenn Sie bereits Erfahrung mit ng-admin haben, beantworten Sie bitte Fragen von Neulingen in einem der Supportkanäle (siehe oben).
Installieren Sie NPM-Abhängigkeiten (für Tests), indem Sie das install aufrufen:
make installUm Ihre Änderungen zu testen, führen Sie die Beispiel-App aus, die mit einer Beispiel-REST-API gebündelt ist, indem Sie Folgendes aufrufen:
make run Stellen Sie dann eine Verbindung zu http://localhost:8000/ her, um die Admin-App zu durchsuchen. Diese Aufgabe verwendet webpack-dev-server, was bedeutet, dass der Browser die Seite neu lädt, sobald eine Datei in der Quelle aktualisiert wird. Dies macht die Blog-App zu unserer bevorzugten Live-Testumgebung.
ng-admin verfügt über Unit-Tests (angetrieben durch Karma) und End-to-End-Tests (angetrieben durch Winkelmesser). Starten Sie die gesamte Testsuite, indem Sie Folgendes aufrufen:
make testTipp: Wenn Sie an Karma-Tests arbeiten, können Sie verhindern, dass der gesamte Prozess neu gestartet wird, indem Sie die Einzeldurchführung deaktivieren:
./node_modules/.bin/karma start src/javascripts/test/karma.conf.js
Bevor Sie eine neue Version veröffentlichen, verketten und minimieren Sie die JS- und CSS-Quellen in minimierte Skripte mit:
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 publishTipp : Übertragen Sie keine erstellten Dateien in Pull Requests, da dies Rebases auf anderen PRs erzwingt. Das Kernteam kümmert sich um die regelmäßige Aktualisierung dieser erstellten Dateien.
ng-admin ist unter der MIT-Lizenz lizenziert und wird von marmelab gesponsert.
