Angular - мой любимый современный фреймворк JavaScript. Я знаю, что это вызывает много эмоций, есть лагеря людей, приверженных реакции, vue и т. Д. И у этих платформ есть свои достоинства.

Одно большое преимущество, которое имеют response и vue по сравнению с Angular, - это их «легкость в использовании». Начать работу с React and Vue стало проще! Кажется, для начала нужно научиться гораздо меньше. Конечно, все, что угодно, представляет собой вселенную, и вы можете довольно глубоко погрузиться в реакцию и вью.

Однако их побочным преимуществом является относительная простота (по сравнению с angular) при попытке использовать их на других веб-порталах, таких как WordPress и SharePoint. Проблема в том, что люди хотят отбросить прямоугольные виджеты с возможностью многократного использования, предварительно упакованные, простые в использовании, они не хотят беспокоиться о том, «что еще существует на странице». И это то, что классически Angular не умеет.

Например, хотя технически можно использовать Angular с компонуемыми пользовательскими интерфейсами, такими как SharePoint и SharePoint Framework, может потребоваться много работы. Я продемонстрировал концептуальный пост здесь https://winsmarts.com/use-spfx-with-angular-cli-3747c306244b. Но, честно говоря, это было непросто. Возможно, но непросто!

Чтобы решить эту проблему, были созданы Angular Elements. Я писал об этом некоторое время назад: https://winsmarts.com/angular-elements-and-spfx-a2a5fa32bb21.

С Angular Elements теперь «легко» использовать вашу работу с Angular в составных пользовательских интерфейсах. И это именно то, о чем этот блог. Я углублюсь в специфику SPFx в одном из следующих постов блога, но давайте сначала начнем с введения в элементы angular.

Веб-компоненты

Веб-компоненты - это набор функций, которые в настоящее время W3C добавляет в спецификации HTML и DOM, которые позволяют создавать повторно используемые виджеты или компоненты в веб-документах и ​​веб-приложениях.

Есть 4 важных момента, которые нужно знать о веб-компоненте.

1. HTML-шаблон: общий шаблон веб-компонента. В Angular есть шаблон ng, вроде как.

2. Теневой DOM: поддерживайте DOM в памяти, но не в основном DOM. Отлично подходит для производительности.

3. Импорт HTML: импорт / экспорт многоразовых битов HTML. Вряд ли кто-нибудь им пользуется.

4. Пользовательские элементы: возможность добавлять в разговорный язык HTML, в основном позволяет вам определять веб-компонент.

Пользовательские элементы

Есть свойство под названием window.customElement, оно доступно в последних сборках Chrome, попробуйте ... вы увидите!

Это общепринятый стандарт, встроенный в Chrome, часть технического превью Safari, полифицируемый до IE10 и Edge. Это волшебный билет, позволяющий нам создавать любой настраиваемый элемент и, что ж, добавлять в разговорный язык HTML.

Чтобы добавить настраиваемый элемент, вы можете:

class myElement extends HTMLElement {}
customElements.define(‘my-element’, myElement);

Довольно круто, не правда ли?

Атрибуты

Вы также можете следить за такими атрибутами, как этот,

class MyElement extends HTMLElement {
static get observedAttributes():string[]{ return [‘some-attribute’] }
attributeChangedCallback(oldvalue, newvalue, key) {}}

И это позволяет вам писать такой код, как,

<my-element some-attribute=”somevalue”></my-element>

Обратите внимание, что это обычный атрибут HTML, например element.setAttribute будет вести себя точно так же, как указано выше.

Характеристики

Вы также можете определить такие свойства, как это,

class MyElement extends HTMLElement {
 private _theValue: any;
 set someValue(value) {
 this._theValue = value;
}
get someValue() { return this._theValue; }}

Это дает вам аккуратный метод установки и получения, в котором вы можете инкапсулировать логику.

События

Эти настраиваемые элементы также могут отправлять обратно такие события.

class MyElement extends HTMLElement {
emitEvent() {
let someEvent = new CustomEvent(‘some-change’, {});
this.dispatchEvent(someEvent);
}}

Это позволяет вам писать такой код,

elem.addEventListener(‘some-change’, function() {});

Пока что они похожи на элементы HTML, потому что это то, что они собой представляют. Это всего лишь HTML-элементы.
Естественно, теперь, как разработчик Angular, вы, должно быть, думаете: «Но я уже могу сделать это в Angular, разве у меня нет селекторов?» Действительно. Но ценность, которую Angular добавляет поверх, - это такие вещи, как привязка данных, внедрение, интернационализация, интерфейс командной строки, маршрутизация и т. Д.

Введите угловые элементы

Элементы Angular - это просто компонент Angular, упакованный как веб-компонент. Они есть,

  1. Самозагрузочная обвязка: перетащите на страницу, и она работает. В отличие от полного Angular, они не нуждаются в сложной логике привязки к загрузке.
  2. Размещает компонент Angular внутри веб-компонента
  3. Обеспечивает мост от концепций angular к веб-компонентам. @Inputs () становятся свойствами. @Outputs становятся событиями. @ HostBinding / Listener становятся атрибутами CE / наблюдаемыми атрибутами.
  4. Зоны не нужны.
  5. Угловой внутри, стандарты снаружи ... ТАК ... они могут хорошо работать и работать с базовым HTML и другими стеками !!!!

