I am looking to develop an Office add-in using angularjs and angularjs-ui-router:
<bt:Urls>
<bt:Url id="Contoso.Taskpane3.Url" DefaultValue="https://localhost:3000/addin/test" />
</bt:Urls>
The module name is app, and the router configuration is as follows:
.state('addinTest', {
url: '/addin/test',
tempalte: 'abc',
controller: 'TestCtrl',
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load('https://appsforoffice.microsoft.com/lib/1/hosted/office.js');
}],
initOffice: ['loadMyCtrl', function (loadMyCtrl) {
Office.initialize = function (reason) {
$(document).ready(function () {
angular.element(document).ready(function () {
angular.bootstrap(document, ['app'])
})
});
}
return Promise.resolve(null)
}]
}
})
Here is the controller code:
app.controller('TestCtrl', [function () {
function loadDataAndCreateChart() {
Excel.run(function (ctx) {
var sheet = ctx.workbook.worksheets.getActiveWorksheet();
sheet.getRange("A1").values = "Quarterly Sales Report";
return ctx.sync()
})
}
loadDataAndCreateChart()
}])
When loading the add-in, the expected behavior is to write Quarterly Sales Report to cell A1. However, an error was encountered:
ReferenceError: Excel is not defined at loadDataAndCreateChart
Is there a solution to this issue? Also, is it acceptable to initialize Office in this manner and use angular.bootstrap like shown above?