{"id":13463663,"url":"https://github.com/marmelab/ng-admin","last_synced_at":"2025-05-14T06:12:21.502Z","repository":{"id":17289092,"uuid":"20059361","full_name":"marmelab/ng-admin","owner":"marmelab","description":"Add an AngularJS admin GUI to any RESTful API","archived":false,"fork":false,"pushed_at":"2020-06-01T07:58:30.000Z","size":72617,"stargazers_count":3937,"open_issues_count":111,"forks_count":721,"subscribers_count":194,"default_branch":"master","last_synced_at":"2025-05-08T18:11:24.404Z","etag":null,"topics":["admin","admin-dashboard","angular","ng-admin","rest"],"latest_commit_sha":null,"homepage":"http://ng-admin-book.marmelab.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marmelab.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-05-22T12:00:10.000Z","updated_at":"2025-04-07T11:51:38.000Z","dependencies_parsed_at":"2022-08-29T14:50:20.614Z","dependency_job_id":null,"html_url":"https://github.com/marmelab/ng-admin","commit_stats":null,"previous_names":[],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marmelab%2Fng-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marmelab%2Fng-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marmelab%2Fng-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marmelab%2Fng-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marmelab","download_url":"https://codeload.github.com/marmelab/ng-admin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254080388,"owners_count":22011391,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin","admin-dashboard","angular","ng-admin","rest"],"created_at":"2024-07-31T14:00:25.925Z","updated_at":"2025-05-14T06:12:21.436Z","avatar_url":"https://github.com/marmelab.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Miscellaneous","angular","HarmonyOS","Web Development"],"sub_categories":["Public REST APIs To Use In Tests","Windows Manager","Angular"],"readme":"ng-admin [![Build Status](https://travis-ci.org/marmelab/ng-admin.svg?branch=master)](https://travis-ci.org/marmelab/ng-admin)\n========\n\n[![Join the chat at https://gitter.im/marmelab/ng-admin](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/marmelab/ng-admin?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nPlug me to your RESTFul API to get a complete administration interface (datagrid, filters, complex form widgets, multi-model relationships, dashboard) in no time! Beyond simple CRUD, ng-admin lets you build sophisticated GUIs without getting in your way.\n\n[![Screencast](https://static.marmelab.com/ng-admin-09-video-thumbnail.png)](https://vimeo.com/143909685)\n\n* [Online demo](http://marmelab.com/ng-admin-demo/) ([source](https://github.com/marmelab/ng-admin-demo))\n* [Documentation](http://ng-admin-book.marmelab.com/)\n\n**This project is now in maintenance mode. We've rebuilt it from scratch with React.js (the new project is called [react-admin](https://github.com/marmelab/react-admin)), and we're putting all our efforts on the React version.**\n\n## Installation\n\nThe current ng-admin version (master) depends on Angular.js 1.6. If you need compatibility with Angular 1.3, use [ng-admin 0.9](https://github.com/marmelab/ng-admin/releases/tag/v0.9.1).\n\nGrab ng-admin from your favorite package manager:\n\n```sh\nnpm install ng-admin --save\n# or\nyarn add ng-admin\n```\n\n### With a Module Bundler\n\n`ng-admin` is fully compatible with Webpack, and should also be compatible with all\navailable major module bundlers. If you use one of them, you just have to add this line:\n\n``` js\nconst myApp = angular.module('myApp', [\n    require('ng-admin'),\n    // ...\n]);\n```\n\n**Important note:** as we include HTML templates using `require` to prevent the AJAX\nrequest implied by `templateUrl`, you will need to configure your module bundler\nto deal with HTML. It can be accomplished with Webpack using the HTML loader:\n\n``` js\nmodule.exports = {\n    // ...\n    module: {\n        loaders: [\n            // ...\n            { test: /\\.html$/, loader: 'html' },\n        ]\n    },\n};\n```\n\nIf your module bundler also supports SASS or CSS, you can also include stylesheets using:\n\n``` js\n// SASS version\nrequire('ng-admin/lib/sass/ng-admin.scss');\n\n// CSS version\nrequire('ng-admin/build/ng-admin.min.css');\n```\n\nUsing a module bundler, you would also be able to generate the source map for all your JavaScript\nand stylesheets, helping you to hunt even the most obscure bugs.\n\n### Without a Module Bundler\n\nIf you don't have a module bundler, don't worry: you can still include `ng-admin` with a `\u003cscript\u003e` tag:\n\n``` html\n\u003clink rel=\"stylesheet\" href=\"node_modules/ng-admin/build/ng-admin.min.css\"\u003e\n\u003cscript src=\"node_modules/ng-admin/build/ng-admin.min.js\"\u003e\u003c/script\u003e\n```\n\n## Bootstrapping your Admin\n\nAdd the `ng-admin.min.css` and `ng-admin.min.js` to the HTML, add a `\u003cdiv ui-view=\"ng-admin\"\u003e`, and configure the admin:\n\n``` html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eMy First Admin\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"node_modules/ng-admin/build/ng-admin.min.css\"\u003e\n  \u003c/head\u003e\n  \u003cbody ng-app=\"myApp\"\u003e\n    \u003cdiv ui-view=\"ng-admin\"\u003e\u003c/div\u003e\n    \u003cscript src=\"node_modules/ng-admin/build/ng-admin.min.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\"\u003e\n    var myApp = angular.module('myApp', ['ng-admin']);\n    myApp.config(['NgAdminConfigurationProvider', function(NgAdminConfigurationProvider) {\n        var nga = NgAdminConfigurationProvider;\n        // create an admin application\n        var admin = nga.application('My First Admin');\n        // more configuration here later\n        // ...\n        // attach the admin application to the DOM and run it\n        nga.configure(admin);\n    }]);\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Getting Started\n\nSee the [Getting Started](doc/Getting-started.md) dedicated chapter for a step-by-step tutorial aimed at beginners.\n\n## Usage Examples\n\n* You can find a simple configuration in the [blog admin demo](examples/blog/config.js), where the entities are posts, comments, and tags. The remote REST API is simulated in the browser, using [FakeRest](https://github.com/marmelab/FakeRest).\n* The [Posters Galore demo](http://marmelab.com/ng-admin-demo/) ([source](https://github.com/marmelab/ng-admin-demo)) is a more complete example of an e-commerce administration, with custom authentication, pages, directives and modules, all well organized via WebPack. The remote REST API is also simulated in the browser, using [FakeRest](https://github.com/marmelab/FakeRest).\n\n## Configuration Reference\n\nAn administration in ng-admin is made of one *application* containing several *entities*. Each entity has up to 5 *views*, and each view has many *fields*.\n\n```\napplication\n |-header\n |-menu\n |-dashboard\n |-entity[]\n    |-creationView\n    |-editionView\n    |-deletionView\n    |-showView\n    |-listView\n        |-field[]\n           |-name\n           |-type\n```\n\nSee [Configuration API Reference](doc/Configuration-reference.md) dedicated chapter for more details.\n\n**Tip**: You won't find the related classes in the ng-admin project. In fact, the admin configuration API exists as a standalone, framework-agnostic library, called [admin-config](https://github.com/marmelab/admin-config). Don't hesitate to browse the source of that library to learn more.\n\n## Relationships\n\nNg-admin supports relationships between entities in read and write views, and provides specialized field types for that: `reference`, `referenced_list`, `reference_many`, and `embedded_list`. The [Relationships Reference chapter](doc/Relationships.md) describes in more details which field type to use for which case.\n\nAlso, the Fields section of the [Configuration API Reference chapter](doc/Configuration-reference.md) has a list of all settings for each of these field types.\n\n## Menu Configuration\n\nBy default, ng-admin creates a sidebar menu with one entry per entity. If you want to customize this sidebar (labels, icons, order, adding submenus, etc), you have to define menus manually.\n\nSee [Menus Configuration](doc/Menus.md) dedicated chapter.\n\n## Dashboard Configuration\n\nThe home page of a ng-admin application is called the Dashboard. Use it to show important pieces of information to the end user, such as latest entries, or charts.\n\nSee [Dashboard Configuration](doc/Dashboard.md) dedicated chapter.\n\n## Customizing the API Mapping\n\nAll HTTP requests made by ng-admin to your REST API are carried out by [Restangular](https://github.com/mgonto/restangular), which is like `$resource` on steroids.\n\nThe REST specification doesn't provide enough detail to cover all requirements of an administration GUI. ng-admin makes some assumptions about how your API is designed. All of these assumptions can be overridden by way of [Restangular's request and response interceptors](https://github.com/mgonto/restangular#addresponseinterceptor).\n\nThat means you don't need to adapt your API to ng-admin; ng-admin can adapt to any REST API, thanks to the flexibility of Restangular.\n\nSee the [Customizing the API Mapping](doc/API-mapping.md) dedicated chapter.\n\n## Theming\n\nYou can override pretty much all the HTML generated by ng-admin, at different levels.\n\nSee the [Theming](doc/Theming.md) dedicated chapter.\n\n## Translation\n\nThe ng-admin interface uses English as the default language, but supports switching to another language, thanks to [angular-translate](https://angular-translate.github.io/).\n\nSee the [Translation](doc/Translation.md) dedicated chapter.\n\n## Adding Custom Pages\n\nFor each entity, ng-admin creates the necessary pages for Creating, Retrieving, Updating, and Deleting (CRUD) this entity. When you need to achieve more specific actions on an entity, you have to add a custom page - for instance a page asking for an email address to send a message to. How can you route to a specific page and display it in the ng-admin layout?\n\nSee the [Adding Custom Pages](doc/Custom-pages.md) dedicated chapter.\n\n## Adding Custom Types\n\nWhen you map a field between a REST API response and ng-admin, you give it a type. This type determines how the data is displayed and edited. It is very easy to customize existing ng-admin types and add new ones.\n\nSee the [Adding Custom Types](doc/Custom-types.md) dedicated chapter.\n\n## Getting Ready For Production\n\nTo build the ng-admin source with the dependencies you need, and to get hints about performance boosters, head to the [Getting Ready For Production](doc/Production.md) dedicated chapter.\n\n## News\n\nFollow the [marmelab blog](http://marmelab.com/blog/) for news about ng-admin (tutorials, plugins, new releases, etc).\n\nYou should also watch the [ng-admin release page on GitHub](https://github.com/marmelab/ng-admin/releases) for announcements on new releases, and complete changelog.\n\n## Support\n\nNg-admin is an open-source project, with a community getting larger every  day. You will get help by asking politely in any the following channels:\n\n* [StackOverflow](http://stackoverflow.com/questions/tagged/ng-admin)\n* [Gitter (live chat)](https://gitter.im/marmelab/ng-admin) [![Join the chat at https://gitter.im/marmelab/ng-admin](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/marmelab/ng-admin?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\nPlease give as much context as possible, including and admin configuration snippet, and the response from the API you're mapping.\n\n## Looking For a Material UI / React.js version?\n\n[marmelab/admin-on-rest](https://github.com/marmelab/admin-on-rest), by the same team, uses a different architecture but provides a similar service: an admin GUI for REST APIs, this time with React.js, Redux, react-router, and material UI.\n\n## Contributing\n\nYour feedback about the usage of ng-admin in your specific context is valuable, don't hesitate to [open GitHub Issues](https://github.com/marmelab/ng-admin/issues) for any problem or question you may have.\n\nAll contributions are welcome: please send us a Pull Request for any new feature / bug fix in your fork that you consider worth giving back.\n\nAlso, if you have some experience with ng-admin, please answer questions from newcomers in any of the support channels (see above).\n\n### Installing Dependencies\n\nInstall npm dependencies (for tests) by calling the `install` target:\n\n```sh\nmake install\n```\n\n### Running the example app\n\nTo test your changes, run the example app, which is bundled with a sample REST api, by calling:\n\n```sh\nmake run\n```\n\nThen, connect to `http://localhost:8000/` to browse the admin app. This task uses webpack-dev-server, which means that the browser will reload the page as soon as one file in the source is updated. This makes the blog app our preferred live testing environment.\n\n### Testing\n\nng-admin has unit tests (powered by karma) and end to end tests (powered by protractor). Launch the entire tests suite by calling:\n\n```sh\nmake test\n```\n\n**Tip:** If you are working on Karma tests, you can prevent from relaunching the whole process by disabling single-run:\n\n```\n./node_modules/.bin/karma start src/javascripts/test/karma.conf.js\n```\n\n### Releasing\n\nBefore releasing a new version, concatenate and minify the JS and CSS sources into minified scripts with:\n\n```sh\nmake build\ngit add build\ngit commit -m 'update built files'\ngit push origin master\ngit tag vx.x.x\n# create a new tag\ngit push origin --tags\n# publish to npm\nnpm publish\n```\n\n**Tip**: Don't commit built files in Pull Requests, it forces rebases on other PRs. The core team will take care of regularly updating these built files.\n\n## License\n\nng-admin is licensed under the [MIT Licence](LICENSE), and sponsored by [marmelab](http://marmelab.com).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarmelab%2Fng-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarmelab%2Fng-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarmelab%2Fng-admin/lists"}