javascript - 将普通js转换为 Angular 语法的快速方法？

Question

所以我有一个应用程序，只需点击 gmail api，然后授权，获取电子邮件 ID 列表，然后获取这些电子邮件。我用普通的旧java脚本编写了这个，但我想将其转换为Angular。 我观看了很多视频并阅读了很多文档，但我发现这些视频从未做到这一点。 我将如何构建这样的东西？我会为此使用工厂还是可以将所有 js 放在 Controller 方法中？

 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>"; 
                });
            });
        });
    });
});
   }

Answer 1

最快的方法是将其包装到服务/工厂中并仅向消费者公开所需的功能。请注意，您可能不必导出所有函数，这会带来更干净的服务。

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();
  };

});