Using it with Azure M.S.


The most advanced provider for CDC (for now) is for Azure Mobile Services (or A.M.S.). We will run through the process of setting up a backend with A.M.S. It will enable you to run the samples and play with AngularCDC.
Angular & AMS Demo

Create an Azure Mobile Services account


You will first need an Azure account. If you don't already have one, you could register for a free trial.


Configure your backend


Once you have your account, we will need to create a Mobile Service within Azure.



Choose a friendly name, we choose "peopleACDC". Select your data store and your datacenter location (the one closest to you is probably the better).


Configure your database


If you choose to create a new database, you will be prompted for details. Remember to keep track of your db password.




Get your appUrl and your appKey


To connect to your services, you will need a specific url, and an application key. You can get all details, and create multiple applications in your service dashboard.



//configure appURL and appKey
var client = new WindowsAzure.MobileServiceClient(
    "https://peopleacdc.azure-mobile.net/",
    "CeRrxsHEcdidQgAOEumtTKnLTsyUBR77" 
);

Pick these appUrl and appKey and save it for later.


Create your table


In "Data", click on "Add a table".



Choose a name, if you want to stick to the sample available in source code, name it "people".


We'll need to add these columns:

  • address
  • address1
  • email
  • firstname
  • homephone
  • imgurl
  • lastname

Create your JS application


Now it's time to create your Angular application. First create a html file, say "index.html", and fill it with a blank html structure like this:

<html>
    <head></head>
    <body></body>
</html>

Reference libraries


Add the references to the Cloud Data Connector available on CDN: http://az633345.vo.msecnd.net/cdn/ajax/cdc/0.95/cdc.js js file and the Azure provider API in the head of your page, as well as a reference to the Azure Mobile Services client library.

<script src="[path]/cdc.js"></script>
<script src="[path]/angular-cdc-azuremobileservices.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/mobileservices/MobileServices.Web-1.1.0.min.js"></script>

Add the reference to the angular CDC module available on CDN: http://az633345.vo.msecnd.net/cdn/ajax/cdc/0.95/angular/angularModule.js (if you are using Angular)


<script src="[path]/angularModule.js"></script>

Declare your app


In your index.html, add a script tag after the references, and declare your application module.

<script type="text/javascript">
  $(function(){
    var app = angular.module('demoApp', ['CDC', 'AngularCDC.AzureMobileServices']);
  });
</script>

Now you could use your application module to bootstrap the application.

<html ng-app="demoApp">

Create Angular controller


To add some UI, you will add a controller, just after the creation of the module.


app.controller('demoController', ['$scope', 'CDCService', 'angularCDCAzureMobileService',
    function ($scope, CDCService, angularCDCAzureMobileService) { 
    }
]);
                    

The controller declares dependencies on dataService, your Cloud Data Connector, and azureDataService, your provider for Azure Mobile Services.


Call your controller in your index.html


Now you have to link your controller to something. Add this declaration on the body node :

<body ng-controller="demoController">

Link your app to A.M.S. and connect


The A.M.S. provider must be configured to work properly. You will initialize it and specify your data source and the tables you want to use. You will also register the A.M.S. provider in AngularCDC.


$scope.initialize = function () {
    //configure url, appkey and your tableName
    angularCDCAzureMobileService.addSource('https://angularpeoplev2.azure-mobile.net/',
                                            'DDJpBYxoQEUznagCnyYNRYfkDxpYyz90',
                                            ['people']);  
    CDCService.addSource(angularCDCAzureMobileService);
    CDCService.connect(function (results) {
        // We are good to go
    }, $scope, $scope.$apply,3);
};
$scope.initialize();

Azure Cloud Data Connector requires your appUrl, appKey and your table name.

Azure Cloud Data Connector will create a data source and you will work with AzureDataService to Add, Edit, Update and Delete your stuff.


Let there be Rock !


You can now get the most out of CDC and add, edit, update and delete stuff to/from your Azure backend.



// function to add a new data entry
$scope.Add = function (tableName, entity) {
    CDCService.add(tableName, entity);
                  
    CDCService.commit(function () {
        // Things went well, call a sync  (is not necessary if you added the scope to connect function of CDCService)
        //$scope.sync();
    }, function () {
        console.log('Problem adding data');
    });
    $scope.menu = "main";
    $scope.currentEdit = {};
};
                        

$scope.change = function (entity) {
    // entity is already controlled, we just need to call a commit
    CDCService.commit(function () {
        // Things went well, call a sync (is not necessary if you added the scope to connect function of CDCService)
        // $scope.sync();
    }, function (err) {
        console.log('Problem updating data: ' + err.message);
    });
    $scope.menu = "main";
    $scope.currentEdit = {};
};

$scope.Delete = function (tableName, entity) {
    CDCService.remove(tableName, entity);
    CDCService.commit(function () {
        // Things went well, call a sync (is not necessary if you added the scope to connect function of CDCService)
        // $scope.sync();
    }, function (err) {
        console.log('Problem deleting data: ' + err.message);
    });
    $scope.menu = "main";
    $scope.currentEdit = {};
};

// function to sync the data
$scope.sync = function () {
    CDCService.readAll();
};