ngx-wig – opensource lightweight WYSIWYG editor for Angular.

I’ve just merged pull request with tests and we are ready to go.

Finally, release!

P.S.: thanks a lot @bampakoa for the contribution!

source

just a bookmark for list of frameworks.

Now I’m in process of looking something suitable for our project.

• Koa2 – too hipster, good for learning
• express – old but still green
• loopback – good env and tooling, too much abstraction
• nestjs – typescript, decorators, very Angular-like one
• …

Очень маловероятно, что вы захотите добавлять Angular в приложение только для того, чтобы завести один компонент. Рекомендую смотреть на этот пост, не как на практическое руководство к действию, а как на работу по исследованию возможностей фреймворка.

Предположим что у нас уже есть какой-то компонент, который мы хотим вывести на странице не Angular приложения:

View the code on Gist.

Для запуска Angular нам нужно также создать модуль, объявить наш компонент в нем и указать на то, что он будет инициирован динамически:

View the code on Gist.

Создав модуль, мы можем его бустрапить:

View the code on Gist.

Использование фабрики компонентов

Чтобы инициировать динамически компонент, нам нужен componentFactoryResolver, который мы можем получить из сущности нашего модуля:

View the code on Gist.

теперь можем получить фабрику для нашего конкретного компонента:

View the code on Gist.

и с помощью полученной фабрики создать компонент:

View the code on Gist.

обратите внимание, что мы произвели создание компонента прям на самом элементе (querySelector(‘hello‘)), но это не обязательно, мы бы также могли инициализировать контейнер, который содержит наш hello-элемент (например body).

Мы вывели компонент на страницу.

Но еще не все.

Подключаем механизм обнаружения изменений (Change Detection)

Чтобы представление нашего компонента реагировало на изменение состояния приложения, нам необходимо добавить hostView компонента в приложение (ApplicationRef). Для этого используем метод attachView:

 ngModuleRef.injector.get(ApplicationRef).attachView(componentRef.hostView);

Получим:

View the code on Gist.

Также мы можем сделать отложенную инициализацию по таймеру (например: через 5 секунд):

View the code on Gist.

Вот тут полный пример.

• оператор не нулевого присвоения ( Non-null assertion operator ) теперь можно использовать в шаблонах:

  <h2>{{ user!.name }}</h2>

• очень много изменений по анимации (смотрите в отдельном посте)
• добавили поддержку mix & max стандартных валидаторов (но уже в 4.3.0-beta.0 удалили эту возможность признав как breaking change)
• в тестах появились 3 вспомогательных метода:
  • TestBed.overrideProvider() – приближает возможность тестировать в AOT,
  • flush() – для сбрасывания всех счетчиков и выполнения колбэков всех асинхронных операций,
  • fixture.whenRenderingDone() – возвращает промис, который ждет выполнения всех анимаций

You could easily get several string like “true”, “false”, “undefined” and other by doing simple operations with brackets:

View the code on Gist.

and now you can take any letter :

View the code on Gist.

You can try to challenge yourself and convert any JS code into this format (that is called JSFuck) and there is even online converter that will help you with this task.

Существует множество ресурсов по изучению Redux: официальная документация, примеры, учебники, статьи, видео уроки… Имея такое большое количество информации многие начинающие Redux разработчики порой просто теряются в ней.

Другой подход изучения – это самостоятельно написать прототип Redux, чтобы понять основы библиотеки. Для меня это был реальный прорыв.

Не беспокойтесь, это совсем не сложно. Ядро Redux, как вы убедитесь, достаточно просто.

Для начала нам необходимо общее понимание что делает Redux.

Что конкретно делает Redux?

Основная идея Redux – всегда иметь единственное состояние приложения. Это состояние представляет из себя Javascript объект – Redux Store, который доступен только для чтения. Если вы хотите изменить состояние, то вам нужно породить Action, что тоже является Javascript объектом.

Элементы вашего приложения могут подписываться на изменение состояния Store. Если мы посмотрим на примере с React, то компоненты React получают уведомление о изменении состояния и могут изменить отображение базируясь на новых данных.

Чтобы обновить Store, когда приходит Action, используется Reducer – обычная Javascript функция.

Давайте начнем писать код!

Обобщая, мы должны сделать 3 вещи:

