[Angular Tutorial] - 01 - Getting started

Hi guys, this is the first post in my series Angular 2(4) Tutorial. In this series, I will go from basic to advanced Angular so hopefully you will enjoy and find useful with it.

Getting started

In this post we're going to learn about @Component and @NgModule.

Before getting started, you need to setup an Angular project but for quickly coding we will use this editor code embedded below.

As you can see Hello Angular 4! on the result screen. Let's move to the source code editor screen. Click on file button to see which files need for a component.

@Component

We have app.component.css, app.component.html and app.component.ts needed in App component.

To create a component we need to import Component decorator from @angular/core module.

Next,

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

This @Component decorator contains information needed for Angular create a component.

selector: this will represent component as element HTML. You can check in index.html how it is used <my-app>loading</my-app>.

templateUrl: indicates html template of component. There is an alternative way that use inline template, so you will write HTML code inside app.component.ts file (template: "<div>Hey!</div>")

styleUrls: indicates which css files needed for this component.

In real project we usually use SASS instead of pure CSS, you can find how to setup SASS working on Angular with Webpack here.

Next,

export class AppComponent  {  
  name: string = 'Angular Tutorial';
}

Quite simple, we just need to export AppComponent class and inside class we define a property called name and set value for it. This value will be ready to use in template.

If you are new with TypeScript classes let's take a look on Classes, Spread operator, Arrow functions and Immutability in TypeScript.

Also for import and export you can read here.

We've just finished creating a component. So how can it work? It work by registering this component into an Angular module.

@NgModule

In any Angular application we all need a root module to responsible for whole application. So let's create it with NgModule, now we called AppModule.

Here is the code of AppModule, let's go through from top.

import { NgModule } from '@angular/core';  
import { BrowserModule } from '@angular/platform-browser';  
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, CommonModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

In order to create a Angular module, we need to import NgModule decorator from @angular/core module.

@NgModule({
  imports:      [ BrowserModule, CommonModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

Because we are creating an web application so we need to import BrowserModule. To be able to use some common directives like ngIf, ngFor (we will learn in future posts in this series) and so on we need to import CommonModule.

declarations? What does it mean? It means that we have to register any components which we want to use in this App module.

Because this module is a root module (App module) so we need to indicate what is the bootstrap component (means root component).

You can find in the index.html:

<my-app>loading</my-app>  

On this embedded editor, they already removed html tag and body tag. But in real project you can see something like:

<!DOCTYPE html>  
<html>

<head>  
    <title>Angular Tutorial</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>  
    <my-app>loading</my-app>
</body>

</html>  

You can try by yourself on online Angular editor.

Conclusion

Hope you will enjoy and understand how to get started with Angular 2+.

Next, we will learn about Expressions, Property binding and Event binding. Stay tuned!

Nguyen Tran

I'm Nguyen, a full stack web passion for frontend and love Angular.

Subscribe to Nguyen Tran

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!