页面加载时如何使用AngularJs调用Google Cloud Endpoints以获取用户信息（PICTURE，NAME ..）

Question

I am trying to make a post request using Google Cloud Endpoints and AngularJS when the page loads so I can get the user information and fill the profile picture, profile description and so on...

I am able to run requests when pressing a button or something like that but can't call the google endpoints automatically when the page loads and that is whats I am trying to achieve.

Below is the HTML part where the {{userPicture}} should've been loaded in the angular script:

(HTML)

          <div class="form-group">
            <label class="col-sm-3 control-label">Profile image</label>
            <div class="col-sm-9" ng-controller='initController'>
                <img src="{{userPicture}}" class="user-image-profile" alt="User Image">
            </div>
          </div>

(ANGULAR)

controllers.initController = function($scope, $http){

$scope.userForm = {
        "userEmail" : $.cookie('auth') 
            };

gapi.client.igardenendpoints.getProfile($scope.userForm).execute(function(resp) {
    $scope.$apply(function () {

    if (resp.error) {
        $scope.backmessage.messagetext = "GetProfile Error!"
        console.log("error");

             } else {


    if (resp.userEmail == "TEMPLATE"){

            $scope.backmessage.messagetext = "Error please try again!"


    }else{

        $scope.userPicture = 'https://filiperebollo1986.appspot.com/serve?blob-key=' + resp.profilePicKey;


    }

    }
       });

 });



 }

error

I also tried to use the following:

$scope.initData = function () {

gapi.client.igardenendpoints.getProfile($scope.userForm)...........

}

and run the function at the end of the controller, like:

$scope.initData();

But both does not work, any help on that?

Answer 1

I will not be able to help you in 100% as I'm not using Google Cloud, but will try to do my best.

First of all, to get the data it's usually better to use services rather than do it in the controller.

But anyway, your problem seems to be different. In your HTML did you include your script and client API?

Answer 2

I was able to fix my problem and bellow is the solution:

The problem was that at the moment of my call, the script may not have been loaded once I was using the "ng-app" directive directly on the body TAG.

Now I am injecting the angular module dinamicaly just after my API loading:

                    function googleOnLoadCallback(){  
                        var apisToLoad = 1; // must match number of calls to gapi.client.load()  
                        var gCallback = function() {  
                            if (--apisToLoad == 0) {  
                                //Manual bootstraping of the application  
                                var $injector = angular.bootstrap(document, ['authModule']);  
                                console.log('Angular bootstrap complete ' + gapi);  
                            };  
                        };  
                        gapi.client.load('igardenendpoints', 'v12', gCallback, '//' + window.location.host + '/_ah/api');  
                    }

               </script>

               <script src="https://apis.google.com/js/client.js?onload=googleOnLoadCallback"></script> 

And now It is working!!!!

The only problem now is that when the page loads it appears the {{example}} in the page, is it possible to avoid the {{}} to appear?