<!DOCTYPE html>
<html>
<head>
<link data-require="ng-admin@0.0.1" data-semver="0.0.1" rel="stylesheet" href="https://unpkg.com/ng-admin/build/ng-admin.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ng-admin@0.0.1" data-semver="0.0.1" src="https://unpkg.com/ng-admin/build/ng-admin.min.js"></script>
<script data-require="angular-mocks@*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.7/angular-mocks.js"></script>
<script src="script.js"></script>
<script src="backend.js"></script>
</head>
<body ng-app="myApp">
<div ui-view="ng-admin"></div>
</body>
</html>
// Code goes here
var myApp = angular.module('myApp', ['ng-admin']);
myApp.config(['NgAdminConfigurationProvider', function(NgAdminConfigurationProvider) {
var nga = NgAdminConfigurationProvider;
// create an admin application
var admin = nga.application('My Ng-Admin Panel')
.baseApiUrl('/api/');
var users = nga.entity('users');
var perms = nga.entity('perms');
var avatar_48 = '<img src="{{entry.values.profil_pic}}" height="48" width="48"/>'
var avatar_64 = '<img style="margin: 0 auto; display: block;" src="{{entry.values.profil_pic}}" height="64" width="64"/>'
users.listView()
.fields([
nga.field('profil_pic', 'template')
.label('')
.template(avatar_48),
nga.field('name')
.isDetailLink(true),
nga.field('email'),
nga.field('permissions', 'reference_many')
.targetEntity(perms)
.targetField(nga.field('name')),
])
.perPage(2)
.infinitePagination(false)
.filters([nga.field('name')])
.listActions(['show', 'edit', 'delete']);
users.showView()
.fields([
nga.field('profil_pic', 'template')
.label('')
.template(avatar_64),
nga.field('name'),
nga.field('email'),
nga.field('permissions', 'reference_many')
.targetEntity(perms)
.targetField(nga.field('name')),
])
users.editionView()
.fields([
nga.field('profil_pic', 'template')
.label('Profil image url')
.template(avatar_64),
nga.field('name'),
nga.field('email'),
nga.field('profil_pic'),
nga.field('permissions', 'reference_many')
.targetEntity(perms)
.targetField(nga.field('name'))
])
users.creationView()
.fields([
nga.field('profil_pic', 'template')
.label('Profil image url')
.template(avatar_64),
nga.field('name'),
nga.field('email'),
nga.field('profil_pic'),
nga.field('permissions', 'reference_many')
.targetEntity(perms)
.targetField(nga.field('name'))
])
perms.listView()
.fields([
nga.field('name')
.isDetailLink(true),
nga.field('gid')
]);
perms.showView()
.fields([
nga.field('name')
.isDetailLink(true),
nga.field('gid')
]);
perms.editionView()
.fields([
nga.field('name'),
nga.field('gid', 'number'),
])
perms.creationView()
.fields([
nga.field('name'),
nga.field('gid', 'number'),
])
admin.addEntity(users)
admin.addEntity(perms)
nga.configure(admin);
}])
.config(function(RestangularProvider){
/* RestangularProvider.addFullRequestInterceptor(function(element, operation, what, url, headers, params, httpConfig){
console.log('url encoded:', encodeURIComponent(url))
if (operation == 'get') return {url:encodeURIComponent(url)}
})*/
})
/* Styles go here */
# Ng-admin sample.
A simple app that show how ng-admin works. Use it if you want to expose issue.
Ng-admin version : master
Angular : 1.5.5
Angular-mocks : 1.3.5
### script.js :
Define ng-admin app configuration and model/relation of the backend.
### backend.js :
Define data to simulate server. Modify this file to create new schema.
angular.module('myApp')
.config(function($provide) {
$provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
})
.run(function($httpBackend) {
var models = {
users:[
{
id: '1',
profil_pic:"http://www.free-icons-download.net/images/user-icon-44709.png",
name: 'John',
email: 'toto@admin',
permissions: ["1","2","3"],
},
{
id: 2,
profil_pic:"http://www.icone-png.com/png/54/53782.png",
name: 'Cathy',
email: 'cathy@operator',
permissions: ["2","3"],
},
{
id: 3,
profil_pic:"http://www.hit4hit.org/img/login/user-icon-6.png",
name: 'Edouard',
email: 'edouard@customer',
permissions: ["3"],
},
{
id: 4,
profil_pic:"http://www.hit4hit.org/img/login/user-icon-6.png",
name: 'test',
email: 'test@fake',
permissions: ["3"],
}
],
perms:[
{
id: "1",
name: 'ADMIN',
gid: 1000,
},
{
id: "2",
name: 'MODERATOR',
gid: 100,
},
{
id: "3",
name: 'USER',
gid: 10,
},
{
id: "4",
name: 'TEST',
gid: 1,
}
]
}
var _getModelId = function(url){
var regex = /^\/api\/([a-z]+)\/?(.+)?/g;
var regex_result = regex.exec(url);
var model = regex_result[1];
var id = null
if (regex_result.length > 2)
id = regex_result[2];
return {model: model, id: id}
}
var findOne = function(method, url){
console.log('@http:', method, url)
var obj = _getModelId(url)
var result = models[obj.model].filter(function(item){
return item.id == obj.id
})
delete result.id
return [200, result[0]]
}
var deleteOne = function(method, url){
console.log('@http:', method, url)
var obj = _getModelId(url)
for (var i = 0, l = models[obj.model].length; i < l; i++) {
console.log('blah:', models[obj.model][i].id, obj.id)
if (models[obj.model][i].id == obj.id) {
models[obj.model].splice(i, 1);
break;
}
}
return [204];
}
var createOne = function(method, url, data){
console.log('@http:', method, url, data)
var obj = _getModelId(url)
var newItem = JSON.parse(data)
newItem.id = models[obj.model].length + 1
models[obj.model].push(newItem)
return [201, newItem]
}
var updateOne = function(method, url, data){
console.log('@http:', method, url, data)
var obj = _getModelId(url)
var item = JSON.parse(data);
for (var i = 0, l = models[obj.model].length; i < l; i++) {
if (models[obj.model][i].id == obj.id) {
models[obj.model][i] = item;
break;
}
}
return [200, item];
}
$httpBackend.whenGET(/^\/api\/users\?.+/).respond(200, models.users)
$httpBackend.whenGET(/^\/api\/users\/.+$/).respond(findOne);
$httpBackend.whenPOST(/^\/api\/users/).respond(createOne)
$httpBackend.whenDELETE(/^\/api\/users\/\d+$/).respond(deleteOne);
$httpBackend.whenPUT(/^\/api\/users\/\d+$/).respond(updateOne)
$httpBackend.whenGET(/^\/api\/perms\?.+/).respond(200, models.perms)
$httpBackend.whenGET(/^\/api\/perms\/\d+$/).respond(findOne);
$httpBackend.whenPOST(/^\/api\/perms/).respond(createOne)
$httpBackend.whenDELETE(/^\/api\/perms\/\d+$/).respond(deleteOne);
$httpBackend.whenPUT(/^\/api\/perms\/\d+$/).respond(updateOne)
$httpBackend.whenGET(/\.html/).passThrough();
});