Attention! Please keep in mind that this post is not manual, it’s research that helps you to understand Angular better and don’t try to apply code examples in your enterprise applications.
Angular2: Changing default component properties.
1
Category Archives: Хочу сделать мир лучше
Что нового в Angular 2.3 и Angular 2.4
Пройдемся по основным моментам:
- Наследование компонентов
- Сервис языка шаблонов Ангулар ( Angular Language Service )
- Улучшеный стек zone.js
- Доступ к версии Ангуляра
- Обновление rxjs
Angular2: Opaque токены и мультипровайдеры
При определении провайдеров рано или поздно у всех у нас возникает вопрос “А что если будет 2 провайдера с одним и тем же именем?” – Ну тут все довольно просто: последний определенный перезатрет все определенные до него.
Но что если вы подключаете сторонний модуль, а в нем уже определен провайдер с таким же именем? Очевидно, что вы его перезатрете своим. Как избежать этого?
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 выполняется каждый раз при запуске приложения в браузере.
Все что вы должны знать о 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
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.
Шпаргалка по синтаксису шаблонов Angular2
взято с официальной документации, переведено/переработано.
| <input [value]=”firstName”> | задание свойства value |
| <div [attr.role]=”myAriaRole”> | задание атрибута role. |
| <div [class.extra-sparkle]=”isDelightful”> | Выставляет класс extra-sparkle по условию isDelightful |
| <div [style.width.px]=”mySize”> | задает значение width в пикселях. |
| <button (click)=”readRainbow($event)”> | Привязывает обраобтчик клика readRainbow |
| <p>Hello {{ponyName}}</p> <div title=”Hello {{ponyName}}“> |
Подставляет значение выражения |
| <my-cmp [(title)]=”name”> | Двойное связывание, альтернатива: <my-cmp [title]=”name” (titleChange)=”name=$event”> |
| <video #movieplayer …> <button (click)=”movieplayer.play()”> </video> |
Создает локальную переменную movieplayer, которая является ссылкой на элемент video |
| <p *myUnless=”myExpression”>…</p> | Символ * превращает текущий элмент во втроенный шаблон: :<template [myUnless]=”myExpression”><p>…</p></template> |
| <p>Card No.: {{cardNumber | myCardNumberFormatter}}</p> | Применение myCardNumberFormatter пайпа. |
| <p>Employer: {{employer?.companyName}}</p> | Указание не обязательного поля с помощью оператора “?“ |
ng-be 2016. brief review
great organisation, great speakers, great conference, unfortunately I don’t have time for detailed overview and provide you only with brief-brief notes.