Boot AngularJS + Cloud Endpoints

Question

Is there a way to initialize angular and endpoints without manual boot of angular?

I thought I'd found an elegant solution here.

Unfortunately for me window.init isn't always declared before it's called by the callback despite the sequence order of scripts. It works fine on refresh but not always on first page load. The console outputs "Uncaught TypeError: Object [object global] has no method 'init' ".

Finally I've tried to manually bootstrap angular from the endpoints callback (eg here, but on trying this it caused lag where angular should replace the handlebar placeholders, so the html was full of handlebars for a few seconds. I appreciate this may be the only way to do this however the first link above from google suggests otherwise.

UPDATE:

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

This seems to solve my problem, it enforces that angular controller is initialized before endpoints. This isn't mentioned on googles page here, but it seems necessary to enforce the order of initialization.

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

                                });
    };


};

nWardy · Accepted Answer · 2013-08-27 13:23:17Z

3

This sorted out my boot sequence:

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

The ng-cloak directive prevents me from seeing a flash of unparsed angular directives.

answered Aug 27, 2013 at 13:23

nWardy

1179 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anand Rajasekar · Accepted Answer · 2014-10-07 05:17:18Z

2

One way is to wrap multiple calls to initialize into promises Complete details here 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;
        },
});

answered Oct 7, 2014 at 5:17

Anand Rajasekar

8378 silver badges5 bronze badges

1 Comment

nWardy Over a year ago

Thanks very much this has been very useful! Going to use this promises approach along with resolve in routing to load dependencies for each route/view

Collectives™ on Stack Overflow

Boot AngularJS + Cloud Endpoints

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related