CODEWITHSUNDEEP
angularjscordovavisual-studio-2013azure-mobile-servicesonsen-ui
Vincent Liao
Vincent Liao

Reputation: 147

Use Azure mobile service in Angular phonegap app

I'm new to angularJS, and I'm trying to figure out the way to use azure mobile service in angularJS phonegap app. I found this "angular-azure-mobile-service" https://github.com/TerryMooreII/angular-azure-mobile-service/ but was stuck on the third step:

angular.module('myapp', ['myApp.controllers', 'myApp.services', 'azure-mobile-service.module']);

And this is my original code:

(function(){
'use strict';
var module = angular.module('app', ['onsen']);

module.controller('AppController', function($scope, $data) {
$scope.doSomething = function() {
  setTimeout(function() {
    alert('tappaed');
  }, 100);
};
});
module.controller('DetailController', function($scope, $data) {
$scope.item = $data.selectedItem;
});

module.controller('MasterController', function($scope, $data) {
$scope.items = $data.items;  

$scope.showDetail = function(index) {
  var selectedItem = $data.items[index];
  $data.selectedItem = selectedItem;
  $scope.ons.navigator.pushPage('detail.html', {title : selectedItem.title});
};
});

module.factory('$data', function() {
  var data = {};

  data.items = [
      { 
          title: 'Item 1 Title',
          label: '4h',
          desc: 'Lorem ipsum dolor sit amet'
      },
      { 
          title: 'Another Item Title',
          label: '6h',
          desc: 'Ut enim ad minim veniam.'
      },
      { 
          title: 'Yet Another Item Title',
          label: '1day ago',
          desc: 'Duis aute irure '
      },
      { 
          title: 'Yet Another Item Title',
          label: '1day ago',
          desc: 'Duis aute irure.'
      }
  ]; 

  return data;
 });
 })();

And here is my file structure: http://1drv.ms/1yA6VmF

How can I use this "angular-azure-mobile-service" in my project? Any help would be appreciated! Thanks!!

Upvotes: 1

Views: 221

Answers (1)

IsolatedStorage
IsolatedStorage

Reputation: 1215

First of all add an Angular constant to your module

angular.module('myapp', ['azure-mobile-service.module'])
    .constant('AzureMobileServiceClient', {
        API_URL : 'https://<your-azure-service>.azure-mobile.net/',
        API_KEY : '<your-azure-service-API-KEY>',
    })

Next, add the Azureservice to your controller, service etc.

    .service('myApp.service', function(Azureservice) {
        this.init = function () {
            /* Replace the <my-table-name> with the name of the table in your Azure database. You can use any of the Azureservice methods at this point */
            Azureservice.getAll('<my-table-name>')
            .then(function(items){
                $scope.items = items;
            }, function(err){
                console.error(err);
            });

        }
    })

Dependency Injection ensures that the azure-mobile-service.module is injected into your 'myApp.service'. You can then use an of the Azureservice methods to access your data.

PLEASE NOTE: the AzureMobileServiceClient name and Azureservice object name must be specified as per the README.md file otherwise the DI will fail.

Upvotes: 1

Related Questions