ng admin
v1.0.7
RESTFul API에 연결하여 즉시 완전한 관리 인터페이스(데이터 그리드, 필터, 복잡한 양식 위젯, 다중 모델 관계, 대시보드)를 얻으세요! 단순한 CRUD 외에도 ng-admin을 사용하면 방해받지 않고 정교한 GUI를 구축할 수 있습니다.
이 프로젝트는 현재 유지 관리 모드에 있습니다. 우리는 React.js를 사용하여 처음부터 다시 빌드했으며(새 프로젝트는 React-admin이라고 함) React 버전에 모든 노력을 쏟고 있습니다.
현재 ng-admin 버전(마스터)은 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' ) ,
// ...
] ) ; 중요 참고 사항: templateUrl 이 암시하는 AJAX 요청을 방지하기 위해 require 사용하는 HTML 템플릿을 포함하므로 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에 맞게 조정할 필요가 없습니다. ng-admin은 Restangular의 유연성 덕분에 모든 REST API에 적응할 수 있습니다.
API 매핑 사용자 정의 관련 장을 참조하세요.
다양한 수준에서 ng-admin이 생성한 거의 모든 HTML을 재정의할 수 있습니다.
테마 관련 장을 참조하세요.
ng-admin 인터페이스는 영어를 기본 언어로 사용하지만 각도 번역 덕분에 다른 언어로의 전환을 지원합니다.
번역 관련 장을 참조하세요.
각 엔터티에 대해 ng-admin은 이 엔터티를 생성, 검색, 업데이트 및 삭제(CRUD)하는 데 필요한 페이지를 만듭니다. 엔터티에 대해 보다 구체적인 작업을 수행해야 하는 경우 사용자 지정 페이지(예: 메시지를 보낼 이메일 주소를 묻는 페이지)를 추가해야 합니다. 어떻게 특정 페이지로 라우팅하고 이를 ng-admin 레이아웃에 표시할 수 있나요?
사용자 정의 페이지 추가 관련 장을 참조하세요.
REST API 응답과 ng-admin 사이에 필드를 매핑할 때 유형을 지정합니다. 이 유형에 따라 데이터가 표시되고 편집되는 방식이 결정됩니다. 기존 ng-admin 유형을 사용자 정의하고 새 유형을 추가하는 것은 매우 쉽습니다.
사용자 정의 유형 추가 관련 장을 참조하세요.
필요한 종속성을 갖춘 ng-admin 소스를 구축하고 성능 향상에 대한 힌트를 얻으려면 프로덕션 준비 전용 장으로 이동하세요.
ng-admin에 대한 뉴스(튜토리얼, 플러그인, 새 릴리스 등)를 보려면 marmelab 블로그를 팔로우하세요.
또한 GitHub의 ng-admin 릴리스 페이지에서 새 릴리스에 대한 공지를 확인하고 변경 로그를 완료해야 합니다.
Ng-admin은 오픈 소스 프로젝트로 커뮤니티가 매일 커지고 있습니다. 다음 채널을 통해 정중하게 요청하시면 도움을 받으실 수 있습니다.
관리 구성 조각과 매핑 중인 API의 응답을 포함하여 가능한 한 많은 컨텍스트를 제공하세요.
같은 팀의 marmelab/admin-on-rest는 다른 아키텍처를 사용하지만 유사한 서비스를 제공합니다. 즉, 이번에는 React.js, Redux, React-router 및 Material UI를 사용하는 REST API용 관리 GUI입니다.
특정 상황에서 ng-admin 사용에 대한 귀하의 피드백은 소중합니다. 문제나 질문이 있는 경우 주저하지 말고 GitHub 문제를 열어주세요.
모든 기여를 환영합니다. 돌려줄 가치가 있다고 생각되는 포크의 새로운 기능/버그 수정에 대해 풀 요청(Pull Request)을 보내주세요.
또한, ng-admin에 대한 경험이 있다면 지원 채널(위 참조)에서 신규 사용자의 질문에 답변해 주세요.
install 대상을 호출하여 테스트용 npm 종속성을 설치합니다.
make install변경 사항을 테스트하려면 다음을 호출하여 샘플 REST API와 함께 번들로 제공되는 예제 앱을 실행하세요.
make run 그런 다음 http://localhost:8000/ 에 연결하여 관리 앱을 찾아보세요. 이 작업은 webpack-dev-server를 사용합니다. 즉, 소스의 파일 하나가 업데이트되는 즉시 브라우저가 페이지를 다시 로드합니다. 이로 인해 블로그 앱이 선호되는 라이브 테스트 환경이 되었습니다.
ng-admin에는 단위 테스트(karma 기반)와 엔드투엔드 테스트(분도기 기반)가 있습니다. 다음을 호출하여 전체 테스트 모음을 시작합니다.
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팁 : 끌어오기 요청에서 빌드된 파일을 커밋하지 마세요. 다른 PR에 리베이스가 강제 적용됩니다. 핵심 팀은 이러한 빌드된 파일을 정기적으로 업데이트하는 작업을 담당합니다.
ng-admin은 MIT 라이센스에 따라 라이센스가 부여되었으며 marmelab의 후원을 받습니다.
