Question

有没有办法初始化角度和端点而无需手动启动角度？

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

不幸的是，对于我来说，尽管脚本的顺序顺序，window.init并不总是在它被回调调用之前声明。它在刷新时工作正常，但并不总是在第一页加载。控制台输出“Uncaught TypeError：Object [object global]没有方法'init'”。

最后，我尝试从端点回调手动引导角度（例如here，但是在尝试此操作时会导致滞后，其中angular应该替换把手占位符，因此html充满了把手几秒钟我很欣赏这可能是唯一的方法，但谷歌上面的第一个链接建议不然。

更新

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

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

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

                                });
    };


};

Answer 1

这解决了我的启动顺序：

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

ng-cloak指令阻止我看到一系列未解析的角度指令。

Answer 2

一种方法是包装多个调用以初始化为promises 详情请点击此处 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;
        },
});

引导AngularJS +云端点

2 个答案: