Recently, the Angular team announced that Angular 2 had reached the beta milestone. For many of us who have been watching Angular 2 progress, this marks the moment where we can begin to do some serious development. As an Office and SharePoint developer, I am primarily interested in creating apps that interact with Office products through the RESTful APIs, and I can see a lot of opportunities for future articles. For this article, I am going to build an Angular 2 version of the Excel add-in I created in a previous article. This will give you a chance to get started with Angular 2 and compare it to an existing solution. Figure 1 shows the user interface and you can get the code from the IT Unity GitHub repo.

Figure 1, The Excel Add-In

Preparing the development environment

When developing with Angular 2, you can choose to use several different environments – both Microsoft and non-Microsoft. I’m sure, for example, that many developers will choose to use Visual Studio Code, which is a lightweight development environment that runs on many platforms. For my projects, I’d like to take advantage of all the wonderful tooling available in Visual Studio 2015. So, I’ll focus on that environment for this article.

Before beginning development, make sure that you have installed the latest update to Visual Studio. As I write this article, Visual Studio 2015 Update 1 is available. This update contains several exciting tools and improvements. For Angular developers, the TypeScript engine supports ECMAScript 6 and some ECMAScript 7 enhancements. For this article, however, I’m going to stick to using Angular 2 in straight ECMAScript 6 without TypeScript. I’m doing this to expose some of the underlying principles of Angular 2, but the future of Angular 2 development is clearly with TypeScript.

In addition to the Visual Studio update, I installed the Office Developer Tools. If you don’t have the latest update installed, you will see a mock project in the New Project dialog offering to install the tools. Simply select the project and follow the wizard prompts. Figure 2 shows the dialog.

Figure 2, Office Developer Tools installation project

Getting started

One of the great things about using the full Visual Studio environment is that you can take advantage of all the tooling such as the Office Developer Tools. Using the Office Developer Tools, I simply created a new App for Office project and elected to create a Task Pane add-in for Excel 2016. Following the same steps from the previous article, I deleted the Home folder in the project and created a new start page named index.html. Then I modified the add-in manifest to reflect my new start page.

Listing 1 shows references to several key Office and Angular libraries that I’ll use for the add-in. These include the core Angular 2 beta libraries as well as the Office JavaScript library, which contains functionality for working with Excel. The references also include style sheets for the Office UI Fabric and, of course my own custom Angular 2 components, which I’ll create later in the article. Table 1 lists the key references and describes them.

Table 1, Angular 2 and Office references

Category

Library

Description

Angular 2

es6-shim.js

ECMAScript 6 shim browser support

Angular 2

rx.umd.js

Reactive extensions for replacing traditional JavaScript promises

Angular 2

angular2-polyfills.js

Polyfills for various browsers, but also contains functionality for creating the Angular 2 execution context

Angular 2

angular2-all.umd.dev.js

Core Angular 2 functionality

Office

office.js

Office JavaScript API

Office

fabric.min.css

Office UI Fabric

Office

fabric.components.min.css

Office UI Fabric components

Creating the Angular 2 Excel component

After setting up the home page, I was ready to start working with Angular 2. I’ll start by creating the Angular 2 component that works with the Excel spreadsheet. This is where the bulk of the functionality resides.

Angular 2 is based on a pattern of developing components within modules. You create components using the ng.core.Component method, which defines a selector and a template. Selectors specify the DOM element that should be rendered by the component and templates define the HTML that is used for the rendering. Programmatic functionality for the component is defined using the ng.core.Class method, which defines a class with properties and methods. Listing 2 shows my Excel component stubbed out for clarity.

In listing 2, you can see the chained calls to ng.core.Component and ng.core.Class. The component functionality is defined in the class, which has methods for reading and writing spreadsheet data. The data is saved in variables defined within the constructor. I’m not going to spend time discussing how the add-in reads and writes data because I covered that thoroughly in the previous article. Take a look at that article for the explanation, but examine the code for this article to see how I used the new ECMAScript 6 Promise. The key thing to take away for this article is that the spreadsheet data ultimately ends up in the formattedData variable. I’ll use that variable to display the data through binding.

The component binding defines a selector excel-app, which is a DOM element in the index.html file shown in listing 1. This means that the component will render its output within that DOM element. The component also defines a template in a separate file named excel.template.html. This template implements the declarative binding and user interaction with Angular 2. Listing 3 shows the template.

In listing 3, you can see how the formattedData variable is rendered using the Angular 2 repeater ngFor. The repeater has similar functionality to its Angular 1.x predecessor, but it sure looks different. The asterisk is new, but it’s really just shorthand so that you do not have to write out the entire, formal template syntax, which would look something like this:

Within the repeater, however, you can see the familiar “mustache” syntax for databinding values. The repeater makes use of an iterator variable cell, which is defined through the use of the hashtag #cell.

The template also defines buttons, which call methods on the class. Take a look at the (click) syntax within the template.

Creating the Angular 2 bootstrap component

Angular 2 uses the ng.platform.browser.bootstrap method to launch the app. The method takes a component as an argument. For this sample, the Excel component is the one I want to bootstrap. So, this should be a simple matter of making the following call:

ng.platform.browser.bootstrap(app.ExcelComponent);

For Office add-ins, however, the story is a bit more complicated. As I explained in the previous article, the Office JavaScript library has a special initialize method, which must respond within 5 seconds of add-in launch or an error occurs. This is Microsoft’s way of making sure that the add-in is responsive and not hanging up the host office product. In order to ensure the add-in responds to the initialize event and subsequently bootstraps the Angular 2 app, the bootstrapping must occur within the initialization. So, the code must instead look like this:

I place this code in a separate file because the bootstrap component can become much more complicated. So, it’s a good idea to break it out.

With the bootstrap component completed, the add-in is ready to test.

Conclusions and next steps

Angular 2 is a powerful JavaScript framework that makes it easier to build enterprise applications. The framework fits in well with Office and SharePoint development, much of which involves client-side code. Since Angular 2 is now stable at the beta milestone, it’s a good idea for Office and SharePoint developers to start working with it. It’s also a good idea to start looking at related technologies like TypeScript. I’m looking forward to authoring more complex articles that utilize Angular 2 within Office and SharePoint development.

As always, Scot, great article. Some of the syntax with Angular 2 just plain looks weird to me, like the *ng-For and the (click). Having asterisks or parentheses in attribute names feels wrong somehow.

I look forward to seeing more. As you know, I've gone deeper with KnockoutJS than with Angular, but I'm balancing between the two these days. As you learn more about Angular 2, I'll be interested in your take on why it's better. New isn't always better, and since Angular 2 is going to feel almost like a new framework to folks, it'll be interesting to see where the big upsides are for the learning investment - especially in the Office and Office 365 context.

Recently, the Angular team announced that Angular 2 had reached the beta milestone. For this article, I am going to build an Angular 2 version of the Excel add-in I created in a previous article. This...

Our Company

IT Unity revolutionizes the way technical content is
created, customized, and consumed. IT Unity empowers the community of trusted
experts, users, business decision makers, IT professionals, developers, and
industry solution providers to solve business problems with technology.

CONNECT with world-renowned subject matter experts and
peers.

SHARE your solutions and experience-based knowledge with the
global community.

DISCOVER how SharePoint, Office 365, and other technologies
can drive innovation and business value.