2013-08-23 3 views
3

Есть ли способ инициализировать угловые и конечные точки без ручной загрузки углов?Boot AngularJS + Облачные конечные точки

Я думал, что нашел изящное решение here.

К сожалению для меня window.init не всегда объявляется до того, как он вызван обратным вызовом, несмотря на порядок последовательности скриптов. Он отлично работает при обновлении, но не всегда при загрузке первой страницы. Консольные выходы «Uncaught TypeError: Object [объект global] не имеет метода« init ».

Наконец-то я попытался вручную выполнить бутстрап с угловым обратным вызовом конечных точек (например, here, но при попытке это вызвало задержку, когда угловая замена заменителей руля, поэтому html был полон рулей на несколько секунд. это может быть единственным способом сделать это, однако, по первой ссылке выше от Google предлагает иначе

UPDATE:.

function customerInit(){ 
    angular.element(document).ready(function() { 
    window.init(); 
    }); 
} 

Это, кажется, чтобы решить мою проблему, он навязывает, что угловой контроллер инициализируется перед конечными точками Это не т на странице googles здесь, но, похоже, необходимо обеспечить порядок инициализации.

HMTL:

<html ng-app lang="en"> 
    <head> 
     <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css"> 

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
     <script src="js/customer.js"></script> 
     <script src="https://apis.google.com/js/client.js?onload=customerInit"></script> 

    </head> 

<body> 

<div class="container" ng-controller="customerCtrl"> 
     <div class="page-header"> 
      <h1>Customers</h1> 
     </div> 

     <div class="row"> 
     <div class="col-lg-10"> 

       <table id="customerTable" class="table table-striped table-bordered table-hover"> 
        <thead> 
         <tr> 
          <th>First Name</th> 
          <th>Surname</th> 
          <th>Email Address</th> 
          <th>Home Phone</th> 
          <th>Mobile Phone</th> 
          <th>Work Phone</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr ng-repeat="customer in allCustomers"> 
          <td>{{customer.firstName}}</td> 
          <td>{{customer.surName}}</td> 
          <td>{{customer.emailAddress}}</td> 
          <td>{{customer.homePhone}}</td> 
          <td>{{customer.mobilePhone}}</td> 
          <td>{{customer.workPhone}}</td> 
         </tr> 
        </tbody> 
       </table>  

      </div> 
     </div> 
     </div> 

</div> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script> 

    </body> 
</html> 

customer.js:

function customerInit(){ 
    window.init(); 
} 

function customerCtrl ($scope) { 

    window.init= function() { 
      $scope.$apply($scope.load_customer_lib); 
     }; 

    $scope.is_backend_ready = false; 

    $scope.allCustomers = []; 

    $scope.load_customer_lib = function() { 
           gapi.client.load('customer', 'v1', function() { 
            $scope.is_backend_ready = true; 
            $scope.getAllCustomers(); 
            }, '/_ah/api'); 
           }; 


    $scope.getAllCustomers = function(){ 

     gapi.client.customer.customer.getCentreCustomers() 
           .execute(function(resp) { 

            $scope.$apply(function() { 
             $scope.allCustomers = resp.items; 
            }); 

           }); 
    }; 


}; 

ответ

2

Один из способов, чтобы обернуть несколько вызовов для инициализации в обещаниях Полные подробности здесь http://anandsekar.github.io/initialize-google-appengine-and-angularjs/

angular.module('webApp').factory('cloudendpoint', function ($q) { 
    return { 
     init:function() { 
      var ROOT = '//' + window.location.host + '/_ah/api'; 
      var hwdefer=$q.defer(); 
      var oauthloaddefer=$q.defer(); 
      var oauthdefer=$q.defer(); 

      gapi.client.load('helloworld', 'v1', function() { 
       hwdefer.resolve(gapi); 
      }, ROOT); 
      gapi.client.load('oauth2', 'v2', function(){ 
       oauthloaddefer.resolve(gapi); 
      }); 
      var chain=$q.all([hwdefer.promise,oauthloaddefer.promise]); 
      return chain; 
     }, 
}); 
+0

Спасибо большое, это было очень полезно! Пользуясь этим обещанием, наряду с решением в маршрутизации для загрузки зависимостей для каждого маршрута/представления – nWardy

3

Это выяснял мою последовательность загрузки:

function customerInit(){ 
     angular.element(document).ready(function() { 
     window.init(); 
     }); 
    } 

Директива нг-накидка мешает мне видеть вспышку непроверенные угловые директивы.

+0

Такая же проблема (бывает, когда материал кэшируется), хороший ответ. – Kuno

Смежные вопросы