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

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 веб-часть.

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

Шаг №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 считывает эти данные).

Готово!

Вот и всё! Выполните следующую команду для запуска workbench, чтобы увидеть результат:



Код


Проект опубликован здесь: https://github.com/vzhukov/spfx-demo-angular

Виталий Жуков

Виталий Жуков

SharePoint архитектор, разработчик, тренер, Microsoft MVP (Office Development). Более 15 лет опыта работы с SharePoint, Dynamics CRM, Office 365, и другими продуктами и сервисами Microsoft.

Смотрите также

EntityFramework. Оптимистические блокировки

EntityFramework. Оптимистические блокировки

Linq to Sharepoint. Особенности

Linq to Sharepoint. Особенности

SharePoint 2010. Настройка входящей почты для кастомного списка

SharePoint 2010. Настройка входящей почты для кастомного списка

SharePoint 2010. PeopleEditor. Установка значения

SharePoint 2010. PeopleEditor. Установка значения

Linq to SharePoint. Особенности. Часть 2

Linq to SharePoint. Особенности. Часть 2