CRUD 리소스를 처리하는 AngularJS의 "방법"은 무엇입니까?
고객의 "논리"를 Rails 라우팅에서 Angular JS로 많이 옮기는 데 관심이 있습니다.나는 하나의 주제에 약간의 혼란이 있는데 그것은 연결이다.이 문제를 해결할 방법이 여러 가지가 있다는 건 알지만 Angular의 일반적인 관행이 뭐죠?리소스의 CRUD 처리 URL을 처리하는 JS 커뮤니티.선수의 경우 다음과 같은 URL을 사용하여 모든 선수를 나열한다고 가정해 보십시오.
http://example.com/athletes
개별 선수를 보려면:
http://example.com/athletes/1
개별 선수를 편집하려면:
http://example.com/athletes/1/edit
새 운동선수를 만들려면:
http://example.com/athletes/new
AngularJS에서는 작성/편집/업데이트를 위해 유사한 URL로 재루팅하는 것이 일반적인 방법입니까?하나의 인터페이스에서 모든 CRUD 유형의 액션을 하나의 URL로 처리하고 URL을 변경하지 말아 주시겠습니까?을 할 수 ?$locationURL을 변경할 오브젝트나는 이러한 일반적인 관행에 대해 읽을 수 있으면 좋겠지만, Angular에서 그것에 대한 더 최근의 문헌을 찾는 데 어려움을 겪고 있습니다.JS ★★★★
** 메모 **
서버측 리소스와 대화하기 위해 백엔드로의 RESTful 루트를 계속 사용할 수 있다는 것을 완전히 이해했습니다.질문입니다만, 클라이언트측에서 URL을 갱신할 때 추천하는 스타일은 무엇입니까?Angular를 사용하고 있습니까?JS가 각 CRUD 작업에 대해 이 작업을 수행합니까?
각 조작에 대해서, 반드시 URL 를 개별적으로 사용하는 것을 추천합니다(직접 링크를 유효하게 합니다.당신이 제안한 것들은 괜찮아 보여요.
에서는 JS를 사용할 수 .$routengView각 작업에 적합한 템플릿을 로드하고 브라우저 위치 및 이력 메커니즘을 처리하도록 지시합니다.
각도의 7단계JS 튜토리얼에서는 여기서 설명하는 대로 뷰, 라우팅 및 템플릿을 사용하는 예를 보여 줍니다.다음은 사용 예제의 간략화된 버전입니다.
루트의 정의
메인 애플리케이션 스크립트(예: 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 모드'는 아래 참고 사항을 참조하십시오.
를 합니다.ngViewHTMLHTML에
main index.html에서는 전체 레이아웃에서 선택한 부분 템플릿의 위치를 지정합니다.
<!doctype html>
<html ng-app="AthletesApp">
...
<!-- Somewhere within the <body> tag: -->
<div ng-view></div>
...
</html>
3. 템플릿 및 컨트롤러 작성
그런 다음 각 작업에 대해 부분 뷰 템플릿과 일치하는 컨트롤러를 생성합니다.예: 선수 세부 정보 보기:
부분 운동/선수 운동html:
<div>
... Athete detail view here
</div>
playerDetailCtrl.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 config하여 route config)를 합니다.$routeParams★★★★★★★★★★★★★★★★★★.
4. 링크 추가
마지막 단계는 실제로 HTML에 링크와 버튼을 사용하여 다른 보기로 이동하는 것입니다.표준 HTML을 사용하여 다음과 같은 URL을 지정하기만 하면 됩니다.
<a href="/athletes/{{athleteId}}/edit">Edit</a>
주의: 표준 URL과 해시 URL
API를하지 않는 이 HTML5 History API와 더 .http://example.com/#/athletes ★★★★★★★★★★★★★★★★★」http://example.com/#/athletes/1.
$location으로 사용)$route은 이 수 있기 수 브라우저에서는 수 있습니다은 이 문제를 해결할 수 있기 때문에 최신 브라우저에서는 깔끔한 URL을 얻을 수 있으며 오래된 브라우저에서는 해시 URL로 폴백할 수 있습니다.를 지정하고 .$location오래된 클라이언트에 대한 개서를 처리합니다.유일한 추가 요건은 서버 측에서 URL Rewriting을 구성하여 모든 URL이 앱의 메인 index.html로 다시 작성되도록 하는 것입니다.자세한 내용은 AngularJS $location Guide를 참조하십시오.
angular way는 휴식을 취하는 방법입니다.
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가 이러한 기준을 충족하지 못하거나 더 많은 유연성이 필요한 경우 하위 수준의 $http 서비스를 기반으로 자체 $resource와 같은 CRUD 서비스를 구축할 수 있습니다.후자의 한 가지 방법은 다음과 같습니다.
옵션 1: $http 서비스
AngularJS는 JSON(REST 서비스와의 대화에 최적인)을 사용하여 웹 서비스에 AJAX 요청을 보내고 데이터 수신을 수행하는 서비스를 제공합니다.
예를 들자면(각도에서 인용)JS 매뉴얼 및 약간 수정):
$http({ method: 'GET', url: '/foo' }).
success(function (data, status, headers, config) {
// ...
}).
error(function (data, status, headers, config) {
// ...
});
옵션 2: $resource 서비스
AngularJS에는 REST 서비스에 대한 보다 높은 수준의 액세스를 제공하는 다른 서비스도 있습니다(예: Angular에서 다시 인용).JS 매뉴얼):
var Users = $resource('/user/:userId', { userId: '@id' });
var user = Users.get({ userId: 123 }, function () {
user.abc = true;
user.$save();
});
옵션 3: 각도 변경
또한 Resangular와 같은 서드파티 솔루션도 있습니다.사용 방법에 대해서는, 메뉴얼을 참조해 주세요.기본적으로, 이것은 훨씬 더 선언적이고 더 많은 세부 사항을 추상화합니다.
각진 상태JS RESTful 서버 측 데이터 소스를 사용할 수 있습니다. $resource라는 서비스가 내장되어 있습니다.
또는 $resource 이상의 추가 기능이 있는 resangular를 사용할 수도 있습니다.
완전한 제어를 원하는 경우 항상 http와 대화하기 위한 낮은 수준의 각도 구성요소인 $http 서비스를 사용할 수 있습니다.
단순히 RESTful한 것을 구현합니다. 즉, 각도입니다.JS way. RESTful이 뭔지 모르시거나 조금 알고 더 알고 싶으시면 이 기사를 읽어보시길 권해드립니다.
기본적으로 REST는 WEB URI의 직관적인 구현으로 이해되며, 모든 HTTP 동사를 실제로 올바르게 사용합니다.REST는 웹 애플리케이션을 구축하기 위한 접근법이자 아키텍처입니다.
언급URL : https://stackoverflow.com/questions/18003092/whats-the-angularjs-way-of-handling-a-crud-resource
'programing' 카테고리의 다른 글
| 'CONCATENATE_SCRIPTS'는 wp-config에서 어떻게 작동합니까? (0) | 2023.03.01 |
|---|---|
| angularjs의 ng-click과 data-ng-click의 차이점은 무엇입니까? (0) | 2023.03.01 |
| TypeScript에서 클래스 유형 확인 (0) | 2023.03.01 |
| Angular의 구조JS의 $watch 기능이 작동합니까? (0) | 2023.03.01 |
| 리액트의 차이점은 무엇입니까?Function Component와 플레인 JS 함수 컴포넌트 (0) | 2023.03.01 |