Задать вопрос
@vladimir2209
html

Как получить данные из формы и отправить их методом put в api?

Как получить данные из формы и отправить их методом put в api?

Главный файл index.html

<!DOCTYPE html>
<html lang='en' ng-app='userApp'>
<head>
	<meta charset="utf-8">
	<title>Angular App</title>

	<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js'></script>
	<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.min.js'></script>
	<script src='app/app.js'></script>
	
</head>
<body>
<ng-view></ng-view>
</body>
</html>


Необходимо с использованием AngularJS разработать single-page application, состоящее из двух экранов-страниц.
На индексной странице расположите таблицу со списком элементов, получаемых из API:
curl -X GET "http://000.000.000.000:8081/test/users"

Когда в таблице выделяется один элемент появляется кнопка Edit, при клике на которую происходит переход к странице редактирования выбранного элемента.
На этом экране должна быть кнопка Save, при клике на которую происходит сохранение элемента и возврат к индексной странице.
Сохранение изменений реализовано через API:
curl -X PUT "http://000.000.000.000:8081/test/users/edit" -d '{ "id": "8a999e24-0819-4110-a7ba-247c0a52b138", "name": "Chanda Kochhar", "phone": "+79150000002", "balance": 100.0 }'

Дизайн и оформление не имеет значения. Должны быть использованы такие сервисы Angular, как $http/$resource, $location, $route, promises, контроллеры, директивы.

Сделал пока только то что получаю всех пользователей и при наведении кнопка появляеться если нажму попаду в контроллер edit и тут не знаю что делать, первый день с angular

'use strict';

var userApp = angular.module('userApp',['ngRoute']);

userApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
	
	$routeProvider
		.when('/', {
			templateUrl:'template/home.html',
			controller:'UserListCtrl'
		})
		.when('/edit/:userId', {
			templateUrl:'template/edit.html',
			controller:'EditUserCtrl'
		})
		.otherwise({
			redirectTo: '/'
		});
}]);

userApp.controller('UserListCtrl',['$scope', '$http', '$location', function($scope, $http, $location){
	$scope.title = 'Users';
	$http({
		method: 'GET', 
		url: 'http://9000.000.000.0008081/test/users'
	}).then(function successCallback(response) {
		$scope.users = response.data;
	}, function errorCallback(response) {
	console.log(response);
	});
}]);

userApp.controller('EditUserCtrl',['$scope', '$http', '$location', '$routeParams', function($scope, $http, $location, $routeParams){
	$scope.title = 'Edit User ' + $routeParams.userId;
	$scope.userId = $routeParams.userId;

}]);


Помогите плиз)
  • Вопрос задан
  • 526 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
@jackkum
Используйте $resource
var app = angular.module('myApp', []);

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
  
  $routeProvider
    .when('/', {
      templateUrl:'template/home.html',
      controller:'UsersCtrl'
    })
    .when('/edit/:userId', {
      templateUrl:'template/edit.html',
      controller:'EditCtrl'
    })
    .otherwise({
      redirectTo: '/'
    });
}]);

// Создаем фабрику для работы с ресурсом пользователей
app.factory('UserResource', function ($resource){
    // Возвращаем ресурс, ссылка на документацию выше
    return $resource(
      '/test/users/:action',  // роут для работы
      {id: '@id'}, // поле идентификатор
      {
        update: { // переопределим метод update
          method: 'PUT', // тип запроса
          params: {action: 'edit'} // параметр action в роуте
        },
      }
    );
  });

// Контроллер списка пользователей
app.controller('UsersCtrl', function ($scope, UserResource) {
  // запрос на список пользователей
  $scope.users = UserResource.query();
});

// Контроллер редактирования пользователя
app.controller('EditCtrl', function ($scope, UserResource, $routeParams) {
  // Загружаем текущего пользователя по ид из роута
  $scope.user = UserResource.get({id: $routeParams.userId});

  // Функция сохранения пользователя, form - объект формы
  $scope.saveUser = function(form){
    // Вызываем переопределенный метод update
    UserResource.update($scope.user)
      .$promise
      // Ловим ошибки
      .catch(function(err){
        console.error(err);
      });
  };
});


Содержимое template/home.html
<ul>
  <li ng-repeat="user in users"><a href="/edit/{{user.id}}">{{user.name}}</a></li>
</ul>


Содержимое template/edit.html
<form class="form" name="form" ng-submit="saveUser(form)" novalidate>
  <input type="text" ng-model="user.name">
  <button class="btn btn-default" type="submit" ng-disabled="form.$invalid">Сохранить</button>
</form>


index.html
<!DOCTYPE html>
<html lang='en' ng-app='myApp'>
<head>
  <meta charset="utf-8">
  <title>Angular App</title>

  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js'></script>
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.min.js'></script>
  <script src='app/app.js'></script>
  
</head>
<body>
<ng-view></ng-view>
</body>
</html>


UPD: Добавлена форма
UPD2: Добавил комментарии
UPD3: https://plnkr.co/edit/LTTkrd3NbSSxC7ZKw9GJ?p=preview
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Импорт товаров в minishop2 MODX
27 нояб. 2024, в 20:20
3000 руб./за проект
Консультация по AirFlow
27 нояб. 2024, в 19:08
1500 руб./в час
Настройка Pycharm
27 нояб. 2024, в 18:19
2000 руб./за проект
Ещё заказы