Sneak peak

A first look at app development in Angular2

Natali Vlatko
Binoculars image via Shutterstock

The news is out: Angular2 has made it to alpha stage with bits and pieces on GitHub ready to play with. We take a look at some AtScript examples and what the core team had to say about the impending release.

A recent presentation by Angular Core Contributor David East has given us a glimpse of the new Angular2. With the codebase for Angular dating back to 2009, the core team is getting ready to reveal the new and improved Angular framework.

A simple cognitive model

East began by assuring punters that Angular2 wanted to sit on top of web standards, rather than create its own. Transclusion is said to no longer be required, because the Shadow DOM now provides this for Angular2 natively. In the new framework we’ll also see a replacement of Angular Modules with ES6 Modules, with East attributing this to Angular’s desire to “play nice as the Web evolves”.

The team wanted to make sure that a simple cognitive model was created in order to improve upon the original Angular concepts you had to learn – they’ve done away with a lot of the conceptual models that an advanced Angular user would know, however claim to have maintained the flexibility and power of Angular as before.

AtScript for Angular2

A not-so-first look for some devs out there was also presented by East and incorporated a little bit of AtScript:

  selector: 'todo-app',
  template: new TemplateConfig({
    url: '/todos.html'
class TodoApp {
  constructor() {
    this.todos = ['Item1', 'Item2'];

AtScript is described as providing some syntax sugar for meta-data annotations. AtScript is the literal translation of the @ symbol, which you can see in the example above represented by @Component.

The example shown is called a ‘component’, which is how users can structure and reason about the UI. As East states, “an entire Angular application is just a tree of components”.

The team has no intention of making AtScript a replacement for JavaScript in Angular2, and it’s not a requirement for use. They’re currently working with TypeScript, V8 and others to get a proposal in order for the TC39 Standards Committee. Other features of AtScript include types being optional, as well as it compiling to ES5.

Other new stuff

On top of the use of AtScript, Angular2 will also feature a new template syntax – local variables are now part of the framework, with the inclusion of the pound sign (#) allowing them to live just inside your template. There’s also the case of property bindings, which were previously bound to attributes. Angular2 now sees them connected to actual properties of a DOM element.

This is all described by East as bringing a certain uniformity to the framework, with events and properties now clearly defined within parentheses and array bracket syntax.

Before beginning his demo, East was compelled to deliver a disclaimer, noting that some elements in alpha were most likely to change.

The full presentation, going through exactly how East created a component and the relevant bootstrapping, is available here.

Natali Vlatko
An Australian who calls Berlin home, via a two year love affair with Singapore. Natali was an Editorial Assistant for (S&S Media Group).

Inline Feedbacks
View all comments