Beranda>Kode sumber PHP>Kategori lainnya
Unduh

ng-admin

Hubungkan saya ke RESTFul API Anda untuk mendapatkan antarmuka administrasi lengkap (datagrid, filter, widget formulir kompleks, hubungan multi-model, dasbor) dalam waktu singkat! Selain CRUD sederhana, ng-admin memungkinkan Anda membuat GUI canggih tanpa menghalangi Anda.

  • Demo online (sumber)
  • Dokumentasi

Proyek ini sekarang dalam mode pemeliharaan. Kami telah membangunnya kembali dari awal dengan React.js (proyek baru ini disebut react-admin), dan kami mengerahkan seluruh upaya kami pada versi React.

Instalasi

Versi ng-admin (master) saat ini bergantung pada Angular.js 1.6. Jika Anda memerlukan kompatibilitas dengan Angular 1.3, gunakan ng-admin 0.9.

Ambil ng-admin dari manajer paket favorit Anda: 

npm install ng-admin --save
# or
yarn add ng-admin

Dengan Bundler Modul

ng-admin sepenuhnya kompatibel dengan Webpack, dan juga harus kompatibel dengan semua bundler modul utama yang tersedia. Jika Anda menggunakan salah satunya, Anda hanya perlu menambahkan baris ini: 

 const myApp = angular . module ( 'myApp' , [
    require ( 'ng-admin' ) ,
    // ...
] ) ;

Catatan penting: karena kami menyertakan template HTML menggunakan require untuk mencegah permintaan AJAX yang disiratkan oleh templateUrl , Anda perlu mengonfigurasi bundler modul Anda untuk menangani HTML. Hal ini dapat dilakukan dengan Webpack menggunakan pemuat HTML: 

 module . exports = {
    // ...
    module : {
        loaders : [
            // ...
            { test : / .html$ / , loader : 'html' } ,
        ]
    } ,
} ;

Jika bundler modul Anda juga mendukung SASS atau CSS, Anda juga dapat menyertakan stylesheet menggunakan: 

 // SASS version
require ( 'ng-admin/lib/sass/ng-admin.scss' ) ;

// CSS version
require ( 'ng-admin/build/ng-admin.min.css' ) ;

Dengan menggunakan bundler modul, Anda juga dapat membuat peta sumber untuk semua JavaScript dan stylesheet Anda, membantu Anda mencari bug yang paling tidak jelas sekalipun.

Tanpa Bundler Modul

Jika Anda tidak memiliki pemaket modul, jangan khawatir: Anda masih dapat menyertakan ng-admin dengan 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 >

Melakukan bootstrap pada Admin Anda

Tambahkan ng-admin.min.css dan ng-admin.min.js ke HTML, tambahkan <div ui-view="ng-admin"> , dan konfigurasikan 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 >

Memulai

Lihat bab khusus Memulai untuk tutorial langkah demi langkah yang ditujukan untuk pemula.

Contoh Penggunaan

  • Anda dapat menemukan konfigurasi sederhana di demo admin blog, yang entitasnya adalah postingan, komentar, dan tag. REST API jarak jauh disimulasikan di browser, menggunakan FakeRest.
  • Demo Posters Galore (sumber) adalah contoh administrasi e-niaga yang lebih lengkap, dengan autentikasi khusus, halaman, arahan, dan modul, semuanya diatur dengan baik melalui WebPack. REST API jarak jauh juga disimulasikan di browser, menggunakan FakeRest.

Referensi Konfigurasi

Administrasi di ng-admin dibuat dari satu aplikasi yang berisi beberapa entitas . Setiap entitas memiliki hingga 5 tampilan , dan setiap tampilan memiliki banyak bidang . 

 application
 |-header
 |-menu
 |-dashboard
 |-entity[]
    |-creationView
    |-editionView
    |-deletionView
    |-showView
    |-listView
        |-field[]
           |-name
           |-type

Lihat bab khusus Referensi API Konfigurasi untuk detail selengkapnya.

Tip : Anda tidak akan menemukan kelas terkait di proyek ng-admin. Faktanya, API konfigurasi admin ada sebagai pustaka framework-agnostic yang berdiri sendiri, yang disebut admin-config. Jangan ragu untuk menelusuri sumber perpustakaan tersebut untuk mempelajari lebih lanjut.

Hubungan

Ng-admin mendukung hubungan antar entitas dalam tampilan baca dan tulis, dan menyediakan tipe bidang khusus untuk itu: reference , referenced_list , reference_many , dan embedded_list . Bab Referensi Hubungan menjelaskan secara lebih rinci jenis bidang mana yang akan digunakan untuk kasus apa.

Selain itu, bagian Bidang pada bab Referensi API Konfigurasi memiliki daftar semua pengaturan untuk setiap jenis bidang ini.

Konfigurasi Menu

Secara default, ng-admin membuat menu sidebar dengan satu entri per entitas. Jika Anda ingin menyesuaikan sidebar ini (label, ikon, urutan, menambahkan submenu, dll), Anda harus menentukan menu secara manual.

Lihat bab khusus Konfigurasi Menu.

Konfigurasi Dasbor

Halaman beranda aplikasi ng-admin disebut Dashboard. Gunakan untuk menampilkan informasi penting kepada pengguna akhir, seperti entri atau bagan terbaru.

Lihat bab khusus Konfigurasi Dasbor.

Menyesuaikan Pemetaan API

