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

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

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

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

Vandelay Design Blog稿源:Vandelay Design Blog (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 产品设计 » Understanding Angular 2.0 – Modules, Components, Templates, and More

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录