Blog

We believe there is something unique at every business that will ignite the fuse of innovation.

The Angular 2 Developer preview has been available for several month now.  It's core concepts are firmly in place, though fine tuning of the framework's APIs are expected until the official release.  With the design in place, it's time to take a look at this revised framework.  Today we will cover what is Angular 2, why use it, and then dive into building an Angular component.  This post will enable you to hit the ground running on your first Angular 2 app.  


What is Angular 2

Angular 2 is client-side framework of the MV* design pattern.  The framework is built on TypeScript, which is a super-set of EMCAScript6 (which is a super-set of ECMAScript5). Angular 2 applications written in TypeScript are compiled (transpiled) to JavaScript for run-time use.  Angular 2 is a rewrite of the framework, thus it is not backwards compatible with AngularJS.  


Why upgrade to Angular 2    

Not being backwards compatible poses the question, why should I switch to a new framework?  Well, Angular 2 provides several improvements over its predecessor.  

A major improvement to the framework is reduced complexity.  One example is the redesign of change detection.  No longer will the Angular digest make multiple passes over bounded objects to identity and update changes before rendering.  Angular 2's change detection system will perform a depth-first search from the application root through the child bindings.  Benchmark tests indicate this significantly reduces the rendering time.  Another example of the reduced complexity of Angular 2 is the number of built-in directives.  In Angular 1, there were over 70 built-in directives, many of which were DOM wrappers.  In Angular 2, the number of built-in directives is cut to 23, due to support for directly binding to DOM element properties and events. A final example of reduced complexity is the adoption of a single standard for dependency injection (DI) and service creation.  No longer will developers debate over the five forms of service creation or the multiple implementations of DI.  In Angular 2, services will be implemented via classes, while dependencies will be injected via constructor injection.

Besides reduced complexity, the framework gains advantages by being built on EMCAScript 2015 (formerly ES6).  The framework supports new structures such as classes and modules, similar to that found in higher-level languages.  This enables developers to encapsulate business concepts while increasing readability.  The framework also supports dynamic module loading, enabling modules to be loaded via the dependency chain, thus eliminating the need to pre-load dependent JavaScript files, via <script> tags.

Another enhancement to the framework is support for type declarations (via TypeScript).  Also found in higher-level languages, typing enables developers to detect defects earlier in the development process.

One final improvement to the framework is the incorporation of decorators (via Typescript).  Decorators (such as @Component) isolates metadata configuration from code, promoting separation of concerns and increased readability.
            
        
Project setup 

In order to setup your first Angular 2 project, you will need to install Angular 2, as well as a transpiler (TypeScript, Babel, Traceur, etc).  For a quick setup, there are a number of Angular 2 seed projects available online (such as Angular.io and John Papa's Angular2-go).  The following section will expound upon key concepts of an Angular component.


Components 
A core concept of Angular 2 is the component. A component is an encapsulation of business logic and template markup, associated with a custom HTML tag.  To demonstrate, below is a basic component that renders 'Hello World!'.

 

app.ts

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

    @Component({
        selector:'my-app',
        template:'<h1>Hello World!</h1>'
    })
    class MyAppComponent{
    }
    bootstrap(MyAppComponent);

As seen above, a component is comprised of two parts; the @Component decorator and the component class.  The @Component decorator specifies metadata settings on the component.  In this example, the selector property is used to bind the component to the 'my-app' element in the DOM.  The template property is the UI portion of the component, providing markup that is to be rendered for the component.  The markup can be specified inline using the template property (as in this example), or access via a URL using the templateURL property.  The component class hosts properties and functions supported by the component.  These properties are accessible by the component's template.  After the component is configured, the top level (root) component is bootstrapped.  Bootstrapping the component will instantiate the component, and build the Shadow DOM from the component's template.  Thus enabling the rendering of the component.

In order to utilize the component, add the HTML element specified in the selector property, to your template's body and import your module, as demonstrated below.


index.html


<html>
  <head>
  <title>Angular 2 Quickstart</title>
  <script src="https://jspm.io/system@0.16.js"></script>
  <script src="https://code.angularjs.org/2.0.0-alpha.45/angular2.dev.js"></script>
  </head>
  <body>
    <my-app></my-app>
    <script>System.import('app');</script>
  
  </body>
</html>


Conclusion

Today we've covered what is Angular 2, advantages to using this framework, as well as how to setup a basic component.  In future installments of the series, we will cover additional features of the framework such as routing and component communication.