products

AngularJS 2 intro

Resources and links for learning about upcoming v2 AngularJS.

AngularJS 2 has huge changes compared to the current generation. I personally think it should be named something other than AngularJS. A lot of people argue for and against the changes, or giving up on the framework completely.

Here is an example TodoMVC with a single component written in AngularJS 2

@Component({
  selector: 'todo-app',
  template: new TemplateConfig({
    url: '/todo.html'
  })
})
class TodoApp {
  todos;
  constructor() {
    this.todos = ['item 1', 'item 2'];
  }
}

The top part is just an annotation (the "A" in AtScript) and declared how the component instance will be rendered (when the page uses <todo-app>, the component's template comes from file todo.html).

@Component({
  selector: 'todo-app',
  template: new TemplateConfig({
    url: '/todo.html'
  })
})

The bottom part is plain ES6 (in this case there are no dependency injection annotations)

class TodoApp {
  todos;
  constructor() {
    this.todos = ['item 1', 'item 2'];
  }
}

I like the clear separation between the template (using annotation) and the model (regular ES6 class). Makes the model much simpler to unit test. I will skip the template example, because the current template syntax right now looks crazy, and probably will change.

Learning resources

AngularJS 2 Todo app

AngularJS 2 libraries:

Short comparison between various languages doc

Interesting for comparing ES6 / AtScript using AngularJS 1.3:

Transitioning from 1.x to 2.0

There is no official guide yet, because v2 is not ready yet. A little bit of advice judging by the things that were removed:

  • Read Preparing for the future of AngularJS
  • Do not use stand alone controller functions
  • Use custom directives with their own controller functions
  • Instead of scopes, use controller as syntax
  • Start using ES6 modules for structuring everything but the angular modules themselves
  • Learn and take advantage of new features in ES6 - there are lots of them.

Update 1

6to5 is now called Babel