ng admin
v1.0.7
Conécteme a su API RESTFul para obtener una interfaz de administración completa (cuadrícula de datos, filtros, widgets de formularios complejos, relaciones multimodelo, panel) en poco tiempo. Más allá del simple CRUD, ng-admin le permite crear GUI sofisticadas sin interponerse en su camino.
Este proyecto ahora está en modo de mantenimiento. Lo reconstruimos desde cero con React.js (el nuevo proyecto se llama reaccionar-admin) y estamos poniendo todos nuestros esfuerzos en la versión React.
La versión actual de ng-admin (maestra) depende de Angular.js 1.6. Si necesita compatibilidad con Angular 1.3, use ng-admin 0.9.
Toma ng-admin de tu administrador de paquetes favorito:
npm install ng-admin --save
# or
yarn add ng-admin ng-admin es totalmente compatible con Webpack y también debería ser compatible con todos los paquetes de módulos principales disponibles. Si utilizas uno de ellos, sólo tienes que añadir esta línea:
const myApp = angular . module ( 'myApp' , [
require ( 'ng-admin' ) ,
// ...
] ) ; Nota importante: como incluimos plantillas HTML usando require para evitar la solicitud AJAX implícita en templateUrl , deberá configurar su paquete de módulos para manejar HTML. Se puede lograr con Webpack usando el cargador HTML:
module . exports = {
// ...
module : {
loaders : [
// ...
{ test : / .html$ / , loader : 'html' } ,
]
} ,
} ;Si su paquete de módulos también admite SASS o CSS, también puede incluir hojas de estilo usando:
// SASS version
require ( 'ng-admin/lib/sass/ng-admin.scss' ) ;
// CSS version
require ( 'ng-admin/build/ng-admin.min.css' ) ;Al utilizar un paquete de módulos, también podrá generar el mapa fuente para todos sus JavaScript y hojas de estilo, lo que le ayudará a detectar incluso los errores más oscuros.
Si no tienes un paquete de módulos, no te preocupes: aún puedes incluir ng-admin con una etiqueta <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 > Agregue ng-admin.min.css y ng-admin.min.js al HTML, agregue un <div ui-view="ng-admin"> y configure el administrador:
<!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 > Consulte el capítulo dedicado Primeros pasos para obtener un tutorial paso a paso dirigido a principiantes.
Una administración en ng-admin se realiza a partir de una aplicación que contiene varias entidades . Cada entidad tiene hasta 5 vistas y cada vista tiene muchos campos .
application
|-header
|-menu
|-dashboard
|-entity[]
|-creationView
|-editionView
|-deletionView
|-showView
|-listView
|-field[]
|-name
|-type
Consulte el capítulo dedicado Referencia de la API de configuración para obtener más detalles.
Consejo : no encontrará las clases relacionadas en el proyecto ng-admin. De hecho, la API de configuración de administrador existe como una biblioteca independiente e independiente del marco, llamada admin-config. No dude en explorar la fuente de esa biblioteca para obtener más información.
Ng-admin admite relaciones entre entidades en vistas de lectura y escritura, y proporciona tipos de campos especializados para eso: reference , referenced_list , reference_many y embedded_list . El capítulo Referencia de relaciones describe con más detalle qué tipo de campo utilizar en cada caso.
Además, la sección Campos del capítulo Referencia de la API de configuración tiene una lista de todas las configuraciones para cada uno de estos tipos de campos.
De forma predeterminada, ng-admin crea un menú de barra lateral con una entrada por entidad. Si desea personalizar esta barra lateral (etiquetas, iconos, orden, agregar submenús, etc.), debe definir los menús manualmente.
Ver el capítulo dedicado a Configuración de Menús.
La página de inicio de una aplicación ng-admin se llama Panel de control. Úselo para mostrar información importante al usuario final, como las últimas entradas o gráficos.
Consulte el capítulo dedicado a Configuración del panel.
Todas las solicitudes HTTP realizadas por ng-admin a su API REST las realiza Restangular, que es como $resource con esteroides.
La especificación REST no proporciona suficientes detalles para cubrir todos los requisitos de una GUI de administración. ng-admin hace algunas suposiciones sobre cómo está diseñada su API. Todas estas suposiciones pueden anularse mediante los interceptores de solicitud y respuesta de Restangular.
Eso significa que no necesita adaptar su API a ng-admin; ng-admin puede adaptarse a cualquier API REST, gracias a la flexibilidad de Restangular.
Consulte el capítulo dedicado Personalización de la asignación de API.
Puedes anular prácticamente todo el HTML generado por ng-admin, en diferentes niveles.
Consulte el capítulo dedicado a Tematización.
La interfaz ng-admin utiliza el inglés como idioma predeterminado, pero admite el cambio a otro idioma gracias a angular-translate.
Consulte el capítulo dedicado a la Traducción.
Para cada entidad, ng-admin crea las páginas necesarias para crear, recuperar, actualizar y eliminar (CRUD) esta entidad. Cuando necesite realizar acciones más específicas en una entidad, deberá agregar una página personalizada, por ejemplo, una página que solicite una dirección de correo electrónico para enviar un mensaje. ¿Cómo se puede dirigir a una página específica y mostrarla en el diseño de ng-admin?
Consulte el capítulo dedicado Agregar páginas personalizadas.
Cuando asigna un campo entre una respuesta de API REST y ng-admin, le asigna un tipo. Este tipo determina cómo se muestran y editan los datos. Es muy fácil personalizar los tipos de ng-admin existentes y agregar otros nuevos.
Consulte el capítulo dedicado Agregar tipos personalizados.
Para crear la fuente ng-admin con las dependencias que necesita y obtener sugerencias sobre cómo mejorar el rendimiento, diríjase al capítulo dedicado Preparándose para la producción.
Siga el blog de marmelab para obtener noticias sobre ng-admin (tutoriales, complementos, nuevos lanzamientos, etc.).
También debe consultar la página de lanzamiento de ng-admin en GitHub para ver anuncios sobre nuevos lanzamientos y completar el registro de cambios.
Ng-admin es un proyecto de código abierto, con una comunidad cada día más grande. Recibirá ayuda solicitándola cortésmente en cualquiera de los siguientes canales:
Proporcione todo el contexto posible, incluido un fragmento de configuración del administrador y la respuesta de la API que está asignando.
marmelab/admin-on-rest, del mismo equipo, utiliza una arquitectura diferente pero proporciona un servicio similar: una GUI de administración para las API REST, esta vez con React.js, Redux, react-router y material UI.
Sus comentarios sobre el uso de ng-admin en su contexto específico son valiosos; no dude en abrir Problemas de GitHub para cualquier problema o pregunta que pueda tener.
Todas las contribuciones son bienvenidas: envíenos una solicitud de extracción para cualquier característica nueva/corrección de errores en su bifurcación que considere que vale la pena devolver.
Además, si tiene alguna experiencia con ng-admin, responda las preguntas de los recién llegados en cualquiera de los canales de soporte (ver arriba).
Instale las dependencias de npm (para pruebas) llamando al destino install :
make installPara probar sus cambios, ejecute la aplicación de ejemplo, que se incluye con una API REST de muestra, llamando a:
make run Luego, conéctese a http://localhost:8000/ para explorar la aplicación de administración. Esta tarea utiliza webpack-dev-server, lo que significa que el navegador recargará la página tan pronto como se actualice un archivo en la fuente. Esto hace que la aplicación de blog sea nuestro entorno de prueba en vivo preferido.
ng-admin tiene pruebas unitarias (impulsadas por karma) y pruebas de extremo a extremo (impulsadas por transportador). Inicie todo el conjunto de pruebas llamando a:
make testConsejo: si está trabajando en pruebas de Karma, puede evitar reiniciar todo el proceso deshabilitando la ejecución única:
./node_modules/.bin/karma start src/javascripts/test/karma.conf.js
Antes de lanzar una nueva versión, concatene y minimice las fuentes JS y CSS en scripts minimizados con:
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 publishConsejo : no confirme archivos creados en solicitudes de extracción, ya que obliga a realizar cambios de base en otros RP. El equipo central se encargará de actualizar periódicamente estos archivos creados.
ng-admin tiene la licencia MIT y está patrocinado por marmelab.