Начало работы с Angular Elements

С учетом всего этого, что может показаться сложным, но вот и хорошие новости! Написать код и упаковать его как угловые элементы очень просто! Вот как это сделать.

Шаг 0. Прежде чем я начну, вот версии, на которых я использую,

Шаг 1. Создайте новый проект Angular CLI,

ng new angularElements

Шаг 2. В этом проекте добавьте поддержку угловых элементов,

ng add @angular/elements

Эта команда использует схему Angular для внесения необходимых изменений в код и добавляет angular в ваш проект.

Шаг 3: Теперь с «appComponent», который создается по умолчанию, все в порядке! Но я хотел показать вам пример, в котором есть входы и выходы, для более реальной демонстрации!

Поэтому удалите файлы, связанные с appComponent, и добавьте новый компонент, подобный этому,

и сгенерируйте новый компонент из корня приложения, например,

ng g component elementsButton -v Native

Я использую ViewEncapsulation.Native, чтобы стили были объединены с шаблоном и классом компонента в один файл.

В этом elementsButton я решил добавить логику, как показано ниже,

Часть HTML -

<button (click)="buttonClicked()">{{displayText}}</button>

Часть .ts -

Как видите, это простой компонент. У него есть вход, это как выход. Которые будут отображаться в виде атрибутов и событий в веб-компоненте, как вы вскоре увидите.

Шаг 4: Теперь нам нужно внести очень незначительные изменения кода в ваш app.module.ts,

Позвольте мне объяснить приведенный выше код. Angular Elements - это «самозагрузочная обвязка». Это означает, что они автоматически загружаются сразу после добавления в DOM, а также выполняют очистку при удалении (эй, как и обычные элементы HTML, верно?).

Таким образом, нам не нужен компонент начальной загрузки, и вам нужно добавить метод ngDoBootStrap ().

Шаг 5: Технически все готово! Но я собираюсь сделать еще несколько вещей, чтобы сделать его лучше и проще для тестирования. Конкретно,

  1. Внесите незначительные изменения в package.json, чтобы связать и протестировать этот код.
  2. Создайте простую HTML-страницу, чтобы проверить это, и
  3. Веб-сервер для обслуживания файлов HTML и JS.

Готовимся запустить наш код

В свой package.json добавьте скрипт buildForShip, как показано ниже,

“buildForShip”: “ng build — prod — output-hashing=none && cat dist/angularElements/{runtime,polyfills,scripts,main}.js > plainHTML/ship.js”,

Это «сборка, готовая к отправке» для SharePoint или чего-то еще. На высоком уровне я отключил хеширование и упаковываю все в один файл с именем «ship.js». Этот файл содержит ВСЕ, что вам нужно для его запуска. Не нужно иметь отдельную угловую связку.

Также создайте каталог с именем «plainHTML» и выполните указанную выше команду. Как только вы запустите это, вы должны увидеть результат, как показано ниже:

Представьте себе - 236kb, ВСЕ, что вам нужно. Вы можете заархивировать это дальше, как показано ниже, чтобы уменьшить размер пакета еще больше до 70 КБ - опять же, со ВСЕМ, что вам нужно. Как вы знаете, веб-серверы могут с радостью использовать gzip, а браузеры могут с удовольствием работать с ним. В этой статье я буду использовать разархивированную версию.

Создайте простую HTML-страницу для тестирования,

Это обычная HTML-страница, как показано ниже,

Как видите, мы рассматриваем наше приложение angular как простой элемент HTML. В том-то и все дело! Не говоря уже о том, что входные данные легко преобразовались в атрибут, а выходные - в событие. Невероятно!

И веб-сервер для тестирования

Это легко,

npm install --save-dev lite-server

И поместите в корень файл с именем bs-config.json со следующим кодом в нем:

{
"port": 8000,
"files": ["./src/**/*.{html,htm,css,js}"],
"server": { "baseDir": "./plainHTML" }
}

Короче говоря, мы здесь запускаем все, что находится в каталоге «plainHTML», как веб-сервер. Здесь нет никаких «угловых» специфических вещей, на данный момент это обычный HTML.

Теперь просто добавьте еще одну команду в свой package.json, как показано ниже,

"plainHTML": "lite-server"

И измените свой запуск npm следующим образом:

"start": "npm run buildForShip && npm run plainHTML",

Давай запустим! :-)

Запустите наш пример

Запустить

npm start

Эта команда создаст все ваше приложение, запустит браузер и покажет вам следующее:

И щелкнув по нему, вы получите следующий результат -

Что удивительно, так это то, насколько «простым» было использование всего этого приложения. Теперь все ваше «сложное» угловое приложение можно легко использовать в любом месте! Ура!

Исходный код

Вы можете найти весь исходный код этой статьи здесь = https://github.com/maliksahil/AngularElements

Или просто запустите его в stackblitz ниже,



StackBlitz
Изменить описание stackblitz.com



Надеюсь, вам это нравится. Я напишу больше о том, как встроить это в SPFx, в качестве практического примера в будущем.