First Angular Project for Beginners

Hello Everyone, If you want to learn the Angular and create your first simple project so these article for you.

Here We create a simple Website for Routing Step By Step

Step 1: Create a New Project

In Angular to create a new project use following command.

ng new routing-project

After Run Following command install Angular Routing and accept default CSS Like These

Then Go to the project

cd routing-project

Step 2: Create Components

Components is peace of code Here components means different screens or URLs.

Write following for Create components

ng g c Home
ng g c About-Us
ng g c Contact-Us

Here “g” stand for “generate”, “c” stand for “component” It is shortcut In angular.

It will create Files Like These

Step 3: Register Components

Go to the “src\app\app-routing.module.ts” and add following code

src\app\app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutUsComponent } from './about-us/about-us.component';
import { ContactUsComponent } from './contact-us/contact-us.component';

const routes: Routes = [
  {
    path:'home',
    component:HomeComponent,
  },
  {
    path:'about-us',
    component:AboutUsComponent,
  },
  {
    path:'contact-us',
    component:ContactUsComponent,
  }
];

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

Step 4: Create Home Page and add Routing

Go to the “src\app\app.component.html” and Remove all code and add following code

src\app\app.component.html

<h1>SolvedMyCode.com</h1>

<ul class="nav">
  <li><a routerLink="home">Home</a></li>
  <li><a routerLink="about-us">About Us</a></li>
  <li><a routerLink="contact-us">Contact Us</a></li>
</ul>
<router-outlet></router-outlet>

Step 5: Add CSS(Optional)

Go to the “src\app\app.component.css” and add following code

src\app\app.component.css

ul.nav {
    margin:0;
    padding:0;
    list-style:none;
    height:36px; line-height:36px;
    background:#0d7963; /* you can change the backgorund color here. */
    font-family:Arial, Helvetica, sans-serif;
    font-size:13px;
}
ul.nav li {
    border-right:1px solid #189b80; /* you can change the border color matching to your background color */
    float:left;
}
ul.nav a {
    display:block;
    padding:0 28px;
    color:#ccece6;
    text-decoration:none;
}
ul.nav a:hover,
ul.nav li.current a {
    background:#086754;
}

Preview:

I hope It helps you….

Visit My Website to Learn More Click Here