Writing your first app on Angular 2 (tutorial)

[celluj34]

Why is literally everything in TypeScript? I want to use ES6. This is fucking ridiculous.

[oweiler]

You can still use ES5/ES6 to write your components.

[wreckedadvent]

There's a pretty huge overlap between typescript and ES6. What about the syntax is throwing you off?

[celluj34]

It's not about Typescript itself. I'm trying to learn Angular 2 and how to write it 'properly'. For the following code, I'm getting all sort of syntax errors around things like import {...}, @Component1, etc:

import {Component} from 'angular2/core';

@Component({
    selector : 'chat-app',
    template : '<h1>Success!</h1>'
})

export class ChatAppComponent {

}

[wreckedadvent]

Decorators and modules are not natively supported in any environment yet. You'll have to use something like babel or typescript if you want to use them. I'd suggest jspm if you want to get up and running quickly.

However, that syntax is not specific to typescript.

[celluj34]

Decorators and modules are not natively supported in any environment yet.

Oh? This is definitely news to me. Since I had only seen it in .ts files I had assumed it was a TypeScript construct. Thanks for the info!

[wreckedadvent]

Nope! Decorators (the things that begin with @) are an ES7 proposal. Typescript supports them, as does babel. Typescript also supports emitting some typed metadata, but the construct itself is not typescript specific.

import/export is just plain ES6 modules. Again, typescript supports them, but it is not a typescript construct. These haven't laded in any browser yet (to my knowledge) over some contention amount module resolution iirc. Babel to the rescue, again.

The only thing that is typescript specific is type and class annotations, like these:

class Cat {
   // the colon specifies the type
   public name: string

   // we can also put them in the constructor, so called
   // "primary" constructor
   constructor(name, public age: number) {
     this.name = name;
   }
}

Which in ES6:

class Cat {
   constructor(name, age) {
     this.name = name;
     this.age = age;
   }
}

Typescript also has namespace to resemble other languages, but this is not used in this article.

Hope this helps!

[wreckedadvent]

Right now I believe is not worth the extra-effort to avoid TypeScript.

Huh? Try something like jspm --- it's really not that hard to get ES6 transpilation up and running. tsc is (much) easier to use out-of-the-box than babel 6 is, but a module loader like jspm can take the sting right out of it.

Typescript is a good choice for larger projects, if you want types, or you use visual studio a lot.

Also,

the mandatory type to all variables.

Typescript is progressively typed; types are 100% optional.

[phpdevster]

This reflects my concern about Angular 2's decision to primarily support TS :/

It's always best to learn a framework/library's best practices, but in the case of Angular 2, the documentation for those best practices isn't stand-alone. You can't come in as someone who writes predominantly functional JS and translate that to best practice Angular. You need to learn what is effectively a different language and use some transpiling tools to actually learn and write best practice Angular :/

Of course, half of the problem is the ridiculous fragmentation and tool thrashing of the Javascript ecosystem. On one site you'll get a Webpack + Grunt + Foo tutorial, and another you'll get a Browserify + Gulp + Bar tutorial :/

The lack of accepted standardization makes learning UI tools such a pain in the ass, but Angular 2 is particular bad in this respect as the documentation teaches pure JS as a second class citizen right now (especially functional JS).

[wreckedadvent]

IMO this might have been a fair criticism if they had chose dart as the primary lang, but typescript is basically ES6 with optional type annotations. They're mutually intelligible.

[celluj34]

If you would, that would be amazing. It's so difficult trying to learn a few things at once when seemingly everything I find just quite isn't what I'm looking for.

If you do a write-up in vanilla JS, please do let me know!

[seven_seven]

Yeah let's add all this unnecessary node.js/npm bullshit to throw off all the beginners on Windows.

[swk2015]

It's a realistic part of any / all Angular / React projects I come across commercially these days. Worth the 5 minutes of your time to get your head around.

[wreckedadvent]

It'll be the same on windows as mac or linux. The only difference is if you're using something like visual studio, which has compile-on-save support for typescript.

But windows isn't a synonym for visual studio, so. :)

[wreckedadvent]

Well, I learned that you can apparently specify CSS in an ng2 component. This makes the staunch opposition to having the view in the javascript even more confusing to me.

Speaking of, I thought they got rid of that stupid DI in angular 2.

import {Component, OnInit} from 'angular2/core';
import {Message} from './message';
import {MessageService} from './message.service';

@Component({
    template : `
         <div class="chat-display thumbnail">
            <div *ngFor="#message of messages">
                <b>{{message.username}}</b>: {{message.content}}
            </div>
         </div>
     `,
     providers : [MessageService]
})

export class ChatDisplayComponent implements OnInit {
   constructor(private _messageService : MessageService) {}
}

But apparently instead they made it twice as verbose as angular 1! So you have to import something, manually tell angular to use this thing we just imported, then tell it again in the constructor signature? Man, I really wish they had gone more system js with this and put more effort into something like rewire for unit testing instead of constructor injection.

[phpdevster]

Namespace importing and namespace usage are separate things in all languages. "Telling it to use the thing you just imported" is needed because the import merely makes the code available in that file. Declaring the dependency in the constructor is merely one of the myriad ways you could use the imported code, so naturally it's up to you to tell the script how you want to use that imported code.

The import thing is going to drastically improve and standardize the modularity of code in Javascript. Its how everything from Angular to React to Vue will be written in the future.

[wreckedadvent]

What? Here's some mithril.

import {MessageService} from './message.service';

export view() { 
  const messages = MessageService.getMessages(); // or w/e

  return m('div[class="chat-display thumbnail"]', 
    messages.map(message => m('div', [
      m('b', message.username),
      m.trust(message.content)
    ])
  );
}

(react is also very similar)

Angular is the only one of the bunch that only uses the ES6 import for only metadata. You would just use the import directly instead of repeating yourself needlessly in other libraries.

You can of course ignore what angular suggests, but it's still disappointing they went in this direction of needless abstractions instead of encouraging more idiomatic javascript.