Что такое "способ" AngularJS для обработки ресурса CRUD

Мне интересно перемещать большую часть моей "логики" клиента от маршрутизации Rails до AngularJS. У меня есть небольшая путаница в одной теме, и это связано. Теперь я понимаю, что существует не один способ справиться с этим, но что такое обычная практика в сообществе AngularJS для обработки URL-адресов при обработке CRUD для ресурсов. Представьте себе, что в случае спортсмена у нас есть URL-адрес, например, следующий список всех спортсменов:

http://example.com/athletes

Чтобы просмотреть отдельного спортсмена:

http://example.com/athletes/1

Чтобы отредактировать отдельного спортсмена:

http://example.com/athletes/1/edit

Чтобы создать нового спортсмена:

http://example.com/athletes/new

В AngularJS распространена практика перенаправления на аналогичные URL-адреса для создания/редактирования/обновления? У вас только один URL-адрес обрабатывает все действия типа CRUD в одном интерфейсе и никогда не будет изменять URL-адрес? Если вы хотите изменить URL-адрес, обрабатывается ли он через ng-click, и в событии click вы используете объект $location для изменения URL-адресов? Мне бы хотелось, чтобы мы могли читать об общих практиках, таких как эти, но имея трудное время в поиске более поздней литературы по этому вопросу в контексте AngularJS.

** ПРИМЕЧАНИЕ **

Я полностью понимаю, что вы все еще можете использовать маршруты RESTful для бэкэнд, чтобы взаимодействовать с ресурсами на стороне сервера. Мой вопрос: какой стиль рекомендуется использовать при обновлении URL-адресов на стороне клиента. Вы используете AngularJS для этого для каждой из операций CRUD?

Ответы

Ответ 1

Я бы определенно рекомендовал отдельные URL-адреса для каждой операции (чтобы включить прямую ссылку). Те, которые вы предлагаете, выглядят прекрасно.

В AngularJS вы можете использовать службу $route в сочетании с директивой ngView для загрузки соответствующего шаблона для каждой операции и для управления местоположением браузера и историей.

Шаг 7 учебника AngularJS дает пример использования представлений, маршрутизации и шаблонов, как я описываю здесь. Ниже приведен упрощенный вариант для вашего примера:

Определите маршруты

В основном приложении script (например, app.js):

angular.module('AthletesApp', []).
  config(['$routeProvider', function($routeProvider, $locationProvider) {
  // Configure routes
  $routeProvider.
      when('/athletes', {templateUrl: 'partials/athletes-list.html',   controller: AthleteListCtrl}).
      when('/athletes/:athleteId', {templateUrl: 'partials/athlete-detail.html', controller: AthleteDetailCtrl}).
      when('/athletes/:athleteId/edit', {templateUrl: 'partials/athlete-edit.html', controller: AthleteEditCtrl}).
      when('/athletes/:athleteId/new', {templateUrl: 'partials/athlete-new.html', controller: AthleteNewCtrl}).
      otherwise({redirectTo: '/athletes'});
  // Enable 'HTML5 History API' mode for URLs.
  // Note this requires URL Rewriting on the server-side. Leave this
  // out to just use hash URLs `/#/athletes/1/edit`
  $locationProvider.html5Mode(true);
}]);

Мы также включаем "Режим HTML" для URL-адресов, см. примечание ниже.

2. Добавьте директиву `ngView` в свой HTML

В вашем основном index.html указывается, где выбранный частичный шаблон будет отображаться в общем макете:

<!doctype html>
<html ng-app="AthletesApp">
...
   <!-- Somewhere within the <body> tag: -->
   <div ng-view></div>
...
</html>

3. Создание шаблонов и контроллеров

Затем вы создаете шаблоны частичного просмотра и соответствующие контроллеры для каждой из операций. Например. для детального просмотра спортсмена:

парциальные /Athelete -detail.html:

<div>
    ... Athete detail view here
</div>

athleteDetailCtrl.js:

