Главная страница>Исходный код PHP>Другие категории
Скачать

нг-админ

Подключите меня к своему RESTFul API, чтобы получить полный интерфейс администрирования (сетка данных, фильтры, виджеты сложных форм, многомодельные отношения, панель мониторинга) в кратчайшие сроки! Помимо простого CRUD, ng-admin позволяет создавать сложные графические интерфейсы, не мешая вам.

  • Онлайн-демо (источник)
  • Документация

Этот проект сейчас находится в режиме обслуживания. Мы перестроили его с нуля с помощью React.js (новый проект называется act-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

С помощью модуля Bundler

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

Дополнительную информацию см. в специальной главе «Справочник по API конфигурации».

Совет : вы не найдете связанные классы в проекте ng-admin. Фактически, API конфигурации администратора существует как отдельная, не зависящая от платформы библиотека, называемая admin-config. Не стесняйтесь просматривать исходный код этой библиотеки, чтобы узнать больше.

Отношения

Ng-admin поддерживает отношения между сущностями в представлениях чтения и записи и предоставляет для этого специализированные типы полей: reference , referenced_list , reference_many и embedded_list . В главе «Справочник по связям» более подробно описывается, какой тип поля использовать в каком случае.

Кроме того, в разделе «Поля» главы «Справочник по API конфигурации» приведен список всех настроек для каждого из этих типов полей.

Конфигурация меню

По умолчанию ng-admin создает меню боковой панели с одной записью для каждой сущности. Если вы хотите настроить эту боковую панель (метки, значки, порядок, добавление подменю и т. д.), вам придется определить меню вручную.

См. специальную главу «Конфигурация меню».

Конфигурация информационной панели

Домашняя страница приложения ng-admin называется Dashboard. Используйте его, чтобы показать конечным пользователям важную информацию, например последние записи или диаграммы.

См. специальную главу «Конфигурация информационной панели».

Настройка сопоставления API

Все HTTP-запросы, сделанные ng-admin к вашему REST API, выполняются Restangular, который похож на $resource на стероидах.

Спецификация REST не содержит достаточно подробностей, чтобы охватить все требования графического пользовательского интерфейса администрирования. ng-admin делает некоторые предположения о том, как устроен ваш API. Все эти предположения могут быть отменены с помощью перехватчиков запросов и ответов Restangular.

Это означает, что вам не нужно адаптировать свой API к ng-admin; ng-admin может адаптироваться к любому REST API благодаря гибкости Restangular.

См. специальную главу «Настройка сопоставления API».

Тематика

Вы можете переопределить практически весь HTML-код, сгенерированный ng-admin, на разных уровнях.

См. раздел, посвященный тематике.

Перевод

Интерфейс ng-admin использует английский в качестве языка по умолчанию, но поддерживает переключение на другой язык благодаря angular-translate.

См. главу, посвященную переводу.

Добавление пользовательских страниц

Для каждого объекта ng-admin создает необходимые страницы для создания, получения, обновления и удаления (CRUD) этого объекта. Когда вам нужно выполнить более конкретные действия над объектом, вам необходимо добавить пользовательскую страницу — например, страницу, запрашивающую адрес электронной почты для отправки сообщения. Как вы можете перейти на определенную страницу и отобразить ее в макете ng-admin?

См. специальную главу «Добавление пользовательских страниц».

Добавление пользовательских типов

Когда вы сопоставляете поле между ответом REST API и ng-admin, вы присваиваете ему тип. Этот тип определяет, как данные отображаются и редактируются. Настраивать существующие типы ng-admin и добавлять новые очень легко.

См. специальную главу «Добавление пользовательских типов».

Готовимся к производству

Чтобы создать исходный код ng-admin с необходимыми вам зависимостями и получить подсказки по повышению производительности, перейдите к специальной главе «Подготовка к производству».

Новости

Следите за новостями о ng-admin в блоге marmelab (руководства, плагины, новые выпуски и т. д.).

Вам также следует просмотреть страницу выпуска ng-admin на GitHub, чтобы узнать о новых выпусках и получить полный список изменений.

Поддерживать

Ng-admin — это проект с открытым исходным кодом, сообщество которого с каждым днем ​​становится все больше. Вы получите помощь, вежливо обратившись по любому из следующих каналов:

  • StackOverflow
  • Гиттер (живой чат)

Укажите как можно больше контекста, включая фрагмент конфигурации администратора и ответ API, который вы сопоставляете.

Ищете версию Material UI/React.js?

marmelab/admin-on-rest, созданный той же командой, использует другую архитектуру, но предоставляет аналогичный сервис: графический интерфейс администратора для REST API, на этот раз с React.js, Redux, React-Router и Material UI.

Содействие

Ваши отзывы об использовании ng-admin в вашем конкретном контексте очень ценны. Не стесняйтесь открывать GitHub Issues, если у вас возникнут какие-либо проблемы или вопросы.

Все вклады приветствуются: отправьте нам запрос на включение любой новой функции или исправления ошибок в вашем форке, которые, по вашему мнению, стоит вернуть.

Также, если у вас есть некоторый опыт работы с ng-admin, пожалуйста, ответьте на вопросы новичков в любом из каналов поддержки (см. выше).

Установка зависимостей

Установите зависимости npm (для тестов), вызвав цель install : 

make install

Запуск примера приложения

Чтобы протестировать изменения, запустите пример приложения, поставляемого в комплекте с образцом REST API, вызвав: 

make run

Затем подключитесь к http://localhost:8000/ чтобы просмотреть приложение администратора. В этой задаче используется webpack-dev-server, а это значит, что браузер перезагрузит страницу, как только обновится один файл в источнике. Это делает приложение блога нашей предпочтительной средой для живого тестирования.

Тестирование

В ng-admin есть модульные тесты (на базе karma) и сквозные тесты (на базе Protractor). Запустите весь набор тестов, вызвав: 

make test

Совет: Если вы работаете над тестами Кармы, вы можете предотвратить повторный запуск всего процесса, отключив однократный запуск: 

 ./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.

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все