Month: July 2016

My Experience with Angular 2

My Experience with Angular 2

I’ve been working with Angular 2 since the early betas, and now into the release candidates. Working with a new platform (yes Angular 2 is a platform vs. a framework) during beta releases is a bit painful. Even working through the release candidates (1-4 so far) has been trying as well. You have to know what you’re signing up for, be patient, and willing to learn new things quickly.

To be the most productive when developing in Angular 2, you should be developing with Typescript. If you’ve done ES6 (ES2015) recently, then Typescript will feel right at home. The Typescript learning curve is pretty small, so don’t be intimidated by it. Trust me, it’s worth learning. It’s worth it because Angular 2 is written in Typescript and most of the examples you’ll see on the blogs and overflows are in Typescript.

So how does it stack up against Angular 1? For starters, it’s much simpler to learn. There are 50 some less built in directives in Angular 2. There are no factories, just services (which are now called providers). Directives and Controllers are now pretty much the same thing which are called components. Components have a selector attribute, which is the tag name the component represents (such as <registration>). Directives are there just for element attributes (<button sound-alert-on-click>) with sound-alert-on-click being the directive.

Routing is pretty straightforward, but the router is still in beta while the Angular 2 platform is currently in release candidate 4 (July 10th 2016). The new router isn’t hard to learn at all.

Forms and validation still seem to be in flux too. They were changed a little bit in release candidate 3, so hopefully they will stable now.

Binding and event handling is different, but not hard to pick up if you’ve done Angular 1.x development before. The main difference is that you can bind to any dom event and any standard html element attribute without using an Angular directive, like ngModel. So for example if you want to bind to the click event of a button, you do <button (click)=”submit()”>Submit</button>. submit() is simply a method in your class that represents your component.

Binding is isolated more in Angular 2 with use of Zones, made in party by zone.js. zone.js is what Angular 2 relies on for binding. Without zone.js in your project, binding won’t work.

What’s the hardest thing to learn in Angular 2? I would have to say Observables. Angular 2 uses the RxJS framework in place of promises. What the difference between observables and promises? I suggest watching this video from ng-conf. It’s the best explanation I’ve seen yet. You can get going without really knowing a lot about RxJS, but I suggest digging into it. I’ve already used for a global event provider that was extremely useful in my application.

One last learning curve you should be aware of is the CLI (command line interface) to build your Angular 2 project. ES5 should be not be used when building a Angular 2 application (even though the build process spits out ES5). So if you’re using ES6, you’ll be using babel. If you’re using Typescript, you’ll need to transpile that to ES5 as well. I’ve been using Webpack along with the Angular 2 Webpack starter. Webpack is a little overwhelming at first, but once you get what it’s doing you realize how powerful it is and how much you love it 😍.

You can also go with the Angular CLI project which is a lot simpler and straight forward, but not near as powerful as Webpack.

Nativescript recently added support for Angular 2. So you can now use Angular 2 to build native iOS and Android apps. I’ve also heard about a little hack that will allow Nativescript to build an app for Apple TV, so you can technically use Angular 2 to build Apple TV apps as well.

The Angular 2 ecosystem will only continue to evolve, which is why I said that Angular 2 is a platform earlier. The future is bright for Angular 2 and your future will be bright as well if you hop onboard.