Search code examples
angularjsms-officeoffice-jsoffice-addinsoffice-app

Correct way to Office.initialize in Office add-ins with angularjs

I want to build an Office add-in with angular and angular-ui-router. I don't know what's the correct place to put Office.initialize.

At the moment, I use in index.html:

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js"></script>
<script src="/javascripts/angularApp.js"></script>
...
<body ng-app="myApp">
    <ui-view ng-cloak></ui-view>
</body>

And angularApp.js:

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

var app = angular.module('myApp', ['ui.router', 'ui.bootstrap'])

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider
        .state('ttt', {
            url: '/ttt',
            template: 'ttt',
            controller: 'tttCtrl'
        })
        .state('addinTest', {
            url: '/addin/test',
            template: '<a href="ttt" target="_self">ttt</a><br/><br/><a href="addin/another" target="_self">another page</a>'
        })
}])

app.controller('tttCtrl', [function() {
    console.log('console ttt')
}])

And manifest.xml:

<bt:Url id="Contoso.Taskpane3.Url" DefaultValue="https://localhost:3000/addin/test" />

So loading the add-in shows test page with 2 buttons. Clicking on ttt loads ttt page. However, my test shows that console ttt is displayed twice.

If I remove angular.element(document).ready(...) from Office.initialize, console ttt is correctly displayed only once. However, when opening another page which interacts with Excel, I got an error: Office.context is undefined.

So could anyone tell me if we should use angular.bootstrap(...)? And what's the correct way to do Office.initialize in Office add-in with angularjs? Many random odd behaviours occur because of this...

Solution

  • The reason why console ttt is displayed twice, is I have <body ng-app="myApp"> and angular.bootstrap at the same time.

    If I remove angular.element(document).ready(...) from Office.initialize, console ttt is correctly displayed only once. However, when opening another page which interacts with Excel, I got an error: Office.context is undefined.

    I have not tested, but removing the Office.initialize block completely and keeps <body ng-app="myApp"> may fix the problem...