2013-08-23 88 views
3

有沒有方法來初始化角度和端點而無需手動啓動角?引導AngularJS +雲端點

我以爲我找到了一個優雅的解決方案here

對我來說不幸的是,window.init並不總是在它被回調調用之前被聲明,儘管腳本的順序是順序的。它在刷新時工作正常,但並不總是在第一頁加載。控制檯輸出「Uncaught TypeError:Object [object global]」沒有方法'init'「。

最後我試着從端點回調中手動引導角度(例如here,但是在嘗試這個時候會導致滯後,角度應該替換把手佔位符,所以html充滿了把手幾秒鐘。這可能是上面做然而,這第一個鏈接的唯一途徑從谷歌否則建議

更新:

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

這似乎解決我的問題,它會強制角控制器端點之前進行初始化這不是m這裏在谷歌頁面上提到,但似乎有必要強制執行初始化順序。

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

的NG-斗篷指令阻止我看到的閃光未分解的角度指令。

+0

同樣的問題(當東西是緩存的情況),很好的答案。 – Kuno