What’s New in Angular 2: Versioning, Features, and Components

Angular, or AngularJS as it’s officially known, is a front-end structural framework for dynamic web app development. It utilizes HTML as a template language which it then extends to define an application’s components. The Angular framework provides data binding and dependency injection that minimizes the amount of code you have to write yourself. Since Angular works within the browser, it may be employed with your server technology of choice.
Just last month, Google HQ announced the final release version of Angular 2. Along with many new features, Angular has undergone quite a few changes that may give developers pause for thought. In an effort to smooth the transition, we’ll cover the most important changes and get you on track to coding with the new Angular framework, starting with Components and Directives.

Versioning

There have been a lot of complaints from developers who found Angular’s Release Candidate labeling confusing. In response to these concerns, and to make it easier to manage dependencies in future releases, Angular 2.0.0 is the first release to use semantic versioning, based on the MAJOR.MINOR.PATCH scheme as described by semver. The semver versioning scheme asserts that:

  • the MAJOR version gets incremented when incompatible API changes are made to stable APIs
  • the MINOR version gets incremented when backwards-compatible functionality are added
  • the PATCH version gets incremented when backwards-compatible bug are fixed

New Features

Angular 2 has been a long-time coming. Part of why the release took so long is that it is no longer just a web framework. Angular 2 is now a platform that encompasses a wide range of capabilities, including:

  • universal server rendering: Runs on top of a Node.js back end, which produces a server rendered view. This greatly improves perceived performance for first-time users of your application, thereby improving their overall experience.
  • a mobile toolkit: As the name implies, the mobile toolkit provides all the tools and techniques to build high-performance mobile apps using Angular CLI and Angular Mobile Toolkit. Web apps built using the mobile toolkit will load on any device, with or without an Internet connection and can take advantage of the searchability, shareability, and no-install-required features of the Web.
  • a command line interface: The new Command Line Interface (CLI) can generate components, routes, services and pipes via commands. The CLI will also create simple test shells for all of these.

A Component Example

Components are controller classes that are associated with a template. Components mainly deal with a view of the application and logic on the page. The component contains two important things: a view and some logic.

1
2
3
4
5
6
7
8
9
10
11
System.config({
  //transpiler tool converts TypeScript to JavaScript
  transpiler: 'typescript',
  //emitDecoratorMetadata flag used by JavaScript
  //output to create metadata from the decorators
  typescriptOptions: { emitDecoratorMetadata: true },
  packages: {'app': {defaultExtension: 'ts'}}
});
System.import('/angular2/src/app/component_main')
  .then(null, console.error.bind(console));

In the above code, “angular2” includes the packages from the app folder, from which Angular will load the main component file. Each Component and View is defined within a TypeScript(.ts) file. Here’s an example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// component's metadata can be accessed using this primary Angular library
import {Component, View} from "angular2/core";
//framework recognizes @Component annotation and
//knows that we are trying to create a new component
@Component({
   //specifies selector for HTML element named 'app'
   selector: 'app'
})
@View({
  //template property holds component's companion
  //template that tells Angular how to render a view
  template: '<h2>Welcome to {{name}}</h2>'
})
export class App {
   name : 'My App'
}

Write a comment