Angular 2: New Features & 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.

Component-based Architecture

Angular 2 is entirely component based, so that controllers and $scope are now obsolete. In the following Angular 1 code, the binding is prefixed with the controller alias (e.g., vm or $ctrl) because you have to be specific about the source of the binding. Using version 2 syntax, the context of the binding is implied and is always the associated component, so the reference variable is no longer required.

//Angular 1
My favorite band is: {{vm.favoriteBand}}

//Angular 2
My favorite band is: {{favoriteBand}}

Since controllers have now been replaced by components and directives, let’s examine the role of each of these in more detail.

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.

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:

// 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'
}

Directives

Angular 2 defines two kinds of directives: Structural directives and Attribute directives.

Structural Directives

Structural directives alter the layout of the DOM by adding, replacing and removing its elements. Two examples of structural directive are:

• NgFor: a repeater directive that customizes data display. It can be used to display a list of items.
• NgIf: removes or recreates a part of DOM tree depending on an expression evaluation.

Attribute Directives

The attribute directive changes the appearance or behavior of a DOM element. These directives look like regular HTML attributes in templates. The ngModel directive which is used for two-way binding is an example of an attribute directive. Some of the other attribute directives are listed below:

• NgSwitch: It is used whenever you want to display an element tree consisting of many children. Angular places the selected element tree into the DOM based on some condition.
• NgStyle: Based on the component state, dynamic styles can be set by using NgStyle. Many inline styles can be set simultaneously by binding to NgStyle.
• NgClass: It controls the appearance of elements by adding and removing CSS classes dynamically.

Conclusion

In part 2, we’ll cover the ramifications of Angular 2’s support for ECMAScript 6, as well as other changes.