ng admin
v1.0.7
Connectez-moi à votre API RESTFul pour obtenir une interface d'administration complète (datagrid, filtres, widgets de formulaires complexes, relations multi-modèles, tableau de bord) en un rien de temps ! Au-delà du simple CRUD, ng-admin vous permet de créer des interfaces graphiques sophistiquées sans vous gêner.
Ce projet est maintenant en mode maintenance. Nous l'avons reconstruit de toutes pièces avec React.js (le nouveau projet s'appelle React-admin), et nous mettons tous nos efforts sur la version React.
La version actuelle de ng-admin (master) dépend d'Angular.js 1.6. Si vous avez besoin d'une compatibilité avec Angular 1.3, utilisez ng-admin 0.9.
Récupérez ng-admin depuis votre gestionnaire de paquets préféré :
npm install ng-admin --save
# or
yarn add ng-admin ng-admin est entièrement compatible avec Webpack et devrait également être compatible avec tous les principaux bundles de modules disponibles. Si vous en utilisez un, il vous suffit d'ajouter cette ligne :
const myApp = angular . module ( 'myApp' , [
require ( 'ng-admin' ) ,
// ...
] ) ; Remarque importante : comme nous incluons des modèles HTML utilisant require pour empêcher la requête AJAX impliquée par templateUrl , vous devrez configurer votre bundler de modules pour gérer le HTML. Cela peut être réalisé avec Webpack en utilisant le chargeur HTML :
module . exports = {
// ...
module : {
loaders : [
// ...
{ test : / .html$ / , loader : 'html' } ,
]
} ,
} ;Si votre bundler de modules prend également en charge SASS ou CSS, vous pouvez également inclure des feuilles de style en utilisant :
// SASS version
require ( 'ng-admin/lib/sass/ng-admin.scss' ) ;
// CSS version
require ( 'ng-admin/build/ng-admin.min.css' ) ;À l'aide d'un bundler de modules, vous pourrez également générer la carte source de tous vos JavaScript et feuilles de style, vous aidant ainsi à traquer même les bogues les plus obscurs.
Si vous n'avez pas de bundler de modules, ne vous inquiétez pas : vous pouvez toujours inclure ng-admin avec une balise <script> :
< 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 > Ajoutez les ng-admin.min.css et ng-admin.min.js au HTML, ajoutez un <div ui-view="ng-admin"> et configurez l'administrateur :
<!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 > Consultez le chapitre dédié Mise en route pour un didacticiel étape par étape destiné aux débutants.
Une administration dans ng-admin est constituée d'une application contenant plusieurs entités . Chaque entité possède jusqu'à 5 vues et chaque vue comporte de nombreux champs .
application
|-header
|-menu
|-dashboard
|-entity[]
|-creationView
|-editionView
|-deletionView
|-showView
|-listView
|-field[]
|-name
|-type
Voir le chapitre dédié Référence de l'API de configuration pour plus de détails.
Astuce : Vous ne trouverez pas les classes associées dans le projet ng-admin. En fait, l'API de configuration d'administration existe sous la forme d'une bibliothèque autonome et indépendante du framework, appelée admin-config. N'hésitez pas à parcourir la source de cette bibliothèque pour en savoir plus.
Ng-admin prend en charge les relations entre les entités dans les vues en lecture et en écriture et fournit des types de champs spécialisés pour cela : reference , referenced_list , reference_many et embedded_list . Le chapitre Référence des relations décrit plus en détail quel type de champ utiliser pour quel cas.
En outre, la section Champs du chapitre Référence de l'API de configuration contient une liste de tous les paramètres pour chacun de ces types de champs.
Par défaut, ng-admin crée un menu de barre latérale avec une entrée par entité. Si vous souhaitez personnaliser cette barre latérale (libellés, icônes, ordre, ajout de sous-menus, etc.), vous devez définir les menus manuellement.
Voir le chapitre dédié Configuration des Menus.
La page d'accueil d'une application ng-admin s'appelle le tableau de bord. Utilisez-le pour afficher des informations importantes à l'utilisateur final, telles que les dernières entrées ou des graphiques.
Voir le chapitre dédié à la configuration du tableau de bord.
Toutes les requêtes HTTP effectuées par ng-admin vers votre API REST sont effectuées par Restangular, qui est comme $resource sous stéroïdes.
La spécification REST ne fournit pas suffisamment de détails pour couvrir toutes les exigences d'une interface graphique d'administration. ng-admin fait quelques hypothèses sur la façon dont votre API est conçue. Toutes ces hypothèses peuvent être annulées au moyen des intercepteurs de requêtes et de réponses de Restangular.
Cela signifie que vous n'avez pas besoin d'adapter votre API à ng-admin ; ng-admin peut s'adapter à n'importe quelle API REST, grâce à la flexibilité de Restangular.
Voir le chapitre dédié Personnalisation du mapping API.
Vous pouvez remplacer à peu près tout le code HTML généré par ng-admin, à différents niveaux.
Voir le chapitre dédié à la Thématisation.
L'interface ng-admin utilise l'anglais comme langue par défaut, mais prend en charge le passage à une autre langue, grâce à angulaire-translate.
Voir le chapitre dédié à la traduction.
Pour chaque entité, ng-admin crée les pages nécessaires à la création, la récupération, la mise à jour et la suppression (CRUD) de cette entité. Lorsque vous devez réaliser des actions plus spécifiques sur une entité, vous devez ajouter une page personnalisée - par exemple une page demandant une adresse e-mail à laquelle envoyer un message. Comment pouvez-vous accéder à une page spécifique et l'afficher dans la mise en page ng-admin ?
Voir le chapitre dédié à l'ajout de pages personnalisées.
Lorsque vous mappez un champ entre une réponse de l'API REST et ng-admin, vous lui attribuez un type. Ce type détermine la manière dont les données sont affichées et modifiées. Il est très facile de personnaliser les types ng-admin existants et d'en ajouter de nouveaux.
Voir le chapitre dédié Ajout de types personnalisés.
Pour créer la source ng-admin avec les dépendances dont vous avez besoin et pour obtenir des conseils sur les améliorations de performances, consultez le chapitre dédié Se préparer pour la production.
Suivez le blog marmelab pour des nouvelles sur ng-admin (tutoriels, plugins, nouvelles versions, etc.).
Vous devriez également consulter la page de publication de ng-admin sur GitHub pour les annonces sur les nouvelles versions et compléter le journal des modifications.
Ng-admin est un projet open source, avec une communauté qui s'agrandit chaque jour. Vous obtiendrez de l’aide en demandant poliment via l’un des canaux suivants :
Veuillez donner autant de contexte que possible, y compris un extrait de configuration de l'administrateur et la réponse de l'API que vous mappez.
marmelab/admin-on-rest, de la même équipe, utilise une architecture différente mais fournit un service similaire : une interface graphique d'administration pour les API REST, cette fois avec React.js, Redux, React-Router et une interface utilisateur matérielle.
Vos commentaires sur l'utilisation de ng-admin dans votre contexte spécifique sont précieux, n'hésitez pas à ouvrir les problèmes GitHub pour tout problème ou question que vous pourriez avoir.
Toutes les contributions sont les bienvenues : veuillez nous envoyer une Pull Request pour toute nouvelle fonctionnalité/correction de bug dans votre fork que vous considérez comme valant la peine de redonner.
De plus, si vous avez une certaine expérience avec ng-admin, veuillez répondre aux questions des nouveaux arrivants sur l'un des canaux d'assistance (voir ci-dessus).
Installez les dépendances npm (pour les tests) en appelant la cible install :
make installPour tester vos modifications, exécutez l'exemple d'application, qui est fourni avec un exemple d'API REST, en appelant :
make run Ensuite, connectez-vous à http://localhost:8000/ pour parcourir l'application d'administration. Cette tâche utilise webpack-dev-server, ce qui signifie que le navigateur rechargera la page dès qu'un fichier de la source sera mis à jour. Cela fait de l'application de blog notre environnement de test en direct préféré.
ng-admin propose des tests unitaires (alimentés par karma) et des tests de bout en bout (alimentés par rapporteur). Lancez l'intégralité de la suite de tests en appelant :
make testAstuce : Si vous travaillez sur des tests Karma, vous pouvez empêcher la relance de l'ensemble du processus en désactivant l'exécution unique :
./node_modules/.bin/karma start src/javascripts/test/karma.conf.js
Avant de publier une nouvelle version, concaténez et minimisez les sources JS et CSS en scripts minifiés avec :
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 publishAstuce : Ne validez pas les fichiers construits dans les Pull Requests, cela force les rebases sur d'autres PR. L'équipe principale se chargera de mettre à jour régulièrement ces fichiers construits.
ng-admin est sous licence MIT et sponsorisé par marmelab.