1. Получать состояние приложение из Store
2. Разобрать событие Action, которое будет передано на Reducer, который изменит состояние Store.
3. Следить за изменениями Store

Так же мы должны определить начальные значения для Store и Reducer, давайте с этого начнем:

View the code on Gist.

1. Получение состояния (state)

Мы создали функцию, которая просто сохраняет начальное состояние и редьюсер локально. Теперь давайте реализуем возможность получения этого состояния с помощью специального метода :

View the code on Gist.

2. Отправка события (dispatch an action)

Следующий шаг – отправка события:

View the code on Gist.

Функция dispatch используя текущее состояние отправляет событие на редьюсер, который мы определили при инициализации. А он в свою очередь перезаписывает объект currentState новым значением.

3. Подписка на изменения

Теперь мы можем получать и обновлять состояние! Оставшийся шаг – сделать возможность подписаться на изменения:

View the code on Gist.

Теперь мы можем вызывать subscribe с коллбэк-параметром, который будет вызван в случае получения события на изменнеие состояния.

Все готово.

Это все что нам нужно было сделать для создания mini-Redux.

На официальной github странице есть пример как использовать Redux. Мы можем скопировать пример, чтобы протестировать нашу собственную реализацию Redux:

View the code on Gist.

Поиграться с кодом можно тут.

Выводы

Мы разработали рабочую версию аналога Redux, которая уместилась в 18 строчках кода. Впечатляет, правда?

Конечно, этот код не для продакшена. Сравнивая с реальной библиотекой мы выкинули отлов ошибок, не поддерживаем множественные подписки и другие возможности.

Теперь вы знаете основные принципы того как работает Redux, что поможет вам лучше ориентироваться в потоке информации.

[javascript]
//somewhere inside component controller
let promise = new Promise((resolve) => setTimeout(() => resolve(‘resolved’), 2000));
promise.then(x => this.x = x);
[/javascript]

But in this case we will have to run digest manually for each resolve(to synchronise view and model):

[javascript]
let promise = new Promise((resolve) => setTimeout(() => resolve(‘resolved’), 2000));
promise.then(x => {
$scope.apply();
this.x = x;
});
[/javascript]

But what if we hack the Promise and intercept our digest call there:

[javascript]
class SubPromise extends Promise {
constructor(executor) {
super(function(_resolve, _reject) {
var resolve = (data) => {
var res = _resolve(data);
angular.element(document.body).injector().get(‘$rootScope’).$apply();
return res;
}
return executor(resolve, _reject);
});
}
}
[/javascript]

now we just need to overwrite standard Promise:

[javascript]
window.Promise = SubPromise;
[/javascript]

to keep it simple to cover for unit-tests you can also wrap it into an angular factory:

[javascript]
factory(‘Promise’, () => Promise);
[/javascript]

Here you can play with the code.

Discussion on stackoverflow about customising ES6 Promise.

!Attention: This experiment was made just for learning purposes and it should not be applied for the real projects.

You should definitely have a look at this live editor project “Makepad” by Rik Arends.

If you want to move to new version of ui-router you should make such changes:

$stateChangeCancel

It was an event that was thrown when somebody called “event.preventDefault()”. Now everything is controlled by transitions so no chance to get such event.

$stateChangeError

old code

[javascript]
$rootScope.$on(‘$stateChangeError’, function(event, toState) {
//some code to handle the error
})
[/javascript]

new code

[javascript]
$transitions.onError({ to: ‘stateName’ }, function($error$) {
console.log($error$);
}
[/javascript]

in progress

$stateChangeStart

old code

[javascript]
$rootScope.$on(‘$stateChangeStart’, function(event, toState) {
event.preventDefault();
})
[/javascript]

new code

[javascript]
$transitions.onEnter({ to: ‘stateName’ }, function($state$, $transition$) {
return $q.reject()
}
[/javascript]

$stateChangeSuccess

old code

[javascript]
$rootScope.$on(‘$stateChangeSuccess’, function(event) {})
[/javascript]

new code

[javascript]
$transitions.onSuccess({}, () => {});
[/javascript]

$stateNotFound

old code

[javascript]
$rootScope.$on(‘$stateNotFound’, function(event) {})
[/javascript]

new code

[javascript]
$stateProvider.onInvalid(($to$, $from$) => {})
[/javascript]

Sandbox to play with all examples.