angularjs - 启动 AngularJS + 云端点

标签 angularjs google-cloud-endpoints

有没有一种方法可以在不手动启动 Angular 的情况下初始化 Angular 和端点?

我以为我找到了一个优雅的解决方案 here .

对我来说不幸的是,尽管脚本的顺序不同,window.init 并不总是在回调调用之前声明。它在刷新时工作正常,但并不总是在首页加载时工作。控制台输出“Uncaught TypeError: Object [object global] has no method 'init'”。

最后,我尝试从端点回调手动引导 Angular(例如 here ,但在尝试此操作时,它导致了 Angular 应该替换 Handlebars 占位符的滞后,因此 html 充满了 Handlebars 几秒钟。我感谢这可能是执行此操作的唯一方法,但是上面来自 google 的第一个链接表明不然。

更新:

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

这似乎解决了我的问题,它强制 Angular Controller 在端点之前初始化。谷歌页面上没有提到这一点,但似乎有必要强制执行初始化顺序。

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>

客户.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;
                                     });

                                });
    };


};

最佳答案

这整理了我的启动顺序:

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

ng-cloak 指令阻止我看到一闪而过的未解析的 Angular 指令。

关于angularjs - 启动 AngularJS + 云端点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18403604/

相关文章:

javascript - 为什么 docker-compose 中的 Web 应用程序无法连接到同一组合中的另一个容器?

angularjs - angularjs 中 jsonp 请求的异常处理

angularjs - Angular ui 路由器 : How to defer rendering the template until authorization is complete?

python-2.7 - 谷歌应用引擎 : object has no attribute ToMessage

google-cloud-storage - 桶是请求者支付桶,但没有提供用户项目

javascript - Protractor 和 Karma 可以一起使用吗?

mysql - 如何从 Angular 发送查询到mysql

java - 通过 Google Cloud Endpoints 传输 BigDecimal 的异常(exception)情况

google-app-engine - Twilio TwiML XML 字符串而不是 url

java - 在所有网络接口(interface)上启动 google appengine devserver