将我插入您的 RESTFul API,即可立即获得完整的管理界面(数据网格、过滤器、复杂表单小部件、多模型关系、仪表板)!除了简单的 CRUD 之外,ng-admin 还可以让您构建复杂的 GUI,而不会妨碍您。
该项目目前处于维护模式。我们用React.js从头开始重建它(新项目称为react-admin),并且我们将所有精力都放在React版本上。
当前的 ng-admin 版本(master)依赖于 Angular.js 1.6。如果您需要与 Angular 1.3 兼容,请使用 ng-admin 0.9。
从您最喜欢的包管理器中获取 ng-admin:
npm install ng-admin --save
# or
yarn add ng-admin
ng-admin
与 Webpack 完全兼容,并且还应该与所有可用的主要模块捆绑器兼容。如果您使用其中之一,则只需添加这一行:
const myApp = angular . module ( 'myApp' , [
require ( 'ng-admin' ) ,
// ...
] ) ;
重要提示:由于我们使用require
包含 HTML 模板来防止templateUrl
隐含的 AJAX 请求,因此您需要配置模块捆绑器来处理 HTML。可以使用 HTML 加载器通过 Webpack 来完成:
module . exports = {
// ...
module : {
loaders : [
// ...
{ test : / .html$ / , loader : 'html' } ,
]
} ,
} ;
如果您的模块捆绑器还支持 SASS 或 CSS,您还可以使用以下方式包含样式表:
// SASS version
require ( 'ng-admin/lib/sass/ng-admin.scss' ) ;
// CSS version
require ( 'ng-admin/build/ng-admin.min.css' ) ;
使用模块捆绑器,您还可以为所有 JavaScript 和样式表生成源映射,帮助您寻找最隐蔽的错误。
如果您没有模块捆绑器,请不要担心:您仍然可以使用<script>
标签包含ng-admin
:
< 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 >
将ng-admin.min.css
和ng-admin.min.js
添加到 HTML,添加<div ui-view="ng-admin">
,并配置管理:
<!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 >
请参阅入门专用章节,了解针对初学者的分步教程。
ng-admin 中的管理由包含多个实体的一个应用程序组成。每个实体最多有 5 个视图,每个视图有许多字段。
application
|-header
|-menu
|-dashboard
|-entity[]
|-creationView
|-editionView
|-deletionView
|-showView
|-listView
|-field[]
|-name
|-type
有关更多详细信息,请参阅配置 API 参考专用章节。
提示:您在 ng-admin 项目中找不到相关的类。事实上,管理配置 API 作为一个独立的、与框架无关的库存在,称为 admin-config。请随时浏览该库的源代码以了解更多信息。
NG-admin 支持读写视图中实体之间的关系,并为此提供专门的字段类型: reference
、 referenced_list
、 reference_many
和embedded_list
。关系参考章节更详细地描述了哪种情况使用哪种字段类型。
此外,“配置 API 参考”一章的“字段”部分还列出了每种字段类型的所有设置。
默认情况下,ng-admin 创建一个侧边栏菜单,每个实体一个条目。如果您想自定义此侧边栏(标签、图标、顺序、添加子菜单等),则必须手动定义菜单。
请参阅菜单配置专门章节。
ng-admin 应用程序的主页称为仪表板。使用它向最终用户显示重要信息,例如最新条目或图表。
请参阅仪表板配置专门章节。
ng-admin 向 REST API 发出的所有 HTTP 请求均由 Restangular 执行,这就像类固醇上的$resource
一样。
REST 规范没有提供足够的细节来涵盖管理 GUI 的所有要求。 ng-admin 对 API 的设计方式做出了一些假设。所有这些假设都可以通过 Restangular 的请求和响应拦截器来覆盖。
这意味着您不需要使 API 适应 ng-admin;得益于 Restangular 的灵活性,ng-admin 可以适应任何 REST API。
请参阅自定义 API 映射专门章节。
您可以在不同级别覆盖几乎所有由 ng-admin 生成的 HTML。
请参阅主题化专门章节。
ng-admin 界面使用英语作为默认语言,但由于 Angular-Translate,支持切换到另一种语言。
请参阅翻译专门章节。
对于每个实体,ng-admin 都会创建用于创建、检索、更新和删除 (CRUD) 该实体所需的页面。当您需要在实体上实现更具体的操作时,您必须添加自定义页面 - 例如询问电子邮件地址以发送消息的页面。如何路由到特定页面并将其显示在 ng-admin 布局中?
请参阅“添加自定义页面”专门章节。
当您在 REST API 响应和 ng-admin 之间映射字段时,您需要为其指定一个类型。此类型决定数据的显示和编辑方式。自定义现有的 ng-admin 类型并添加新类型非常容易。
请参阅“添加自定义类型”专门章节。
要使用所需的依赖项构建 ng-admin 源代码,并获取有关性能增强器的提示,请参阅准备生产专用章节。
关注 marmelab 博客,了解有关 ng-admin 的新闻(教程、插件、新版本等)。
您还应该查看 GitHub 上的 ng-admin 发布页面,了解新版本的公告并完成变更日志。
NG-admin 是一个开源项目,社区日益壮大。您可以通过以下任何渠道礼貌地询问来获得帮助:
请提供尽可能多的上下文,包括管理配置片段以及您正在映射的 API 的响应。
marmelab/admin-on-rest 由同一团队开发,使用不同的架构,但提供类似的服务:REST API 的管理 GUI,这次使用 React.js、Redux、react-router 和 Material UI。
您关于在您的特定上下文中使用 ng-admin 的反馈非常有价值,如果您遇到任何问题或疑问,请随时打开 GitHub Issues。
欢迎所有贡献:请向我们发送 Pull 请求,了解您的分叉中您认为值得回馈的任何新功能/错误修复。
另外,如果您对 ng-admin 有一定的经验,请在任何支持渠道中回答新人提出的问题(见上文)。
通过调用install
目标来安装 npm 依赖项(用于测试):
make install
要测试您的更改,请运行示例应用程序,该应用程序与示例 REST API 捆绑在一起,方法是调用:
make run
然后,连接到http://localhost:8000/
浏览管理应用程序。此任务使用 webpack-dev-server,这意味着只要源中的一个文件更新,浏览器就会重新加载页面。这使得博客应用程序成为我们首选的实时测试环境。
ng-admin 具有单元测试(由 karma 提供支持)和端到端测试(由 Protractor 提供支持)。通过调用以下命令启动整个测试套件:
make test
提示:如果您正在进行 Karma 测试,您可以通过禁用单次运行来防止重新启动整个过程:
./node_modules/.bin/karma start src/javascripts/test/karma.conf.js
在发布新版本之前,请使用以下命令将 JS 和 CSS 源连接并缩小为缩小的脚本:
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 publish
提示:不要在 Pull Request 中提交构建的文件,它会强制在其他 PR 上重新建立基础。核心团队将负责定期更新这些构建的文件。
ng-admin 根据 MIT 许可证获得许可,并由 marmelab 赞助。