Resolve before showing the home page of an office addin

Question

I am trying to use angularjs framework to implement an office addin.

In Home.html , the content is up to $scope.condition

<div ng-controller="MainCtrl">
    <div ng-show="condition">
        part1
    </div>
    <div ng-show="!condition">
        part2
    </div>
</div>

In Home.js , I have the follows. Note that the value of $scope.condition can change in the runtime.

Office.initialize = function (reason) {
    $(document).ready(function () {
        app.initialize();
        angular.element(document).ready(function () {
            angular.bootstrap(document, ['appAng'])
        })
    });
}

var appAng = angular.module('appAng', []);

appAng.controller("MainCtrl", ["$scope", function($scope) {
    $scope.condition = ...
}

The problem is, when the addin is loaded for the first time, before the value of $scope.condition is calculated, both part1 and part2 are shown for a very short time. The time is short, but the first impression is not good.

If it was a website, we could use, for example, resolve of angular-ui-router to make sure $scope.condition is calculated before displaying the page.

Does anyone have any good idea to improve this in an office addin? Note that I don't have a server behind for this addin.

Answer 1

Use ngCloak . You need to add this CSS :

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

And then add the ng-cloak attribute or class to your template:

<div ng-controller="MainCtrl" ng-cloak>
    <div ng-show="condition">
        part1
    </div>
    <div ng-show="!condition">
        part2
    </div>
</div>

Also, keep this quote from the docs in mind:

For the best result, the angular.js script must be loaded in the head section of the html document; alternatively, the css rule above must be included in the external stylesheet of the application.