Semua permintaan HTTP yang dibuat oleh ng-admin ke REST API Anda dilakukan oleh Restangular, seperti $resource pada steroid.

Spesifikasi REST tidak memberikan detail yang cukup untuk mencakup semua persyaratan GUI administrasi. ng-admin membuat beberapa asumsi tentang bagaimana API Anda dirancang. Semua asumsi ini dapat dikesampingkan melalui pencegat permintaan dan respons Restangular.

Itu berarti Anda tidak perlu menyesuaikan API Anda ke ng-admin; ng-admin dapat beradaptasi dengan REST API apa pun, berkat fleksibilitas Restangular.

Lihat bab khusus Menyesuaikan Pemetaan API.

Tema

Anda dapat mengganti hampir semua HTML yang dihasilkan oleh ng-admin, pada level yang berbeda.

Lihat bab khusus Tema.

Terjemahan

Antarmuka ng-admin menggunakan bahasa Inggris sebagai bahasa default, tetapi mendukung peralihan ke bahasa lain, berkat terjemahan sudut.

Lihat bab khusus Terjemahan.

Menambahkan Halaman Kustom

Untuk setiap entitas, ng-admin membuat halaman yang diperlukan untuk Membuat, Mengambil, Memperbarui, dan Menghapus (CRUD) entitas ini. Saat Anda perlu melakukan tindakan yang lebih spesifik pada suatu entitas, Anda harus menambahkan halaman kustom - misalnya halaman yang meminta alamat email untuk mengirim pesan. Bagaimana Anda merutekan ke halaman tertentu dan menampilkannya dalam tata letak ng-admin?

Lihat bab khusus Menambahkan Halaman Kustom.

Menambahkan Tipe Kustom

Saat Anda memetakan bidang antara respons REST API dan ng-admin, Anda memberinya tipe. Tipe ini menentukan bagaimana data ditampilkan dan diedit. Sangat mudah untuk menyesuaikan tipe ng-admin yang ada dan menambahkan yang baru.

Lihat bab khusus Menambahkan Tipe Kustom.

Bersiap Untuk Produksi

Untuk membangun sumber ng-admin dengan dependensi yang Anda perlukan, dan untuk mendapatkan petunjuk tentang peningkat kinerja, buka bab khusus Bersiap Untuk Produksi.

Berita

Ikuti blog marmelab untuk berita tentang ng-admin (tutorial, plugin, rilis baru, dll).

Anda juga harus melihat halaman rilis ng-admin di GitHub untuk mengetahui pengumuman tentang rilis baru, dan menyelesaikan log perubahan.

Mendukung

Ng-admin adalah proyek sumber terbuka, dengan komunitas yang semakin besar setiap harinya. Anda akan mendapatkan bantuan dengan bertanya secara sopan di salah satu saluran berikut:

  • StackOverflow
  • Gitter (obrolan langsung)

Harap berikan konteks sebanyak mungkin, termasuk cuplikan konfigurasi admin, dan respons dari API yang Anda petakan.

Mencari versi Material UI/React.js?

marmelab/admin-on-rest, oleh tim yang sama, menggunakan arsitektur berbeda tetapi menyediakan layanan serupa: GUI admin untuk REST API, kali ini dengan React.js, Redux, react-router, dan material UI.

Berkontribusi

Masukan Anda tentang penggunaan ng-admin dalam konteks spesifik Anda sangat berharga, jangan ragu untuk membuka Masalah GitHub untuk masalah atau pertanyaan apa pun yang mungkin Anda miliki.

Semua kontribusi dipersilakan: kirimkan Permintaan Tarik kepada kami untuk setiap fitur baru/perbaikan bug di fork Anda yang Anda anggap layak untuk diberikan kembali.

Selain itu, jika Anda memiliki pengalaman dengan ng-admin, harap jawab pertanyaan dari pendatang baru di saluran dukungan mana pun (lihat di atas).

Menginstal Dependensi

Instal dependensi npm (untuk pengujian) dengan memanggil target install : 

make install

Menjalankan aplikasi contoh

Untuk menguji perubahan Anda, jalankan aplikasi contoh, yang dipaketkan dengan contoh REST api, dengan memanggil: 

make run

Kemudian, sambungkan ke http://localhost:8000/ untuk menelusuri aplikasi admin. Tugas ini menggunakan webpack-dev-server, yang berarti browser akan memuat ulang halaman segera setelah satu file di sumber diperbarui. Hal ini menjadikan aplikasi blog sebagai lingkungan pengujian langsung pilihan kami.

Pengujian

ng-admin memiliki pengujian unit (didukung oleh karma) dan pengujian ujung ke ujung (didukung oleh busur derajat). Luncurkan seluruh rangkaian pengujian dengan menelepon: 

make test

Tip: Jika Anda sedang mengerjakan pengujian Karma, Anda dapat mencegah peluncuran ulang seluruh proses dengan menonaktifkan proses tunggal: 

 ./node_modules/.bin/karma start src/javascripts/test/karma.conf.js

Melepaskan

Sebelum merilis versi baru, gabungkan dan perkecil sumber JS dan CSS ke dalam skrip yang diperkecil dengan: 

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

Tip : Jangan mengkomit file yang dibuat di Pull Requests, ini akan memaksa rebase pada PR lain. Tim inti akan memperbarui file-file yang dibuat ini secara berkala.

Lisensi

ng-admin dilisensikan di bawah Lisensi MIT, dan disponsori oleh marmelab.

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua