Angular 2: Introduction to Components

From Angular 2: Getting Started, https://app.pluralsight.com/library/courses/angular-2-getting-started-update/table-of-contents

1 Introduction to Components

1.1 Introduction

We’re going to build a component. Think of an Angular app as a set of components.

1.2 What is a component?

A component contains:
– View:
– A template
– lays out the UI via HTML.
– Includes binding and directives.
– A class,
– supports the view.
– Created w/Typescript.
– Contains properties that are the data elements available to the View. For instance, if we want a title, we’d create a property containing that title.
– methods, which are the logic needed by the view, like to show/hide an image
– Metadata
– Extra data for Angular
– Which defines the class as a component
– Defined with a decorator, which is a function that adds metadata to a class, its members, or method arguments.

Here’s a component (app.component.ts):

// IMPORT
import { Component } from '@angular/core';

// METADATA & TEMPLATE
@Component({
    selector: 'pm-app',
    template: `
    <div><h1>{{pageTitle}}</h1>
        <div>My First Component</div>
    </div>
})

// THE CLASS
export class AppComponent {
    pageTitle: string = 'Acme Product Management';
}

1.3 Creating the Component Class

Let’s look more closely at the class portion of the code:

// THE CLASS
export class AppComponent {
    pageTitle: string = 'Acme Product Management';
}

The author of this tutorial has such a way with words:

A class is a construct that allows us to create a type with properties that define the data elements and methods that provide functionality.

Sigh!

A class is defined by writing class and then its name, i.e., AppComponent. The Angular convention is to name it by feature + component. Also, the convention is that the root component is AppComponent, as we have here.

export is what makes the component available for use by other components in the app. And since it exports something, it’s now an ES module and will be loaded by the module loader automatically.

Within this class are its properties and methods:

    pageTitle: string = 'Acme Product Management';

In this case, there’s only one property, and no methods. It should be clear what we’re looking at here—the name of property in camelCase, the type, and the value.

Methods are placed after properties.

1.4 Defining the Metadata with a decorator

So we have the class, which we defined in the last section—but how does it go from being a class to a component? By giving it component metadata.

// METADATA & TEMPLATE
@Component({
    selector: 'pm-app',
    template: `
    <div><h1>{{pageTitle}}</h1>
        <div>My First Component</div>
    </div>
})

Angular uses this metadata to understand how to construct the view, and instantiate and interact with the component.

It’s attached to the class as a decorator.

Decorator: A function that adds metadata to a class, its members, or its method arguments.

It’s all so clear now! It’s a JS feature that’s in TypeScript and proposed for ES2016…also known as not a JS feature. Angular includes a few different decorators.

Apply a decorator by positioning it directly before the feature it’s decorating. Hence the reason in this example we’re placing the decorator (turning the class into a component) directly before the class.

@Component({
    selector: 'pm-app',
    template: `
    <div><h1>{{pageTitle}}</h1>
        <div>My First Component</div>
    </div>
})
export class AppComponent {
    pageTitle: string = 'Acme Product Management';
}

Observe also that the decorator doesn’t end with a semi-colon. It might be easier to look at it like this:

@Component({ 
// an object
 })
export class…

See, we’re just passing an object into it. We could include a number of properties, and in this case we’re only using two.
selector specifies the component’s directive name.
template is what we’ll render in that directive
pageTitle indicates data-binding, where we grab the pageTitle string from the AppComponent below.

1.5 Importing What We need

If we’re going to use an external function or class, we need to specify where to find it, which is done using an import statement. This is more ES2015 stuff. Basically, if we export something somewhere else, which we did, then we can import it.

We can import…
– From Angular (because Angular is a collection of modules)
– Our own modules
– External modules

So we say this:

@Component({ 
// an object
 })
export class…

Where we’re saying that we have a class we want to define as a Component. Although we know (maybe) what a “component” is, our app doesn’t. How will our app know what a Component is? Because we need to import a definition of it from Angular Core! Which is done like so:

import { Component } from '@angular/core';

@Component({
    selector: 'pm-app',
    template: `
    <div><h1>{{pageTitle}}</h1>
        <div>My First Component</div>
    </div>
})

export class AppComponent {
    pageTitle: string = 'Acme Product Management';
}

And now this is the complete code we had up earlier. And there’s the import line way up at the top. So we’re saying that we need to import something, and we put the member name in curly braces (being in this case, Component), and lastly the path to find it, '@angular/core'

1.6 Creating the App Component

Now we’re going to build the App component, which is the root of our application.

We go to app.component.ts and remove the code that’s there. The rest of my notes are in the comments here:

// we need to import this so that we can use it in the decorator below.
import { Component } from '@angular/core';

// The Decorator begins with an @ sign
// and then the name of the decorator (`Component`)
// which is a function so we put parens ()
// and we pass in an object, so we place curly braces {}
@Component({
    selector: 'pm-app',
    template: `
    <div><h1>{{pageTitle}}</h1>
        <div>My First Component</div>
    </div>
    `
})

// `export` ensures other components can use this /**
// `class` because we're creating a class, followed by its name
// and then some curly braces
export class AppComponent {
    // property name is `pageTitle`
    // property type is `string`
    // property is 'Acme Product Management'
    pageTitle: string = 'Acme Product Management';
}

1.7 Bootstrapping Our App Component

We need to:
– Load the root component, which is done through a process called bootstrapping
– Host the application

Often, an app only has one webpage now: index.html — hence the term “single page apps”. In the HTML, we’d see

<body>
    <pm-app>Loading app…</pm-app>
</body>

where pm-app refers to

@Component({
    selector: 'pm-app',
    . . .

We call this a directive. Again, the way this startup works is
1. In the HTML, we do System.import(‘app’)
2. Which looks in Systemjs.config.js to find app and determine that it should go to ./main.js
3. Where it finds that it should import AppModule from ./app.module, as well as platformBrowserDynamic (which we’re about to use).
4. And then write: platformBrowserDynamic().bootstrapModule(AppModule)
5. Now we can be done with this main.ts file.

Wow, it’s so easy to get an app running with Angular! Oh right, that’s because she did all the work for us and we didn’t have to type anything, and also we’re not quite sure where or what we would type because that hasn’t yet been part of this course. Ah, e-learning, where you can listen to experts read from textbooks.

Continue here: Angular 2: Templates, Interpolation, and Directives.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s