SharePoint Framework. Создание веб-части на Angular

16 июля, 2018

SharePoint Framework позволяет создавать расширения и веб-части для SharePoint Online (Office 365) и SharePoint on-premise. По умолчанию генератор yeoman для SharePoint Framework поддерживает только фреймворки React и Knockout.

Если у Вас уже есть опыт работы с Angular, то Вы можете использовать данные руководство чтобы начать применять свои знания.

Семь шагов для создания простой веб-части на базе SharePoint Framework с использованием фреймворка Angular.

В предыдущем посте вы можете найти пример создания веб-части с помощью AngularJS.

Шаг №1. yoman

Прежде всего начинаем с генератора yeoman:


yo @microsoft/sharepoint

Выберите параметры как показано на снимке ниже:

Шаг №2. package.json

Откройте файл package.json и добавьте следующие строки (выделены синим цветом):


{
  "name": "spfx-demo-angular",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@microsoft/sp-core-library": "1.5.0",
    "@microsoft/sp-lodash-subset": "1.5.0",
    "@microsoft/sp-office-ui-fabric-core": "1.5.0",
    "@microsoft/sp-webpart-base": "1.5.0",
    "@types/es6-promise": "0.0.33",
    "@types/webpack-env": "1.13.1",
    "lodash": "^4.17.10",
    "reflect-metadata": "0.1.10",
    "rxjs": "~5.0.1",
    "systemjs": "0.19.40",
    "typescript-string-operations": "~1.1.0",
    "typings": "^2.1.1",
    "zone.js": "~0.8.4"
  },
  "devDependencies": {
    "@microsoft/sp-build-web": "1.5.0",
    "@microsoft/sp-module-interfaces": "1.5.0",
    "@microsoft/sp-webpart-workbench": "1.5.0",
    "gulp": "~3.9.1",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "ajv": "~5.2.2"
  }
}

Шаг №3. tsconfig.json

Измените файл tsconfig.json. Удаленные строки выделены красным цветом, добавленные - синим:


{
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "module": "commonjs",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@microsoft"
    ],
    "types": [
      "es6-promise",
      "webpack-env"
    ],
    "lib": [
      "es5",
      "dom",
      "es2015.collection"
      "dom.iterable",
      "es2015",
      "scripthost"
    ],
  },
  "compileOnSave": true
}

Шаг №4. npm install

Сохраните измененные файлы и запустите следующую команду для установки необходимых пакетов (те, которые мы добавили на шаге №2):


npm install

Клиентская веб-часть теперь готова для Angular.

Демонстрационное приложение на Angular содержит модуль, компонент и HTML шаблон. Необходимо просто встроить его в SPFX веб-часть.

В решении создано три файла:

app.module.ts - модуль, содержащий единственный компонент
src/webparts/helloWorld/app/app.component.ts - сам компонент
src/webparts/helloWorld/app/template.component.html - шаблон, используемый компонентом

Шаг №5. Модуль Angular

Модуль регистрирует единственный компонент для отображения данных:


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Шаг №6. Компонент Angular

Компонент состоит из двух частей: TypeScript-код и HTML-шаблон. Вот код:


import { Component, Input, OnInit } from '@angular/core';
import { WebPartContext } from '@microsoft/sp-webpart-base';
// Свойства веб-части
import { IHelloWorldWebPartProps } from '../HelloWorldWebPart';

@Component({
  selector: "spfx-app", // Селектор
  template: require("./template.component.html") as string // Шаблон
})
export class AppComponent implements OnInit {
  // Свойства
  public ctx: WebPartContext;
  public properties: IHelloWorldWebPartProps;

  constructor() {
  }

  public ngOnInit() {
    // Получаем контекст из переменной window
    this.ctx = window["MyAngularWebPartContext"];
    // Получаем свойства веб-части
    this.properties = window["MyAngularWebPartProperties"];
  }
}

Селектор spfx-app используется для привязки приложения к элементу HTML. Свойство ctx используется для получения контекста веб-части, свойство properties - для для свойств веб-части.

Шаг №7. Клиентская веб-часть

Для интеграции описанного приложения в клиентскую веб-часть измените файл HelloWorldWebPart.ts:


import "reflect-metadata";
require('zone.js');
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart, IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-webpart-base';
import * as strings from 'HelloWorldWebPartStrings';
export interface IHelloWorldWebPartProps {
}

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {

  public render(): void {
    // Сохраняем контекст и свойства в переменные window
    window["MyAngularWebPartContext"] = this.context;
    window["MyAngularWebPartProperties"] = this.properties;

    // Элемент приложения
    // spfx-app - селектор для компонента Angular
    this.domElement.innerHTML = '<spfx-app>Загрузка...</spfx-app>';

    // bootstrapModule
    platformBrowserDynamic().bootstrapModule(AppModule);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

Обратите внимание на метод render: текущий контекст и свойства веб-части хранятся в переменных window (компонент angular считывает эти данные).