Angular Cloud Data Connector

As announced with Microsoft Open Technologies (see Eric Mittelette blog post), we released a new open source JavaScript framework called Angular Cloud Data Connector.

You want to discuss about it? Please ping me on twitter: @deltakosh

Angular Cloud Data Connector, or AngularCDC is a library for Angular.js that allows you to work seamlessly with many data sources. If you are familiar with .NET, you can think of it like the DataSet of JavaScript.

Additionally, AngularCDC also supports offline mode and can handle all CRUD operations for you.

Thanks to providers, you can easily get information from various data sources with the same client code.

So far, we are supporting the following providers:

• Azure Mobile Services
• Amazon Web Services (DynamoDB)
• Facebook (read only)
• Twitter (read only)
• Ordrin (read only)
• Nitrogen (read only)

 

The idea here is obviously to get more and more providers (please feel free to contribute!) in order to be able to reach every data sources we can find on the web (think about CouchDB, Azure Tables, etc…)

Note: thanks to Cory Fowler, I was invited to Web Camps TV on Channel9 to discuss about AngularCDC: https://channel9.msdn.com/Shows/Web+Camps+TV/Offline-Web-Based-Data-Storage-with-Cloud-Sync-using-Angular-Cloud-Data-Connector-ACDC

Getting started with AngularCDC

If you are using Visual Studio you can just load AngularCDC.sln file. But you can as well setup a grunt environment to build your own version of AngularCDC. We already defined the gruntfile.js for your convenience.

To directly use AngularCDC, you just have to reference the angular-cdc.js file which is available in the /dist folder in the repository.

Then depending on the provider you want to use you will have to reference specific files. For instance, if you want to connect to Azure Mobile Services, you will have to add the following references:

• angular-cdc-azuremobileservices.js (from AngularCDC)
• https://ajax.aspnetcdn.com/ajax/mobileservices/MobileServices.Web-1.1.0.min.js

 

Then the magic can happen!

You can use Angular.js DI to reference AngularCDC objects:

var app = angular.module('demoApp', ['AngularCDC', 'AngularCDC.AzureMobileServices']);

Once this is done, you have to initialize the provider with required information:

$scope.initialize = function () {
    // configure A.M.S.
    angularCDCAzureMobileService.addSource(
        'serviceUrl', // appUrl
        'xxxxxxxxxx', // appKey
        ['people']);  // table name
    // register A.M.S. to AngularCDC
    angularCDCService.addSource(angularCDCAzureMobileService);
    // connect to service
    angularCDCService.connect(function (results) {
        // We are good to go
    }, $scope, 1);
};
$scope.initialize();

When everything is connected you can use angularCDCService object to do regular operations like for instance adding a new entity:

$scope.add = function (entity) {
    angularCDCService.add('people', entity);
    angularCDCService.commit(function () {
        // Things went well, call a sync  (which is not necessary 
        // if you added the $scope to connect function of angularCDCService)
        // $scope.sync();
    }, function () {
        console.log('Problem adding data');
    });
};

AngularCDC will then take care of everything for you. For instance, if you are not connected to the network, the commit operation will save everything in a local IDB object and will then synchronize data back to the cloud.

And obviously, all the client code remains the same if you decide to switch providers!

If you want to learn more about basic usage of AngularCDC, please visit official documentation.

How does it work?

AngularCDC is based on several TypeScript files:

For instance, the angularCDCService connects with providers through an interface defined with TypeScript called IDataService:

module AngularCloudDataConnector {
    export interface IDataService {
        _dataId: number;
        tableNames: Array<string>;

        add(tableName: string, entity: any, onsuccess: (newEntity: any) => void, onerror: (error: string) => void): void;
        update(tableName: string, entity: any, onsuccess: (newEntity: any) => void, onerror: (error: string) => void): void;
        get(updateCallback: (result: any) => void, lastSyncDates: { [tableName: string]: Date; }): void;
        remove(tableName: string, entity: any, onsuccess: () => void, onerror: (error: string) => void): void;
    }
} 

Basically each provider has just to implement this interface.

If you want to learn more about how to create your own provider, please visit official documentation.

connectivityService.ts and offlineService.ts are used to support offline mode with the help of IndexedDB. To address devices where IndexedDB is not supported we also added an in-memory emulation with inMemoryDatabase.ts

The core of AngularCDC is in database.ts where the “dataset” is created and maintained.

Going further

The best way to learn more about AngularCDC is to clone the repository and start playing with the code itself.

And please note that we are looking for contributors to add support for new providers as well !