Skip to content

Latest commit

 

History

History
117 lines (98 loc) · 2.94 KB

ex-taskpane-ng.md

File metadata and controls

117 lines (98 loc) · 2.94 KB
Raw

Example - Office Task Pane Add-in in Angular

This document demonstrates creating a Task Pane Add-in first in an empty project as well as in an existing project using Angular as the technology.

Empty Project

This example creates an Office Task Pane Add-in as Angular within an empty project folder.

$ yo office --skip-install

Prompt Responses

  • Project name (the display name): My Office Add-in
  • Root folder of the project: {blank}
  • Office project type: Task Pane Add-in
  • Technology to use: Angular
  • Supported Office Applications: Word, Excel, PowerPoint, Project
.
├── .bowerrc
├── bower.json
├── gulpfile.js
├── index.html
├── jsconfig.json
├── manifest.xml
├── tsd.json
├── app
│   ├── app.module.js
│   ├── app.routes.js
│   ├── home
│   │   ├── home.controller.js
│   │   └── home.html
│   └── services
│       └── data.service.js
├── content
│   └── Office.css
├── images
│   └── close.png
└── scripts
    └── MicrosoftAjax.js

Existing Project

The generator nodehttps is first used to create a folder for a self-hosted HTTPS site on the local development system.

$ yo nodehttps

Prompt Responses:

  • What is the name of this project: Project Name
  • What port will the site run on?: 8443

Results:

.
├── package.json
└── src
    ├── public
    │   ├── content
    │   │   └── site.css
    │   └── index.html
    └── server
        └── server.js

Now run the Office Add-in generator:

$ yo office --skip-install

Prompt Responses:

  • Project name (the display name): My Office Add-in
  • Root folder of the project: src/public
  • Office project type: Task Pane Add-in
  • Technology to use: Angular
  • Supported Office Applications: Word, Excel, PowerPoint, Project

Results:

.
├── .bowerrc
├── bower.json
├── gulpfile.js
├── jsconfig.json
├── manifest.xml
├── package.json
├── tsd.json
└── src
    ├── public
    │   ├── index.html
    │   ├── app
    │   │   ├── app.module.js
    │   │   ├── app.routes.js
    │   │   ├── home
    │   │   │   ├── home.controller.js
    │   │   │   └── home.html
    │   │   └── services
    │   │       └── data.service.js
    │   ├── content
    │   │   ├── Office.css
    │   │   └── site.css
    │   ├── images
    │   │   └── close.png
    │   └── scripts
    │       └── MicrosoftAjax.js
    └── server
        └── server.js