When I Learned to Stop Fearing Angular 2

Great fear surrounds Angular 2. More than one person, with eyebrows raised, has told me, "You know it's totally rewritten from Angular 1." Well, plenty of code has been rewritten without end-users even noticing. In this case, users will notice. And that's a good thing. First good thing is the Angular CLI. Creating build environments for anything substantial is the kind of task you don't want to do more than once. Give me a command to type and the whole environment builds itself, right? Node has spoiled us.

npm install -g angular-cli
 
ng new project-name

This generates a complete scaffold, with testing units, a git repo, and a whole bunch of configuration files that allow you to get up and running quickly. From a fresh project, it's a couple of extra lines to build the other components you need.

ng generate component new-component
 
ng g directive new-directive
 
ng serve

The last line launches a server to see the app running on a local machine. Currently, the project is a work in progress and based on Ember CLI. It works fine on Mac for me, but the Broccoli plugin crashes on Windows 10. I see some chatter on the project page that seems to be related, and I'm sure the bugs will be worked out in no time. Second good thing about Angular 2 is components. Reading the syntax for a component structure in the official demos I see online doesn't make my head hurt.

import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
  selector: 'my-hero-detail',
    template: `
    <div *ngIf="hero">
      <h2>{{hero.name}} details!</h2>
      <div><label>id: </label>{{hero.id}}</div>
      <div>
        <label>name: </label>
        <input [(ngModel)]="hero.name" placeholder="name"/>
      </div>
    </div>
  `
})
export class HeroDetailComponent {
  @Input() 
  hero: Hero;
}

One of the best additions is the ability to leverage the new module syntax and import multiple files into our main app file. This eliminates all those extra import statements in the HTML head.

At the same time, these modules build on the new Class syntax introduced with the latest version of Javascript. Of course, developing in Typescript will encourage devs to borrow even more from other languages.

Third good thing is simplification. The confusion between .provider, .factory and others has been eliminated.

Having learned a bit of Ruby on Rails, the changes in Angular 2 seem quite familiar. Build from the command line? Check. Import modules dynamically? Check. Class structures? Check.

This may be a good thing for Angular's popularity. More devs may be open to working in Angular 2 because it looks like something they know already, and less like some unique framework developed in isolation.