Switching from AngularJS to Angular 4

| By Maina Wycliffe | | | Angular

It’s been almost two weeks since I decided to switch to Angular 4 for my incomplete project from AngularJS. If you have seriously considered making the switch, you know it’s a not easy. The two versions are completely different, controllers and scopes are gone, now it revolves around components and directives.

I never got to use components in AngularJS, introduced in version 1.5. The idea of using components scared the hell out of me and that was before I learned that I must use TypeScript instead of JavaScript. That almost turned me away but I made the change anyway.

I have to admit this, TypeScript is a better version of JavaScript. Most importantly, it is not that different from other languages, I like how it tries to instill discipline to JavaScript, but today it not about TypeScript, it’s all about Angular. Here are the things I have learned over the last two weeks.

Getting Started is Complicated

This seems obvious but creating a new project in angular is extremely complicated. But the folks who developed Angular knew this and provided a tool known as Angular CLI. This tool will help you create new projects, generate components, services, guards, directives among others. Unless you want to make your life exceedingly difficult, please make use of this tool.

Components in Angular are Directives in AngularJS

Yes, Angular has Directives and Components but if you are coming from AngularJS, components are more like directives. Everything you used to do in AngularJS with directives, you can do with components and more. I would not call myself an expert or claim to know the full extent of what directives can achieve in AngularJS, but with components, you get a feeling they can do more.

Forget About UI-Router, use the Angular Router

The default Router is amazing to say the least. If you have ever used AngularJS, you know the default router sucks – no offense to the developers. When I made the switch, I spent several hours trying to make UI-Router work unsuccessfully. After that I went through the documentation on angular.io and I was impressed by what the default router can do. It did everything I wanted to do with UI-router and unless you have some specific UI-router feature you want to use, then forget about it.

I still don’t know what Directives Do

It’s been two weeks, while I have read everything I can on angular directives, I still haven’t figured out a use case for my custom directives. If you know a use case, feel free to inform me in the comments section below.

Forget about Controllers and Scope

Both Controllers and Scope were jettisoned as of Angular 2. And for the two weeks I have been using Angular 4, I don’t miss them at all. They made my code messy to say the least. That’s not to say my code won’t be messy with Angular 4 but I like my chances here. Those are few things I learned from my transition since I started two weeks ago. It isn’t much but hopefully it will help someone else decide on whether to make a switch and what to prepare for.

Thank you.

Comments