الصفحة الرئيسية>PHP كود المصدر>فئات أخرى
تنزيل

ng-admin

قم بتوصيلي بـ RESTFul API الخاص بك للحصول على واجهة إدارة كاملة (شبكة البيانات، المرشحات، عناصر واجهة المستخدم المعقدة، العلاقات متعددة النماذج، لوحة المعلومات) في وقت قصير! بالإضافة إلى CRUD البسيط، يتيح لك ng-admin إنشاء واجهات مستخدم رسومية متطورة دون أن تعترض طريقك.

  • العرض التوضيحي عبر الإنترنت (المصدر)
  • التوثيق

هذا المشروع الآن في وضع الصيانة. لقد أعدنا بنائه من الصفر باستخدام React.js (المشروع الجديد يسمى رد الفعل المشرف)، ونحن نبذل كل جهودنا على إصدار 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' ) ,
    // ...
] ) ;

ملاحظة مهمة: نظرًا لأننا نقوم بتضمين قوالب HTML باستخدام require لمنع طلب AJAX الذي يتضمنه templateUrl ، فستحتاج إلى تكوين مُجمّع الوحدة الخاص بك للتعامل مع HTML. يمكن تحقيق ذلك باستخدام Webpack باستخدام مُحمل HTML: 

 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 وأوراق الأنماط الخاصة بك، مما يساعدك على اصطياد الأخطاء الأكثر غموضًا.

بدون وحدة تجميع

إذا لم يكن لديك مُجمِّع وحدة نمطية، فلا تقلق: لا يزال بإمكانك تضمين ng-admin مع علامة <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 >

تمهيد المشرف الخاص بك

أضف 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 >

ابدء

راجع الفصل المخصص للبدء للحصول على برنامج تعليمي خطوة بخطوة موجه للمبتدئين.

أمثلة الاستخدام

  • يمكنك العثور على تكوين بسيط في العرض التوضيحي لمسؤول المدونة، حيث تكون الكيانات عبارة عن منشورات وتعليقات وعلامات. تتم محاكاة واجهة REST API البعيدة في المتصفح باستخدام FakeRest.
  • يُعد العرض التوضيحي لـ Posters Galore (المصدر) مثالًا أكثر اكتمالاً لإدارة التجارة الإلكترونية، مع مصادقة مخصصة وصفحات وتوجيهات ووحدات، وكلها منظمة جيدًا عبر WebPack. تتم أيضًا محاكاة واجهة REST API البعيدة في المتصفح باستخدام FakeRest.

مرجع التكوين

تتكون الإدارة في ng-admin من تطبيق واحد يحتوي على عدة كيانات . يحتوي كل كيان على ما يصل إلى 5 طرق عرض ، ولكل طريقة عرض العديد من الحقول . 

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

راجع الفصل المخصص لمرجع واجهة برمجة التطبيقات للتكوين لمزيد من التفاصيل.

نصيحة : لن تجد الفئات ذات الصلة في مشروع ng-admin. في الواقع، توجد واجهة برمجة تطبيقات تكوين المشرف كمكتبة مستقلة لا تعتمد على إطار عمل، تسمى admin-config. لا تتردد في تصفح مصدر تلك المكتبة لمعرفة المزيد.

العلاقات

يدعم Ng-admin العلاقات بين الكيانات في طرق عرض القراءة والكتابة، ويوفر أنواع حقول متخصصة لذلك: reference ، referenced_list ، reference_many ، و embedded_list . يصف الفصل مرجع العلاقات بمزيد من التفاصيل نوع الحقل الذي سيتم استخدامه لكل حالة.

بالإضافة إلى ذلك، يحتوي قسم الحقول في الفصل المرجعي لواجهة برمجة تطبيقات التكوين على قائمة بجميع الإعدادات لكل نوع من أنواع الحقول هذه.

تكوين القائمة

افتراضيًا، يقوم ng-admin بإنشاء قائمة شريط جانبي تحتوي على إدخال واحد لكل كيان. إذا كنت تريد تخصيص هذا الشريط الجانبي (التسميات، والأيقونات، والطلب، وإضافة قوائم فرعية، وما إلى ذلك)، فيجب عليك تحديد القوائم يدويًا.

انظر الفصل المخصص لتكوين القوائم.

تكوين لوحة القيادة

تسمى الصفحة الرئيسية لتطبيق ng-admin بلوحة التحكم. استخدمها لإظهار أجزاء مهمة من المعلومات للمستخدم النهائي، مثل أحدث الإدخالات أو المخططات.

راجع الفصل المخصص لتكوين لوحة المعلومات.

تخصيص تعيين API

يتم تنفيذ جميع طلبات HTTP التي يقدمها ng-admin إلى REST API الخاصة بك بواسطة Restangular، والتي تشبه $resource على المنشطات.

