bromzh 12 апр 2016 в 15:35

Angular 2 и внедрение зависимостей

19 мин

74K

JavaScript*Angular*TypeScript*

+22

Комментарии 53

forcewake 13 апр 2016 в 00:04

Мощно. Спасибо за материал.
А был ли у вас опыт написание production level проекта на Angular 2? Было бы интересно прочитать про грабли и методы их обхода, если таковые имеются.

supersmeh 13 апр 2016 в 10:21

Мы потихоньку начинаем внедрять… Основная грабля — это IE. Корпоративная политика велит использовать IE, приходится использовать.
Пришел к выводу, что для меня лучше, когда транспиляция идет на клиенте, гораздо удобней отлаживать. Первоначальное отлаживание делаю в хроме, потом перепроверяю всё в IE (в режиме 10 версии, потом в 11 версии).
например вот так не работает в IE10, но работает в 11:

<div [hidden]="!showThisBlock">
   содержимое
</div>

Пришлось переделать на *ngIf и покрутить стили, чтобы при показе блок был «правильной» ширины…

lega 13 апр 2016 в 11:13

Можно было просто добавить css класс

[hidden] {display:none !important;}

DarthVictor 13 апр 2016 в 11:43

Ну так все правильно — неподдерживаемый атрибут
К тому же полифилится одной строчкой, как заметили ниже, кроме уж совсем извращенных случаев, когда блок с аттрибутом hidden и каким-то классом всё же нужно отобразить. Ангуляр здесь вообще ни при чём.
Кстати "*ngIf" и «display: none» — это не одно и тоже. В случае «display: none» блок не отображается, но он есть и происходит его инициализация, он занимает место в DOM. В случае "*ngIf===false" блока нет и не было.

bromzh 13 апр 2016 в 13:02

По работе сейчас пишу 2 проекта на нём. Пока они не сильно большие, но развиваются и растут.
Из граблей:

При обновлении с beta.9 до beta.10 были проблемы. Но не у ангуляра, а у одной из зависимости (zone.js). В сети можно было найти пару костылей, как это обойти. Я просто подождал, пока починят и обновился без проблем. На данный момент актуальная версия beta.14. В целом, нужно просто обновляться вручную и не ставить в зависимостях ^.
Сейчас не так много библиотек для 2-го ангуляра. Например, Material в стадии альфы, бутстрап-компоненты тоже бывают с багами. Но в целом, нет особых проблем, просто что-то приходится писать руками и я не вижу тут ничего плохого.

Если брать конкретно сам фреймворк, то я сталкивался с такими проблемами:

1) биндинг напрямую к имени класса не работает. Я имею ввиду такую штуку:

<div class="form-group" [class.has-error]="!form.valid"></div>

Решение:

<div class="form-group" [ngClass]="{ 'has-error': !form.valid }"></div>

2) Этот баг может всплывать в различных местах, например если мы обрабатываем событие формы submit и в нём переходим на другой адрес. Вот пример, откройте консоль и нажмите на кнопку.
Решение: забить, или делать переход не по событию submit, а, например, через <a> и его click.

3) Не баг, просто ещё не реализованная фича. Иногда некоторые маршруты должны быть с проверкой прав доступа. Во втором ангуляре есть декоратор @CanActivate. Он принимает функцию-коллбек, которая может вернуть либо булевское значение, либо промис. В зависимости от значения результата, роутер либо переходит на нужную локацию, либо нет. Так вот, тут нельзя использовать внедрение зависимостей. А проверку прав или авторизированности пользователя обычно делают в сервисах. Ок, можно самому получить инжектор, передать ему список сервисов и брать нужный сервис оттуда. Но инжектор создаст новые инстансы сервисов. А иногда хочется взять уже готовые и настроенные.
Решение: пока что можно использовать такой хак: сохраняем инстанс корневого компонента или его инжектор в переменной, которая доступна глобально. Когда нужно, берём сервисы из этого инжектора. Вот пример реализации. Вот более объёмный пример с разными кейсами.

Тут дело в том, что авторы просто не решили, как сделать внедрение зависимостей правильно. Просто внедрять зависимости напрямую в декоратор не очень хорошо. Авторы думают и советуются с обществом, как бы это получше сделать. Обсуждение тут или тут.

В общем, ничего критичного нет.

forcewake 13 апр 2016 в 13:09

Ваш комментарий содержит полезной информации больше, чем некоторые статьи, и не только на хабре. Спасибо за столь раскрытый ответ.
А вы, часом, не думали написать некоторое подобие туториала? Что-то на подобии React.js для начинающих (статья на habrahabr) — было бы очень полезно и информативно, учитывая ваш подход к ответам на вопросы.

bromzh 13 апр 2016 в 15:54

Мне кажется, если и делать это, то в будущем, когда проект выйдет из беты и зарелизится, так как что-то может поменяться. Просто переводить документацию (туториал и быстрый старт) не очень хочется, так как она и так в целом довольно просто написана. Про темы, которые вызывают много вопросов или которые недостаточно описаны в доках, я постараюсь написать. В планах — работа с формами.

Пока же я советую просто читать документацию, а в качестве основы проекта брать вот этот стартер. Там всегда свежие версии фреймворка и хорошие практики в целом. Ну или мой форк этой штуки.