angular.module('AthletesApp').controller('AtheleteDetailCtrl',
    function($scope, $routeParams) {
        $scope.athleteId = $routeParams.athleteId;
        // Load the athlete (e.g. using $resource) and add it
        // to the scope.
    }

Вы получаете доступ к параметру маршрута (определенному с помощью :athleteId в конфигурации маршрута) с помощью службы $routeParams.

4. Добавить ссылки

Последний шаг - фактически иметь ссылки и кнопки в вашем HTML, чтобы перейти к различным представлениям. Просто используйте стандартный HTML и укажите URL-адрес, например:

<a href="/athletes/{{athleteId}}/edit">Edit</a>

Примечание. Стандартные URL-адреса URL-адреса хэша

В старых браузерах, которые не поддерживают API истории HTML5, ваши URL-адреса будут больше похожи на http://example.com/#/athletes и http://example.com/#/athletes/1.

Служба $location (используемая автоматически с помощью $route) может обрабатывать это для вас, поэтому вы получаете хорошие чистые URL-адреса в современных браузерах и отбрасываете URL-адреса хэша в старых браузерах. Вы по-прежнему указываете свои ссылки, как указано выше, и $location обрабатывает переписывание их для более старых клиентов. Единственное дополнительное требование состоит в том, что вы настраиваете переписывание URL-адресов на стороне сервера, чтобы все URL-адреса были переписаны в основной файл приложения index.html. Подробнее см. Руководство по настройке AngularJS $.

Ответ 2

Способом angular является спокойный способ:

GET all http://example.com/athletes
GET one http://example.com/athletes/1
POST new http://example.com/athletes
PUT edit http://example.com/athletes/1
DELETE remove http://example.com/athletes/1

Обратите внимание, что $resource также ожидает несколько других вещей, таких как URL-адреса ресурсов, не заканчивающиеся косой чертой, запросы PUT, возвращающие обновленный ресурс, и т.д.

Если ваш API не соответствует этим критериям или вам просто нужна большая гибкость, вы можете создать свой собственный ресурсоподобный CRUD-сервис на основе низкоуровневого $http. Один из способов сделать последнее объясняется здесь

Ответ 3

Вариант 1: $http service

AngularJS предоставляет $http службу, которая делает именно то, что вы хотите: Отправка запросов AJAX к веб-службам и получение данных от них, используя JSON (что отлично подходит для общения с службами REST).

Чтобы привести пример (взятый из документации AngularJS и слегка адаптированный):

$http({ method: 'GET', url: '/foo' }).
  success(function (data, status, headers, config) {
    // ...
  }).
  error(function (data, status, headers, config) {
    // ...
  });

Вариант 2: $resource service

Обратите внимание, что в службе AngularJS есть еще одна услуга $resource, которая обеспечивает доступ к службам REST на более высоком уровне мода (пример снова взят из документации AngularJS):

var Users = $resource('/user/:userId', { userId: '@id' });
var user = Users.get({ userId: 123 }, function () {
  user.abc = true;
  user.$save();
});

Вариант 3: рестатулярный

Кроме того, существуют сторонние решения, такие как Restangular. См. Документацию о том, как ее использовать. В основном, это более декларативное и абстрагирует больше деталей от вас.

Ответ 4

В AngularJS вы можете определенно использовать источники данных на стороне сервера RESTful, существует функция создания $resource.

В качестве альтернативы вы также можете использовать restangular, который имеет дополнительные функции поверх $resource.

Если вы хотите иметь полный контроль, вы всегда можете использовать $http, который является низкоуровневым компонентом angular для взаимодействия с http.

Ответ 5

Просто реализуйте что-то, что есть RESTful, то есть метод angularJS. Если вы не знаете, что такое RESTful или знаете немного и хотите узнать намного больше, я бы рекомендовал вам прочитать эту статью.

В принципе, REST - это то, что понимается как интуитивная реализация WEB URI, он также использует все HTTP-глаголы, их правильное использование на самом деле. REST - это подход и архитектура для создания веб-приложений.