AngularJS 2.0 rewritten in ECMAScript?

So I just found out today that Angular 2.0 is coming out, they are using ECMAScript 6, but compiling it to 5, etc., etc., etc.

How will that (using ECMAScript) affect the usage? How will it be compatible with the JavaScript I use to call its API? I mean, having different languages (ES, JS) written together?

Confused at how this works. Help is appreciated.

EDIT

Sorry @Joseph if my question wasn’t clear enough, but I also (mainly) want to know how ECMAScript 5 runs in the browser and the second paragraph above keeping this in context.

How does a JavaScript person use Angular 2.0? How does ES work alongside JS code?

From the docs:

Though Angular will be in ES6, you can still write in ES5 if you don’t want to upgrade. The compiler generates readable JS and there are human-sensible analogs for the extensions.

I suspect that ES can be run by JS interpreters(?)

The Status of SEO with languages as Angular and React?

I’m thinking of using Angular or React for a new web project but the SEO are an important part. From what I have read there are ways to solve it but it always results in keeping two page version alive or using an external service that renders the pages.

This sounds like bad options to me?

I have also read some unclear info about that search engines now can read javascript webpages with for example angular or react?

Could someone clarify this for me? Will SEO be as good with Angular as if I was using, for example, ASP.NET MVC?

What is the correct syntax for declaring a Angular 2.0 Decorator in AtScript?

How do you create Decorator directives in Angular 2.x? I’m writing against alpha version of Angular, and was trying to reproduce the functionality found in the AngularJS (1.x) directive ngClass. Below is a snippet from my attempt at my own NgClass in Angular. What I would like to do is observe the value of some expression that may contain a hash of class names to boolean expressions. As those expressions change, names would be added or removed from the classList property on the element that the decorator has been applied.

What’s wrong with this syntax? Is a Decorator not even the right template for the job, and maybe I should create a Template Directive? Even still, what’s the syntax for declaring Directives with Angular? I’ll accept answers in ES5, but I’d prefer ES6 and AtScript moreso.

For context, I was writing this as preparation for a talk I gave preview what’s going to be like to write apps with Angular 2 and beyond.

@Decorator({
  selector: '[ng-class]',
  bind: {'NgClass': 'class'},
  observe: {'ngClass': 'ngClassChanged'}
})
export class NgClass {
  constructor(element:NgElement) {
    this.element = element;
  }

  ngClassChanged(newValue) { 
    let classNames = [];
    if(newValue){
      console.log(newValue);
      this.element.className = newValue;
    }
    else {
        this.element.className = "";
    }

  }
}

Angular2: Is it slow?

Just took a look at the last angular version that the angular team launch.
Angular2 is out and they have been release a their new webpage https://angular.io.

In there they have a 5 min quickstart project that shows quickly the new syntax and what you have to use to perform a new angular application.

I just did all the steps to get it working but it took 4.93 seconds to load.

I’m just wondering, is angular 2 that slow? Or maybe I miss some steps.

Here is my code

// app.es6

import { Component, Template, bootstrap } from "angular2/angular2";

// Annotation section
@Component({
  selector: "my-app"
})
@Template({
  inline: "<h1>Hello {{ name }}</h1>"
})
// Component controller
class MyAppComponent {
  constructor() {
    this.name = "Alex!";
  }
}

bootstrap(MyAppComponent);

and index.html

<!-- index.html -->
<html>

<head>
    <title>Angular 2 Quickstart</title>
    <script src="dist/es6-shim.js"></script>
</head>

<body>

    <!-- The app component created in app.js -->
    <my-app></my-app>

    <script>
        // Rewrite the paths to load the files
          System.paths = {
            'angular2/*':'angular2/*.js', // Angular
            'rtts_assert/*': 'rtts_assert/*.js', //Runtime assertions
            'app': 'app.js' // The my-app component
          };

          // Kick off the application
          System.import('app');
    </script>
</body>

</html>

Binding to a component property in angular2

I’d like to reference a property on a component within A. that’ component’s constructor B. that component’s template. The apis on this seem to be shifting a little bit, but i’d expect the following to work:

<my-component [greeting]="hello"></my-component>
// my component.es6.js
@Component({
  selector: 'my-component',
  properties: {
   'greeting': 'greeting'
  }
})
@View({
  template: '{{greeting}} world!'
})
class App {
  constructor() {
    console.log(this.properties) // just a guess
  }
}

Plunkr

What am I doing wrong?

How to update the view after changing the model in Angular?

How do I let Angular propagate the changes i did to the model. In AngularJS this would be really easy, but i cannot seem to get it working in Angular. I know the entire change detection system and view propagation is changed entirely. Somehow, i need to inform angular of the changes. But how can i do this in practise.

See this piece of typescript code:

import {Component, View, bootstrap, For} from 'angular2/angular2';

// Annotation section
@Component({
    selector: 'app'
})
@View({
    template: `
    <div *for="#user of users">
        {{user}}
    </div>
    `,
    directives: [For]
})
class App {
    users:Array<String>;

    constructor() {
        this.users = [];
        this.fillUsersAsync();
    }

    fillUsersAsync(){
        window['fetch']('http://jsonplaceholder.typicode.com/users')
            .then( resp => resp.json())
            .then( users => users.forEach(user => this.users.push(user.name)))
            .then( () => console.log('Retrieved users and put on the model: ', this.users));
    }
}

bootstrap(App);

You will see that, after the users get loaded into the model, the view doesn’t update.

I’m using systemjs 0.16, angular 2.0.0-alpha.23.

See this plnkr for the example (currently, works only in chrome, as the new ‘fetch’ api is used)

Angular 2 alpha 22, How to pass down a value to a component through attributes?

I declared a component with a selector ‘app’
then I used it like follow:

<app title="Awesome Title"></app>

in the template I wrote this:

The title passed {{ title }}

I did add write the Component annotation:

@Component({
    selector: 'app',
    properties: {title:'title'}  // also tried ['title']
});

But nothing shows up, the output is

The title passed

Any help? Thanks