Angular From Scratch Tutorial – Step 2: Components

Posted on By Andre Dias
angular, javascript

Angular From Scratch Tutorial – Index
PREVIUS: STEP ONE
NEXT: Angular From Scratch Tutorial – Step 3: Binding

 

Note

The purpose of this page in this tutorial series is to provide a very fast approach that is useful for revisions when you have already dealt with Angular, but after an absense of using it, it turns necessary to do a “disk swap” bringing from “disk” to your “memory” again. 🙂

If it is your first Angular approach, or you are a newbie, it is recommended to go first to the Angular’s documentation. After, this page will serve you as a summary for fast referencing and revision.

Target

Creating a new component, to where the current initial page content will be moved to.
Providing routing to the moved content creating a link to it.

Source Code/Download

For more details, the source code may be found on GitHub, “step3” tag (includes step1 up to step3).

 

What is a Compoment

Using a simple way of defining things, we may see a component as a chunk of script belonging to its respective HTML.
I like to think about Angular as a segmented tool to bind HTML (the template) and its scripting code (the component) putting them together under the same folder, instead of having everything together and a huge code to dig in, up and down.

Each part takes care of a specific feature, split into HTML and its script code, making things easier.

The HTML code is called “template”.
The script part is the “component”.
Between, there is the interaction provided by “bindings”.

 

 

Excellent more detailed information at Angular’s documentation.

Commands to create component

ng generate component new-cmp
or
ng g component new-cmp
or ng g c new-cmd

Creating the “original-init-page” component 

The purpose of a component is perfect to our purposes of  moving the content of the initial page to another place to be referenced by a specific URL.

Do:

ng g c original-init-page

 

 

 

 

Routing – URL setup

Target: we desire to access the content of the component.
Solution: we need to provide routing.

Change the app.app-routing.module.ts file to be like this:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { OriginalInitPageComponent } from './original-init-page/original-init-page.component';

const routes: Routes = [
  {path: '',   redirectTo: 'index',  pathMatch: 'full'},
  {path: 'ori-init-page', component: OriginalInitPageComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }



First you import the new component:
import { OriginalInitPageComponent } from ‘./original-init-page/original-init-page.component’;
After, it is created the default page routing:
{path: ”,   redirectTo: ‘index’,  pathMatch: ‘full’},
Then, the new component routing:
{path: ‘ori-init-page’, component: OriginalInitPageComponent }

Testing

Pointing to:
http://localhost:4200/

shall return the same thing, but pointing to:
http://localhost:4200/ori-init-page

returns the new component’s template content, appending to the button of the initial’s page content:

Moving the content from the index.html page to the new component

Go to the app.component.html and cut all the content except this last line:

<router-outlet></router-outlet>
and replaces the original-init-page.component.html content.
The remaining content of app.component.html comes to this:

containing just:

<router-outlet></router-outlet>
And the original-init-page.component.html page contains everything except the “router-outlet” markup.
This markup is a placeholder that marks where the router will render its output filtered by the Routes that were configured above.
Now, copy the “title” from app.components.ts to original-init-page.component.ts.
Check the images below:
app.components.ts

original-init-page.components.ts

 

Testing again

Pointing to:
http://localhost:4200/

you shall get a blank page, without content, but pointing to:
http://localhost:4200/ori-init-page

it is returned the original page initial content.

 

 

NEXT

Angular From Scratch Tutorial – Index

Angular From Scratch Tutorial – Step 3: Binding

PREVIUS: STEP ONE