لا توفر مواصفات REST تفاصيل كافية لتغطية جميع متطلبات واجهة المستخدم الرسومية للإدارة. يقدم ng-admin بعض الافتراضات حول كيفية تصميم واجهة برمجة التطبيقات (API) الخاصة بك. يمكن تجاوز كل هذه الافتراضات عن طريق اعتراضات الطلب والاستجابة الخاصة بـ Restangular.

وهذا يعني أنك لا تحتاج إلى تكييف واجهة برمجة التطبيقات الخاصة بك مع ng-admin؛ يمكن لـ ng-admin التكيف مع أي واجهة برمجة تطبيقات REST، وذلك بفضل مرونة Restangular.

راجع الفصل المخصص لتخصيص تعيين واجهة برمجة التطبيقات (API).

السمات

يمكنك تجاوز كل HTML الذي تم إنشاؤه بواسطة ng-admin تقريبًا، على مستويات مختلفة.

راجع الفصل المخصص لـ Theming.

ترجمة

تستخدم واجهة ng-admin اللغة الإنجليزية كلغة افتراضية، ولكنها تدعم التبديل إلى لغة أخرى، وذلك بفضل الترجمة الزاويّة.

راجع الفصل المخصص للترجمة.

إضافة صفحات مخصصة

لكل كيان، يقوم ng-admin بإنشاء الصفحات اللازمة لإنشاء هذا الكيان واسترجاعه وتحديثه وحذفه (CRUD). عندما تحتاج إلى تحقيق المزيد من الإجراءات المحددة على كيان ما، يتعين عليك إضافة صفحة مخصصة - على سبيل المثال صفحة تطلب عنوان بريد إلكتروني لإرسال رسالة إليه. كيف يمكنك التوجيه إلى صفحة معينة وعرضها في تخطيط ng-admin؟

راجع الفصل المخصص لإضافة صفحات مخصصة.

إضافة أنواع مخصصة

عندما تقوم بتعيين حقل بين استجابة REST API وng-admin، فإنك تعطيه نوعًا. يحدد هذا النوع كيفية عرض البيانات وتحريرها. من السهل جدًا تخصيص أنواع ng-admin الحالية وإضافة أنواع جديدة.

راجع الفصل المخصص لإضافة أنواع مخصصة.

الاستعداد للإنتاج

لبناء مصدر ng-admin بالتبعيات التي تحتاجها، وللحصول على تلميحات حول معززات الأداء، توجه إلى الفصل المخصص للاستعداد للإنتاج.

أخبار

اتبع مدونة marmelab للحصول على أخبار حول ng-admin (البرامج التعليمية والمكونات الإضافية والإصدارات الجديدة وما إلى ذلك).

يجب عليك أيضًا مشاهدة صفحة إصدار ng-admin على GitHub للحصول على إعلانات حول الإصدارات الجديدة وسجل التغيير الكامل.

يدعم

Ng-admin هو مشروع مفتوح المصدر، ويزداد مجتمعه يومًا بعد يوم. سوف تحصل على المساعدة عن طريق السؤال بأدب في أي من القنوات التالية:

  • StackOverflow
  • جيتر (الدردشة الحية)

يرجى تقديم أكبر قدر ممكن من السياق، بما في ذلك مقتطف تكوين المشرف والاستجابة من واجهة برمجة التطبيقات التي تقوم بتعيينها.

هل تبحث عن إصدار Material UI/React.js؟

يستخدم marmelab/admin-on-rest، من قبل نفس الفريق، بنية مختلفة ولكنه يقدم خدمة مماثلة: واجهة المستخدم الرسومية الإدارية لواجهات برمجة التطبيقات REST، هذه المرة مع React.js وRedux وجهاز التوجيه التفاعلي وواجهة المستخدم المادية.

المساهمة

تعد تعليقاتك حول استخدام ng-admin في سياقك المحدد ذات قيمة، فلا تتردد في فتح مشكلات GitHub لأي مشكلة أو سؤال قد يكون لديك.

نرحب بجميع المساهمات: من فضلك أرسل لنا طلب سحب لأي ميزة جديدة / إصلاح خطأ في مفترقك الذي تعتبره يستحق إعادته.

وأيضًا، إذا كان لديك بعض الخبرة مع ng-admin، فيرجى الإجابة على أسئلة الوافدين الجدد في أي من قنوات الدعم (انظر أعلاه).

تثبيت التبعيات

قم بتثبيت تبعيات npm (للاختبارات) عن طريق استدعاء هدف install : 

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

نصيحة : لا تلتزم بالملفات المضمنة في طلبات السحب، فهذا يفرض إعادة الأساس على العلاقات العامة الأخرى. سيهتم الفريق الأساسي بالتحديث المنتظم لهذه الملفات المضمنة.

رخصة

ng-admin مرخص بموجب ترخيص MIT، وبرعاية marmelab.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل