Well structured AngularJS modules mimic the architecture of Drupal Services 3.x. for your next AngularJS / Ionic Drupal Headless / Decoupled project
Angular Drupal7 Services is a REST client for AngularJS, which allows you to user predefined functions when communication with Drupal's api endpoints. Unlike the other project focusing on the same topic, Angular Drupal7 Services is precisely organized around the Drupal Services 3.x architecture and naming conventions.
It optionally provides events next to the common used promise approach.
A full set of Drupal's resources is available, and all basic workflow's depending to authentication or helpers for CRUD operations are also provided as a set of extra modules.
##DEMOS Check out the Drupal-API-Explorer for a full demo Or check out the sample implementation for Ionic-Headless-Drupal
(1) Get Angular Drupal7 Services:
$ npm install ng-drupal-7-services
from your console$ bower install ng-drupal-7-services
from your console(2) Include ng-drupal-7-services.js
in your index.html
.
(3) Add 'd7-services'
to your main module's list of dependencies
(1) Insert the ng-drupal-7-services.js
bundle into your index.html
file.
<!doctype html>
<html ng-app="myApp">
<head>
<script src="bower_components/angular/angular.min.js"></script>
<!-- ng-drupal-7-services and it's dependencies-->
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="bower_components/ngstorage/ngStorage.js"></script>
<script src="bower_components/ng-drupal-7-services/dist/ng-drupal-7-services.js"></script>
<script>
angular.module('myApp', ['d7-services'])
.config(function configFunction(DrupalApiConstant) {
//configure your drupal instance
DrupalApiConstant.drupal_instance = 'http://your.projects.domain/';
});
</script>
...
</head>
<body>
...
</body>
</html>
(2) Using the services.
angular
angular.module('myApp')
.controller('NodeController', ['NodeResource', 'NodeChannel', function(NodeResource, NodeChannel){
//fire request
var retrievePromis = NodeResource.retrieve({nid:1});
//using promise.then callbacks
retrievePromis.then(function(data) { ... },function(error) { ... });
//subscribing to events
//This could happen in another directive/controller too
NodeChannel.subRetrieveConfirmed($scope, function(data){ ... });
NodeChannel.subRetrieveFailed($scope, function(error){ ... });
}]);
##Configuration Basically all configurable options are wrapped in an angular constant. IF you changed any of Drupal's default settings adopt the constants in DrupalApiConstant in Angular's config phase as shown above. Find all available options in the API Documentation under Commons/DrupalApiConstant.
angular.module('myApp', ['d7-services'])
.config(function configFunction(DrupalApiConstant) {
...
//your changes here
...
});
##Supported Drupal Modules Here is a list of supported Drupal services 3.x modules:
##Extra Resources Following extramodules are provided for simplifing authentication routing and viewcomposition
Authentication authenticaion workflows and helper functions
AccessControl handle access for routing and actions
Directives show hide elements by role or accesslevel
Drupal Services
Drupal Services Views
Drupal Geocoder -Views Geocoder
Drupal Services Menu
Drupal Services Definition
Extra Resources
##AccessControl
###Services
###Setup for CORS
api/v1*|<mirror>|POST,PUT,GET,DELETE|Content-Type,Authorization,X-CSRF-TOKEN|true
#Links Testing resources on a test server => https://www.drupal.org/node/1447020