Understanding Angular 2.0 – Modules, Components, Templates, and More

With the release of a stable Angular 2.0 this past fall, it’s important that those who use the framework understand its underlying concepts and how they differ from version 1 to 2. Last December, the Angular development team announced that the framework had reached its beta stage. When the beta version was released, so was this architecture guide, which outlines the core parts of the Angular 2 and provides insight into how the framework operates. After reading it, I decided to create this article outlining a few of the concepts Angular 2 was built on, specifically:

  • Components
  • Modules
  • Templates Syntax & Data Binding

Quick note: I will be referring to Angular 1.x as AngularJS.

Modules

When using Angular 2.0, developers build applications which consist of modules that contain components, services, pipes, and more. Unlike modules in AngularJS, however, the modules used in Angular 2 utilize the ES6 module format. For those unfamiliar with this feature, it makes use of export and import statements to share code throughout an application. These import statements allow users to access core parts of the framework as well as custom components (AngularJS filters).

To get a better understanding of how this works, let’s look at a piece of Angular 2 code.

//app/example/example.component.ts
import {Component} from 'angular2/core';
@Component({
selector: 'example-component',
templateUrl: 'app/example.component.html'
})
export class ExampleComponent {
}

The first thing we want to focus on is the import statement, which allows us to create a custom component.

import {Component} from 'angular2/core';

By taking a closer look, we see that it has been imported from the angular2/core. This is an example of destructuring in JavaScript. We are importing only the portion of code from this library that we need.

In addition to the angular2/core library, other popular libraries are angular2/http and angular2/common, all of which give users access to core features of the framework.

If we wanted to create a view in Angular 2, our code would look like the portion below, and we would import only the code needed to build both a @Component and a @View.

import {Component, View} from 'angular2/core';

Now that we’ve learned about the import statement, let’s discuss the export statement at the bottom of the code.

export class MyComponent {
}

By examining our code, we can see that Angular 2 is making use of the export statement to expose ExampleComponent. Once this is implemented, the class being exported will be available in our other files, granted that we import them using the correct path.

Components

Components are the building blocks of Angular applications. They are what Directives were in AngularJS; however, they are much simpler to configure, thanks to TypeScript. In Angular 2, the use of components removes the need for controllers and directives, thus solving a number of issues developers were faced with in AngularJS. Additionally, components are totally encapsulated, which means that we do not have to worry about code in our components interfering with others on the page, as long as we are using them correctly.

Angular 2.0 applications usually consist of a top-level component. Inside this component, we need to import any other components we want this application to utilize.

To get a better understanding of this, let’s look at another piece of code which replicates a top-level component.

app/main.ts
import {Component} from 'angular2/core';
import { ExampleComponent } from '../example/example'
@Component({
selector: app-component,
styleUrls: ['app/styles.css'],
directives: [ExampleComponent]
template: `
This is the Main Component!!!!
`
})
export class MainComponent {
}

Now that we know a little bit about the framework, we can infer some things about our code. First, we are importing ExampleComponent from the path relative to this file. Next, we see that ExampleComponent is being included inside this component’s configuration as a directive, which is a practice that Angular uses to nest components. As a result of steps 1 and 2, we can then make use of the <example-component></example-component> HTML tags within this MainComponent‘s template, thus sharing the logic defined within the ExampleComponent

Template Syntax & Data-binding Binding

When working with Angular 2, developers utilize a uni-directional data flow to send properties throughout an application. The exception to this case is Angular 2’s ngModel directive, which can provide two way data binding when necessary, by utilizing the following syntax: [{ngModel}]. By analyzing the syntax, we see that we have both a parenthesis and square bracket, both of which are core to Angular 2’s new syntax and signify an event binding () as well as property binding [].

Property Binding – []

Angular uses [] to bind properties to a template. Property bindings flow into the template via the component and can only be used to set different property. To perform this in AngularJS, we relied upon directives like ng-class, ng-src, ng-style, etc. In Angular 2, however, we can achieve this by using the [] syntax to bind values to HTML elements.

To get a better understanding of this, let’s take a look at a piece of code below. For the sake of this example, let’s assume that this template is tied to a component that has imgSrc and isShowing properties.

First, we see Angular’s use of nested property bindings with [class.isShowing]=”isShowing”. By examining this binding, we see that it is using dot notation to tell Angular to add the img-border class to our div granted, and that the isShowing property is true. Additionally, we can utilize this syntax to set styles on elements like so : [style.background]=”‘blue'”. Continuing on, we see that [src] being used to set our <img> tag to render a URL set inside our component.

Event-binding – ()

When working in AngularJS, a core concept was two-way data binding. Although it worked, it often caused a lot of problems due to the side-effects of constantly sending data back and forth through an app, thus explaining why Angular 2 makes use of the uni-directional flow. Unlike property bindings, events flow from the template to the component. As a result of this, events can be used in correlation with property bindings to perform some pretty powerful stuff.

When working in AngularJS, developers utilized directives such as ng-click, ng-blur, ng-submit, etc., in order to fire off events; however, this has changed dramatically in Angular 2. Furthermore, Angular 2 provides users access to all of the native HTML5 events, such as click, mouseenter, mouseleave, change, blur, etc., by simply wrapping the name of an event in parenthesis.

When working with inputs in Angular 2, the framework provides an $event message, which contains a message about our input value. In the example, we can see $event works in an input tag to perform two-way data binding.

We already know that we can achieve this using {{ngModel}}; however, this example provides a solid look at how data flows throughout an application.


dfdfdfefe {{name}}

<!– Same result as –>

Because data is not being sent through the same pipeline, we would need to use this syntax to achieve two way data binding (unless we utilize [{ngModel}]. That said, our template’s {{name}} value is receiving its data from the component, and will change whenever our (input) event sends data back to the component.

Conclusion

The release of Angular 2 was highly anticipated by developers all over the world, myself included. And although I have only spent a small amount of time working with it, it is clear that we will continue to see it used, not only in large-scale web applications, but in mobile and desktop app development as well. Below, I have listed a few helpful resources. If you have any questions, feel free to reach out in the comments below.

Angular 2 Resources

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.