ng admin
v1.0.7
Conecte-me à sua API RESTFul para obter uma interface de administração completa (datagrid, filtros, widgets de formulários complexos, relacionamentos multimodelos, painel) rapidamente! Além do simples CRUD, o ng-admin permite criar GUIs sofisticadas sem atrapalhar.
Este projeto está agora em modo de manutenção. Nós o reconstruímos do zero com React.js (o novo projeto se chama react-admin) e estamos colocando todos os nossos esforços na versão React.
A versão atual do ng-admin (mestre) depende do Angular.js 1.6. Se você precisar de compatibilidade com Angular 1.3, use ng-admin 0.9.
Pegue ng-admin do seu gerenciador de pacotes favorito:
npm install ng-admin --save
# or
yarn add ng-admin ng-admin é totalmente compatível com Webpack e também deve ser compatível com todos os principais pacotes de módulos disponíveis. Se você usar um deles, basta adicionar esta linha:
const myApp = angular . module ( 'myApp' , [
require ( 'ng-admin' ) ,
// ...
] ) ; Nota importante: como incluímos modelos HTML usando require para evitar a solicitação AJAX implícita em templateUrl , você precisará configurar seu empacotador de módulo para lidar com HTML. Isso pode ser feito com Webpack usando o carregador HTML:
module . exports = {
// ...
module : {
loaders : [
// ...
{ test : / .html$ / , loader : 'html' } ,
]
} ,
} ;Se o seu empacotador de módulo também suportar SASS ou CSS, você também poderá incluir folhas de estilo usando:
// SASS version
require ( 'ng-admin/lib/sass/ng-admin.scss' ) ;
// CSS version
require ( 'ng-admin/build/ng-admin.min.css' ) ;Usando um empacotador de módulo, você também seria capaz de gerar o mapa de origem para todo o seu JavaScript e folhas de estilo, ajudando você a caçar até mesmo os bugs mais obscuros.
Se você não possui um empacotador de módulo, não se preocupe: você ainda pode incluir ng-admin com uma tag <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 > Adicione ng-admin.min.css e ng-admin.min.js ao HTML, adicione um <div ui-view="ng-admin"> e configure o 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 o capítulo dedicado a Primeiros passos para obter um tutorial passo a passo voltado para iniciantes.
Uma administração no ng-admin é feita de um aplicativo contendo diversas entidades . Cada entidade possui até cinco visualizações e cada visualização possui vários campos .
application
|-header
|-menu
|-dashboard
|-entity[]
|-creationView
|-editionView
|-deletionView
|-showView
|-listView
|-field[]
|-name
|-type
Consulte o capítulo dedicado à Referência da API de configuração para obter mais detalhes.
Dica : você não encontrará as classes relacionadas no projeto ng-admin. Na verdade, a API de configuração administrativa existe como uma biblioteca independente e independente de estrutura, chamada admin-config. Não hesite em navegar na fonte dessa biblioteca para saber mais.
Ng-admin oferece suporte a relacionamentos entre entidades em visualizações de leitura e gravação e fornece tipos de campos especializados para isso: reference , referenced_list , reference_many e embedded_list . O capítulo Referência de Relacionamentos descreve com mais detalhes qual tipo de campo usar em cada caso.
Além disso, a seção Campos do capítulo Referência da API de configuração possui uma lista de todas as configurações para cada um desses tipos de campo.
Por padrão, ng-admin cria um menu na barra lateral com uma entrada por entidade. Se você deseja personalizar esta barra lateral (rótulos, ícones, ordem, adição de submenus, etc), você deve definir os menus manualmente.
Consulte o capítulo dedicado à Configuração dos Menus.
A página inicial de um aplicativo ng-admin é chamada de Dashboard. Use-o para mostrar informações importantes ao usuário final, como entradas mais recentes ou gráficos.
Consulte o capítulo dedicado à Configuração do Dashboard.
Todas as solicitações HTTP feitas por ng-admin para sua API REST são realizadas por Restangular, que é como $resource em esteróides.
A especificação REST não fornece detalhes suficientes para cobrir todos os requisitos de uma GUI de administração. ng-admin faz algumas suposições sobre como sua API foi projetada. Todas essas suposições podem ser substituídas por meio dos interceptadores de solicitação e resposta do Restangular.
Isso significa que você não precisa adaptar sua API ao ng-admin; ng-admin pode se adaptar a qualquer API REST, graças à flexibilidade do Retangular.
Consulte o capítulo dedicado Personalizando o mapeamento de API.
Você pode substituir praticamente todo o HTML gerado pelo ng-admin, em diferentes níveis.
Veja o capítulo dedicado ao tema.
A interface ng-admin usa o inglês como idioma padrão, mas suporta a mudança para outro idioma, graças ao angular-translate.
Veja o capítulo dedicado à Tradução.
Para cada entidade, ng-admin cria as páginas necessárias para criar, recuperar, atualizar e excluir (CRUD) esta entidade. Quando você precisar realizar ações mais específicas em uma entidade, será necessário adicionar uma página personalizada - por exemplo, uma página solicitando um endereço de e-mail para o qual enviar uma mensagem. Como você pode direcionar para uma página específica e exibi-la no layout ng-admin?
Consulte o capítulo dedicado Adicionando páginas personalizadas.
Ao mapear um campo entre uma resposta da API REST e ng-admin, você atribui um tipo a ele. Este tipo determina como os dados são exibidos e editados. É muito fácil personalizar os tipos de ng-admin existentes e adicionar novos.
Consulte o capítulo dedicado Adicionando tipos personalizados.
Para construir o código-fonte ng-admin com as dependências necessárias e obter dicas sobre impulsionadores de desempenho, vá para o capítulo dedicado Preparando-se para produção.
Acompanhe o blog do marmelab para novidades sobre o ng-admin (tutoriais, plugins, novos lançamentos, etc).
Você também deve assistir à página de lançamento do ng-admin no GitHub para anúncios sobre novos lançamentos e completar o changelog.
Ng-admin é um projeto de código aberto, com uma comunidade cada vez maior. Você receberá ajuda perguntando educadamente em qualquer um dos seguintes canais:
Forneça o máximo de contexto possível, incluindo um snippet de configuração administrativa e a resposta da API que você está mapeando.
marmelab/admin-on-rest, da mesma equipe, usa uma arquitetura diferente, mas fornece um serviço semelhante: uma GUI de administração para APIs REST, desta vez com React.js, Redux, react-router e material UI.
Seu feedback sobre o uso do ng-admin em seu contexto específico é valioso. Não hesite em abrir o GitHub Issues para qualquer problema ou dúvida que você possa ter.
Todas as contribuições são bem-vindas: envie-nos uma solicitação pull para qualquer novo recurso/correção de bug em seu fork que você considere que vale a pena retribuir.
Além disso, se você tiver alguma experiência com ng-admin, responda às perguntas dos novatos em qualquer um dos canais de suporte (veja acima).
Instale dependências npm (para testes) chamando o destino install :
make installPara testar suas alterações, execute o aplicativo de exemplo, que vem com uma API REST de amostra, chamando:
make run Em seguida, conecte-se a http://localhost:8000/ para navegar no aplicativo de administração. Esta tarefa usa webpack-dev-server, o que significa que o navegador irá recarregar a página assim que um arquivo na fonte for atualizado. Isso torna o aplicativo de blog nosso ambiente de teste ao vivo preferido.
ng-admin possui testes de unidade (alimentados por karma) e testes ponta a ponta (alimentados por transferidor). Inicie todo o conjunto de testes chamando:
make testDica: Se você estiver trabalhando em testes de Karma, poderá evitar o relançamento de todo o processo desativando a execução única:
./node_modules/.bin/karma start src/javascripts/test/karma.conf.js
Antes de lançar uma nova versão, concatene e reduza as fontes JS e CSS em scripts reduzidos com:
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 publishDica : não comprometa arquivos construídos em solicitações pull, pois isso força rebases em outros PRs. A equipe principal se encarregará de atualizar regularmente esses arquivos construídos.
ng-admin é licenciado sob a licença MIT e patrocinado pela marmelab.
