Подтвердить что ты не робот

Лучшая практика AngularJS REST/CRUD

Какова наилучшая практика выполнения CRUD-операций через REST с помощью AngularJS?

В частности, что такое Angular -Way. Под этим я подразумеваю способ использования наименьшего кода и большинства настроек по умолчанию angular.

Я знаю $resource и его по умолчанию. Где я не уверен, как реализовать/назвать конечные точки и какие контроллеры использовать.

В этом примере я хотел бы реализовать простую систему управления пользователями, которая создает/обновляет/удаляет/перечисляет пользователей. Поскольку я сам реализую серверные конечные точки, я совершенно свободен, делая это наиболее удобным способом angular.

Мне нравится как-то вроде:

Серверные Endpoints:

GET /service/users -> array of users
GET /service/user/new -> return an empty user with default values which has no id
POST /service/user/new -> store a new user and create an id. return the saved user.
POST /service/user/:ID -> save an existing user. Return the saved user
DELETE /service/user/:ID -> delete an existing user

Angular -Услуги:

.factory( 'User', [ '$resource', function( $resource ){

    return $resource( '/service/user/:userId', { userId: '@id' } )
    [...]

}])

Routing:

.when( '/users', {
    templateUrl: BASE + 'partials/user-list.html',
    controller: 'UserListCtrl' } )

.when( '/user/new', {
    templateUrl: BASE + 'partials/user-edit.html',
    controller: 'UserNewCtrl' } )

.when( '/user/:userId', {
    templateUrl: BASE + 'partials/user-edit.html',
    controller: 'UserEditCtrl' } )
...

Контроллеры:

UserListCtrl:

    $scope.data = User.get(...)

UserNewCtrl:

    $scope.user = User.get( { userId: "new" } )

...

Заметьте, что меня не интересует мнение, что является лучшим (tm) способом сделать это, но я хотел бы знать, что означает Angular (который, я думаю, должен создайте наименьший код, потому что он может использовать большинство настроек по умолчанию).

EDIT:

Я ищу всю картину. То, что я бы хотел, было бы ответом, например: "Вы можете сделать это, используя онлайн 3 Endpoints [...], 2 маршрута [...] и 2 контроллера [...], если вы сделаете это так, используя эти значения по умолчанию..."

4b9b3361

Ответ 1

Нет Angular предписанного способа для того, что вы просите. Это зависит от вас, чтобы определить детали реализации.

Обычно я использую только два контроллера и шаблоны для каждого ресурса:

  • ListController
  • FormController

Контроллер формы используется для операций "Редактировать" и "Создать". Используйте опцию resolve в определениях маршрутов для передачи в User.get() или User.new() и флаге, указывающем, является ли это операция редактирования или создания. Затем этот флаг можно использовать внутри вашего FormController для определения способа сохранения для вызова. Вот простой пример:

.when( '/users', {
  templateUrl: BASE + 'partials/user-list.html',
  controller: 'UserListCtrl' } )
.when( '/user/new', {
  templateUrl: BASE + 'partials/user-form.html',
  resolve: {
    data: ['User', function(User) { return User.new(); }],
    operation: 'create'
  }
  controller: 'UserFormCtrl' } )
.when( '/user/:userId', {
  templateUrl: BASE + 'partials/user-form.html',
  resolve: {
    data: ['User', '$route', function(User, $route) { return User.get($route.current.params.userId); }],
    operation: 'edit'
  }
  controller: 'UserFormCtrl' } )

И ваш контроллер формы:

app.controller('UserFormCtrl', ['$scope', 'data', 'operation', function($scope, data, operation){
  $scope.data = data;
  $scope.save = function() {
    if (operation === 'edit') {
      // Do you edit save stuff
    } else {
      // Do you create save stuff
    }
  }
}]);

Вы можете сделать еще один шаг и создать базовый список и сформировать контроллер для перемещения таких вещей, как обработка ошибок, уведомления о проверке на стороне сервера и т.д. Фактически для большинства операций CRUD вы можете даже переместить логику сохранения на этот базовый контроллер.

Ответ 2

Мои исследования аналогичного квеста привели меня к этому проекту "angular -schema-form" https://github.com/Textalk/angular-schema-form.

Для этого подхода... Вы создаете JSON-схему, которая описывает ваши данные. Затем добавьте еще одну небольшую JSON-структуру, которая описывает "форму" (т.е. Просматривать конкретную информацию, которая не входит в схему данных), и делает для вас пользовательский интерфейс (форма).

Одно из преимуществ заключается в том, что Схема также полезна при проверке данных (на стороне клиента и сервера), так что это бонус.

Вам нужно выяснить, какие события должны запускать GET/POST/... обратно в ваш API. но это будет ваше предпочтение, например. Хит API для каждого нажатия клавиши ИЛИ классической кнопки [Отправить] POST назад или чего-то промежуточного с таймером Auto Save.

Чтобы сохранить эту идею, я думаю, что можно использовать StrongLoop для создания быстрого API, который (опять же) использует ваши данные schema (дополненный некоторыми данными о хранилище) для определения API,

no < 3 использует эту схему, см. [http://json-schema.org/], которая является центральной для этого подхода.

(читать: не менее трех:)

Ответ 3

Вы, возможно, смешиваете вещи. Операции CRUD на уровне API выполняются с использованием $resource, и они могут или не могут отображаться в пользовательском интерфейсе. Поэтому, используя $resouce, если вы определяете ресурс как

var r = $resource('/users/:id',null,   {'update': { method:'PUT' }});
r.query()  //does GET on /users and gets all users
r.get({id:1}) // does GET on /users/1 and gets a specific user
r.save(userObject)  // does a POST to /users to save the user
r.update({ id:1 }, userObject) // Not defined by default but does PUT to /users/1 with user object.

Как вы видите, API является полным ресурсом, но никоим образом не связан с каким-либо представлением пользовательского интерфейса.

Для просмотра вы можете использовать соглашение, которое вы определили, но ничего особенного не предоставляет Angular.

Ответ 4

Я думаю, что то, что вы ищете, можно найти в http://www.synthjs.com/

  • Легко создавать новые ресурсы API RESTful, просто создавая папки и именования функций определенным образом.
  • Возвращаемые данные или promises из этих функции, и они будут переданы клиенту как JSON.
  • Бросьте ошибка, и он будет зарегистрирован. Если он работает в режиме dev, ошибка будет также должны быть возвращены клиенту.
  • Предварительная загрузка angular данных модели на загрузку страницы (сохранение дополнительной в обе стороны).
  • Предварительный просмотр html на загрузке страницы (сохранение другого дополнительного roundtrip!)
  • Упрощенная структура проекта где код интерфейса (angular, html, css, bower packages и т.д.), находится в "передней" папке и внутреннем коде (node и node пакеты) находятся в папке "назад".
  • Средство командной строки для установка сторонних пакетов с использованием npm + bower, которые автоматически обновляются файлы манифеста.
  • Автоматическая компиляция активов по запросу для dev и предварительная компиляция для prod (включая minification и ngmin). Автоматическая перезагрузка сервера при обнаружении изменений.
  • Поддержка различные обратные и интерфейсные шаблоны, чтобы помочь получить новый проект быстро.