Creating a CRUD App in Minutes with Angular's $resource

This article demonstrates how to efficiently perform CRUD (Create, Read, Update, Delete) operations in AngularJS applications using the $resource service. It simplifies interaction with RESTful backends.

Key Concepts:

• Leveraging $resource: $resource streamlines CRUD operations by providing a convenient interface for interacting with RESTful APIs.
• Setup and Configuration: Requires including angular-resource.js and declaring a dependency on the ngResource module.
• $resource Methods: Utilizes five default methods (get(), query(), save(), remove(), delete()) to interact with RESTful endpoints.
• Extending $resource: Allows customization by adding custom methods or modifying configurations like URL parameters and data transformations.
• Practical Example: A step-by-step guide builds a movie application, showcasing CRUD functionality in a real-world scenario.

Prerequisites:

The angular-resource.js file (available from CDNs like cdnjs) must be included in your HTML, and your AngularJS module needs to declare a dependency on ngResource:

angular.module('myApp', ['ngResource']);

Getting Started:

$resource expects a RESTful backend with endpoints structured like this:

The example uses Node.js, Express, and MongoDB for the backend, but any RESTful API will work.

How $resource Works:

1. Declare Dependency: Inject $resource into your controller or service.
2. Create Resource: Call $resource() with the REST endpoint URL. This returns a resource class.

angular.module('myApp.services').factory('Entry', function($resource) {
  return $resource('/api/entries/:id');
});

3. Use Default Methods: The resource class provides:

   • get(): Retrieves a single resource.
   • query(): Retrieves a collection of resources.
   • save(): Creates a new resource (POST).
   • remove()/delete(): Deletes a resource.

4. Example Usage:

angular.module('myApp.controllers').controller('ResourceController', function($scope, Entry) {
  Entry.get({id: $scope.id}, function(entry) { console.log(entry); });
  Entry.query(function(entries) { console.log(entries); });
  $scope.entry = new Entry();
  $scope.entry.data = 'some data';
  $scope.entry.$save(function() { /* data saved */ });
});

5. Instance Methods: Non-GET methods ($save(), $delete(), $remove()) are available on instances created with new Entry().

6. Update Operation: To perform updates (PUT), add a custom update method:

angular.module('myApp', ['ngResource']);

7. Custom Configuration: The fourth parameter to $resource() allows for further customization, such as stripTrailingSlashes.

Building a Movie App (Example):

The article details building a full movie application using $resource, including controllers, views, and routing (using ui-router). The backend API is CORS-enabled and accessible at http://movieapp-sitepointdemos.rhcloud.com/api/movies. The example covers creating, reading, updating, and deleting movie entries.

Frequently Asked Questions (FAQs):

The article concludes with a comprehensive FAQ section addressing common questions about using $resource for CRUD operations, including error handling, customization, testing, and compatibility with other Angular modules. It also clarifies its usage with non-RESTful APIs and different versions of AngularJS.

The above is the detailed content of Creating a CRUD App in Minutes with Angular's $resource. For more information, please follow other related articles on the PHP Chinese website!