New github acid colors … and return back to normal colors

Do you see the same what I see right now? I don’t know why but github team decided to change link color and folder color to ugly acid blue.

Hardly got used to it and decided to create userscript to return the normal color. You are welcome to contribute.

To install userscript you can use Tampermonkey google extension.

angular-cli + `ng eject` => webpack welcome back

Наконец-то(начиная с 1.0.0-beta.32) разработчики angular-cli дали доступ к более тонким настройкам webpack и теперь не нужно выбирать между двумя инструментами. Выполнив команду:

[shell]
ng eject
[/shell]

у вас появится файл вебпак конфига в корне проекта, и теперь вместо команды ng вы запускаете старую добрую npm:

[shell]
ng serve -> npm start
ng build -> npm run build

[/shell]

 

P.S.: Уже наткнулся на проблему с поломанной подстановкой environment файла (issue).

Концептуальный разбор маршрутизатора Angular2 с примерами

  • подключение и базовая настройка
    • use hash
  • стейты (states)
  • специальные директивы роутера
  • параметры стейта
  • параметры запроса(query params)
  • статические параметры стейта
  • перенаправление на другой стейт
  • события (events)
  • хуки (guards)
  • резолв асинхронных данных
  • вложенные стейты (nested states)
  • множественные вью (multiple views)
  • ленивая загрузка (lazy loading)

Continue reading

Angular2: Opaque токены и мультипровайдеры

При определении провайдеров рано или поздно у всех у нас возникает вопрос “А что если будет 2 провайдера с одним и тем же именем?” – Ну тут все довольно просто: последний определенный перезатрет все определенные до него.

Но что если вы подключаете сторонний модуль, а в нем уже определен провайдер с таким же именем? Очевидно, что вы его перезатрете своим. Как избежать этого?

Continue reading

Angular2: Синхронная асинхронность MockBackend

Решил сделать заметку по не очевидному моменту юнит-тестирования Angular2, а именно: когда вы мокаете Http сервис, заменяя XHRBackend на MockBackend:

[javascript]
TestBed.configureTestingModule({
imports: [HttpModule],
providers: [{provide: XHRBackend, useClass: MockBackend}]
});
[/javascript]

а потом с помощью mockBackend подменяете ответ от сервера:

[javascript]
mockBackend.connections.subscribe((connection: MockConnection) => {
connection.mockRespond(new Response(new ResponseOptions({body: JSON.stringify(mockUser)})));
})
[/javascript]

subscribe на http Observable становится внезапно синхронным:

[javascript]
console.log(1);
this._http.get(‘/’).subscribe((data) => {
console.log(2);
});
console.log(3);
[/javascript]

соотвественно выведет: 1 2 3.

Подробно вопрсос освещен на стеке.

 

Angular2: Что такое AoT?

Что это такое?

AOT или Ahead-of-Time – вариант компиляции приложения(альтернатива JIT или Just-in-time), которая выполняется один раз при сборке приложения. JIT выполняется каждый раз при запуске приложения в браузере.

Continue reading

Все что вы должны знать о Angular 1.6

Обязательное использование $onInit в компонентах

Хук $onInit, который появился в 1.5, теперь обязательно использовать, если вы хотите учитывать входящие параметры(bindings) при инициализации компонента. В конструкторе компонента эти параметры будут не определены(undefined) начиная с версии 1.6.

Есть костыль, который можно использовать на переходное время:

[javascript]
.config(function($compileProvider) {
$compileProvider.preAssignBindingsEnabled(true);
});
[/javascript]

Наследование ngModelOptions

В случае, когда у вас в форме несколько полей использующих одинаковые настройки модели (ngModelOptions), теперь можно задать все опции в одном месте – form элементе. А так же переопределить какие-то из них на конкретном поле.

Нет success() и error() методов в $http

Приближаясь к родным JS промисам, решили выпилить из $http сервиса старые методы sucess и error.

 

Рекомендации по миграции тут.

Что нового в webpack2

  • понимание ES6 модулей из коробки (без конвертации в CommonJS)
  • поддержка Tree Shaking
  • конфиг теперь может быть функцией с параметрами и возвращать промис
  • uglifyjs плагин не включает автоматом минификацию других плагинов
  • опциии для лодеров задаются непосредственно в конфигурации лодера, для поддержки старых плагинов добавили LoaderOptionsPlugin, который задает опции в контекте всего вебпака
  • Promise полифил теперь не включен в сборку по умолчанию
  • большая часть плагинов теперь принимает параметром объект опций, вместо набора параметров
  • добавлен алиас webpackfile.js
  • флаг “-p” устанавливает NODE_ENV = “production
  • debug теперь включается для каждого лодера отдельно (нет глобальной опции)
  • имена свойств конфига: вместо module.loaders теперь пишем module.rules, более чистая нотация с перечислением лодеров в объекте свойства use

Инструкции по миграции.