CODEWITHSUNDEEP
javascriptangularjs
user3298823
user3298823

Reputation: 302

Fast way to turn normal js into angular syntax?

So I have an app that just hits the gmail api, authorizes then, gets a list of of email ids, then fetches those emails. I have this written in plain old java script but I want to convert this into Angular. I've watched a bunch of videos and read a lot of documentation but I find the videos never go as far as doing this. How would I structure something like this? Would I use a factory for this or can I just drop all the js in a controller method?

 function handleClientLoad() {
    gapi.client.setApiKey(apiKey);
    window.setTimeout(checkAuth,1);
  }
  function checkAuth() {
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
  }
  function handleAuthResult(authResult) {
    var authorizeButton = document.getElementById('authorize-button');
    if (authResult && !authResult.error) {
      authorizeButton.style.visibility = 'hidden';
      makeApiCall();
      getMessages();
    } else {
      authorizeButton.style.visibility = '';
      authorizeButton.onclick = handleAuthClick;
    }
  }
  function handleAuthClick(event) {
    gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
    return false;
  }
  // Load the API and make an API call.  Display the results on the screen.
  function makeApiCall() {
    gapi.client.load('plus', 'v1', function() {
      var request = gapi.client.plus.people.get({
        'userId': 'me'

      });

      console.log(request);
      request.execute(function(resp) {
        var heading = document.createElement('h4');
        var image = document.createElement('img');
        image.src = resp.image.url;
        heading.appendChild(image);
        heading.appendChild(document.createTextNode(resp.displayName));
        document.getElementById('content').appendChild(heading);
      });
    });
  }
                           };
 function getMessages() {
   gapi.client.load('gmail', 'v1', function() {
   var request = gapi.client.gmail.users.messages.list({'userId' :'me',
   labelIds: ['INBOX'],
   });
  request.execute(function(resp) {
    var content = document.getElementById("message-list");
     angular.forEach(resp, function(value, key) {
          angular.forEach(value, function(value, key) {
            var newEmail = gapi.client.gmail.users.messages.get({'userId': 'me','id': value.id ,'format':'metadata', 'metadataHeaders': ['subject','from','to','date']});
                newEmail.execute(function(resp) {
                    var emailw = resp;
                    content.innerHTML += emailw.payload.headers[0].name + "    "; 
                    content.innerHTML += emailw.payload.headers[0].value + "<br>"; 
                    content.innerHTML += emailw.payload.headers[1].name + "    ";
                    content.innerHTML += emailw.payload.headers[1].value + "<br>"; 
                    content.innerHTML += emailw.payload.headers[2].name + "    "; 
                    content.innerHTML += emailw.payload.headers[2].value + "<br>"; 
                    content.innerHTML += emailw.payload.headers[3].name + "    "; 
                    content.innerHTML += emailw.payload.headers[3].value + "<br><br><br><br><br><br><br><br>"; 
                });
            });
        });
    });
});
   }

Upvotes: 0

Views: 56

Answers (1)

null
null

Reputation: 7926

Quickest way is by wrapping it into a service/factory and exposing only the needed functions to the consumer. Note that you probably don't have to export all functions, which results in a much cleaner service.

angular.module('myApp').factory('myGapi', function() {

  // Paste functions here  

  function handleClientLoad() {}

  function makeApiCall() {}

  // ...

  return {
    // Expose the function to the consumers
    makeApiCall: makeApiCall
  };
});

// Consume the myGapi service    
angular.module('myApp').controller('MyController', function($scope, myGapi) {

  $scope.click = function() {
    myGapi.makeApiCall();
  };

});

Upvotes: 1

Related Questions