Skip to content

wnabil/ngx-drupal7-services

Repository files navigation

Angular 2+/Ionic 2+ Drupal 7 Services

Typescript angular module for Drupal Services 3.x

npm version

Angular Drupal 7 Services is a REST client for Angular 2+, which allows you to use predefined functions when communication with Drupal's api endpoints.
Unlike the other project focusing on the same topic, Angular Drupal 7 Services is precisely organized around the Drupal Services 3.x architecture and naming conventions.

It optionally provides events next to the common used observable 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.

Also supports Server Side Rendering "Angular Universal".

DEMOS

Running the demo:

git clone https://github.com/wnabil/ngx-drupal7-services.git
cd ngx-drupal7-services
npm install
ng serve

Then navigate to localhost:4200 via your browser.

Get Started

(1) Get Angular Drupal 7 Services:

npm install --save ngx-drupal7-services

(2) import ngx-drupal7-services in your app.module.ts and imports array.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { Drupal7ServicesModule, DrupalConstants, Settings } from 'ngx-drupal7-services';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    Drupal7ServicesModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

(3) Implement 'DrupalConstants.Settings' to add the back-end configuration and add it to `AppModule' constructor.

export class AppModule {
  constructor () {
    const drupalSettings: Settings = {
      apiEndPoint: 'api',
      apiHost: 'localhost',
      apiProtocol: 'http',
      language: 'und',
      requestTimeout: 5000,
      allowOffline: true // optional
    };
    DrupalConstants.Settings = drupalSettings;
    // OPTIONAL
    DrupalConstants.Instance.handleOffline = this.customHandle;
  }

  /**
   * OPTIONAL
   * custom http offline handler
   * you can add sweet alert message for example
   * Note that you always must return an Observable
   */
  customHandle() {
    alert("custom offline handler! you are offline");
    return Observable.of();
  }
}

(4) Import the required service into your component and use the methods inside it

import { UserService } from 'ngx-drupal7-services';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private userService: UserService) { }

  login(username: string, password: string) {
    const user = {
      username: username,
      password: password
    };
    this.userService.login(user).subscribe(connection => {
      // re-direct to user pofile or show welcome message.
    });
  }
}

Contribution, Ideas and pull requests are welcome, Please open an issue on Github or contact me on [email protected] if i didn't response in approx 2 days.

Configuration

Basically all configurable options are wrapped in an angular constant. You must implement your own application configuration for the DrupalConstants.Settings as shown above.

Supported Drupal Modules

Here is a list of supported Drupal services 3.x modules "Others are still WIP":

  • Services 7 Resources

  • Services Views 1 Resources

  • Services Entity 5 Resources

  • Services Menu 1 Resources

  • Services FBOauth 1 Resources

  • Push Notifications 2 Resources

  • Services Search 2 Resources // create an issue please if you want this to be implemented "PR welcome".

  • Drupal Services

    • Comment Resource
      • Retrieve
      • Create
      • Update
      • Delete
      • Index
      • CountAll
      • CountNew
    • File Resource
      • Retrieve
      • Create
      • Delete
      • Index
      • Create_raw
    • Node Resource
      • Retrieve
      • Create
      • Update
      • Delete
      • Index
      • Files
      • Comments
      • Attach_file
    • System Resource
      • Connect
      • Get_variable
      • Set_variable
      • Del_variable
    • TaxonomyTerm Resource
      • Retrieve
      • Create
      • Update
      • Delete
      • Index
      • SelectNodes
    • TaxonomyVocabulary Resource
      • Retrieve
      • Create
      • Update
      • Delete
      • Index
      • GetTree
    • User Resource
      • Retrieve
      • Create
      • Update
      • Delete
      • Index
      • Login
      • Logout
      • Token
      • Request_new_password
      • Register
      • Cancel
      • Password_reset
      • Resend_welcome_email
  • Drupal Services Views

    • Views Resource
      • Retrieve
  • Drupal Services Entity

    • Entity Resource
      • Retrieve
      • Create
      • Update
      • Delete
      • Index
  • Drupal Services Menu

    • Menus Resource
      • Retrieve
  • Drupal Services FBOauth

    • FBOauth Resources
      • Connect
  • Push Notifications

    • Push Notifications Resources
      • Create
      • Delete

Setup for Drupal

  • Start with a fresh Drupal7 installation.

Services

  • install Drupal Services
  • Go to admin/structure/services/add and create a new endpoint with following settings:
    • machine name: api
    • server: REST
    • path: api
    • debug: unchecked
    • session authentication: checked
  • Then click the edit resources link and open the resources tab. Now every resource you like by check box.
  • Then click Save
  • Click the Server tab
  • For Response formatters check following:
    • json
  • For Request parsing check following:
    • application/json
    • multipart/form-data (for some file upload resources)
  • Click Save.
  • Flush all of Drupal's caches.
  • Some requests requires the user to have permission to do them, make sure you configured your user permissions to match the application requirements

Setup for CORS

  • install CORS
  • Go to admin/config/services/cors and paste following into the textarea

api/*|<mirror>|POST,PUT,GET,DELETE|Authentication,Accept,Content-Type,X-CSRF-TOKEN|true.

services/session/token|<mirror>|GET|Authentication,Accept,Content-Type,X-CSRF-TOKEN|true.

Change Logs

  • 1.0.2

    • Adding change logs to readme file.
    • System service/user service: saving the connection after logging in and system connect resource.
    • Adding support for adding Cookie header in drupal constants settings object.
    • drupal connection now will be retrived from the DrupalConstant singleton first, otherwhise we will get them from cookies "usefull for making multiple authintications and changing them dinamically during the runtime".
  • 1.1.0

    • Upgrade to angular 5
  • 1.1.1

    • Fix logging out not clearing all data
    • Use set httponly for cookie header
  • 1.2.1

    • Fixes #1 - Add support for offline browsing
    • Add entity and field structure support for drupal fields
  • 1.2.2

    • Add support for view args of type array
  • 1.2.3

    • Add new sessionDays option to support dynamic session expiration
  • 1.2.4

    • Change views display_id property to required
  • 1.3.0

    • Add support for services fboauth module
  • 1.4.0

    • Upgrade to use the new HttpClient 😏
  • 1.4.1

    • Refresh CSRF token after facebook connect
  • 1.4.2

    • Add Authentication header
  • 1.5.0

    • Add support for push notifications module
  • 1.5.1

    • fix entity structure and add support for custom keys
  • 1.6.0

    • Upgrade to Angular 6
  • 1.6.1

    • remove node_modules
    • fix dependencies
    • fix broken post methods in user, file resources issue #12
  • 1.7.0

    • upgrade to angular 7
    • use ng library and ng packagr
    • use localstorage and remove angular cookies
  • 1.7.1

    • fix #18 - remove no resouce trailing slash
    • fix #15 - fix object filters serialize for view resource
  • 1.7.2

    • fix app clearing all localStorage 😓
  • 1.7.3

    • fix double slash in custom resources
  • 1.7.4

    • PR #28 - Fix token refresh on connect
    • PR #26 - Add httpClient event option
  • 1.7.5

    • fix timestamp in save session
  • 1.7.6

    • Revert PR #26
  • 1.8.0

    • Upgrade to Angular 8
  • 1.8.1

    • SSR support
  • 1.12.1

    • Upgrade to Angular 12
  • 1.14.0

    • Upgrade to Angular 14

About

Drupal7 services module for Angular 2+ applications

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published