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

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

ng eject

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

ng serve -> npm start
ng build -> npm run build
...

 

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:

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

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

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

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

console.log(1);
this._http.get('/').subscribe((data) => {
      console.log(2);
    });
console.log(3);

соотвественно выведет: 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.

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

.config(function($compileProvider) {
  $compileProvider.preAssignBindingsEnabled(true);
});

Наследование 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

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

Angular2: Possible parameters for @HostBinding and @HostListener decorators

@HostBinding(?)

  • propertyName: references a property of the host with the propertyName name.
  • attr.attributeName: references an attribute of the host with the attributeName name. The initial value is set to the associated directive property. Setting a value in the property updates the attribute on the corresponding HTML element. Using the null value at this level removes the attribute on the HTML element.
  • style.styleName: links a directive property to a style of the HTML element.
  • class.className: links a directive property to a class name of the HTML element. If the value is true, the class is added otherwise removed.

@HostListener(?)

  • eventName: the name of the event to register a method callback on.

Continue reading