Новое в Angular4

Итак, если резюмировать, что появилось в Angular версии 4:

  • расширенный синтаксис ngIf – появляется else
  • возможность сохранять значение полученное из async pipe
  • новая директива NgComponentOutlet
  • анимация переходит в отдельный пакет (@angular/platform-browser/animations)
  • серверный рендеринг переходит в основной репозиторий ( пакет @angular/platform-server)
  • переход на Typescript 2.2
  • deprecated: template и OpaqueToken

Angular: Меняем title в зависимости от стейта

Для того чтобы сделать динамический title в Angular (2+) нам не нужно придумывать свои велосипеды как это было в AngularJs. Достаточно просто использовать сервис Title, у которого есть методы getTitle и setTitle.

То есть если вы просто хотите задать тайтл достаточно сделать:

export class AppComponent implements OnInit {
  constructor(private titleService: Title) {}
  ngOnInit() {
    this.titleService.setTitle('My Page Title');
  }
}

При этом Title подключается из модуля @angular/platform-browser:

import { Title } from '@angular/platform-browser';

Тут вроде как все понятно, но что, если мы захотим динамически менять тайтл в зависимости от стейта/странички на которой находимся?

Continue reading

Angular: OpaqueToken или InjectionToken

Не успели все познакомиться с понятием OpaqueToken, как оно уже становиться deprecated. Теперь нужно использовать вместо него InjectionToken.

Давайте попробуем разобраться почему.

Continue reading

ng-nl 2017. brief review (keep updating…)

Already like a good tradition I visited ng-nl conference (ng-nl 2015, ng-nl 2016).

Same as previous year it was great place and awesome people around.

But this time they really messed up with the schedule. I expected to have order of the topics that is provided on official web site, but appeared that it’s not actual and I had to follow the app one, basically the only place. And the app was lagging :(

Strange that this year I did not see anybody from the core Angular team. Also no old good Pascal Precht and Tero Parviainen in the list. At least we had good presentation by Todd Motto about Reactive Forms and really inspiring GraphQL talk by Uri Goldshtein.

Continue reading

Серверный рендеринг с Angular4

Статья написана на основе перевода/переработки Server Side Rendering With Angular 4.

Что нам дает серверный рендеринг?

  • более быструю загрузку “первого экрана”
  • поисковая оптимизация (предоставление статики для поисковых ботов)
  • социальные превью для страничек

С первых же дней Angular2 Angular включал поддержку этой опции в виде отдельного проекта Angular Universal. Так как серверный пререндеринг одна из ключевых киллер-фич, то начиная с Angular 4 было принято решение включить доработанную версию непосредственно во фремворк.

Continue reading

git-clean: Remove all local branches

Made a note about it 4 years ago, but it looks like the note is still pretty usefull. So one more time for en readers.

To remove all merged branches(except current -v ‘*’):

git branch --merged | grep -v '*' | xargs git branch -D

also I made such command for repo complete clean up:

alias git-clean="git branch  | grep -v '*' | grep -v 'master' | xargs git branch -D  && git reset --hard && git clean -d -x -f"

Angular: Lazy Loading and Preloading strategy

Almost all of you know that it’s possible in Angular to load modules asynchronously by using Lazy Loading Router feature, you just need to specify special parameter for the state – loadChildren:

{ path: 'lazy', loadChildren: './lazy/lazy.module#LazyModule' }

and setup child module with RouterModule.forChild method:

const routes: Routes = [
  { path: '', component: AdminComponent }
];
 
@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [AdminComponent]
})
export class LazyModule { }

In most cases you are doing so not to load all the modules at once make “first screen” appearing quicker. But it’s not all folks, you also could preload all your lazy modules when your application base is loaded so: you are showing first screen fast and after load other modules in background to show them immediately when it’s needed. And it’s really usy to setup: for you main RouterModule you add the property preloadingStrategy:

Continue reading

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 и теперь не нужно выбирать между двумя инструментами. Выполнив команду:

ng eject

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

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

 

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