Scribd
Upload
29 views

Creating Angular App and Adding Bootstrap

An Angular application is created using the command "ng new app" and routing is added. Bootstrap is then added using "ng add @ng-bootstrap/ng-bootstrap". Components like home, header, footer, add-player etc are generated using "ng generate component". The app-routing module defines routes for each component and the header/footer are included in app.component.

Uploaded by

Deepthi Chinnu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
29 views

Creating Angular App and Adding Bootstrap

An Angular application is created using the command "ng new app" and routing is added. Bootstrap is then added using "ng add @ng-bootstrap/ng-bootstrap". Components like home, header, footer, add-player etc are generated using "ng generate component". The app-routing module defines routes for each component and the header/footer are included in app.component.

Uploaded by

Deepthi Chinnu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

CREATING ANGULAR APPLICATION AND ADDING

BOOTSTRAP
***Note : Good Internet connection is required****

Open VS Code

Open terminal (Keyboard shortcut : ctrl + shift + ` )

- set the terminal path to desired location

Enter the below command to generate Angular project

ng new app

Add Angular routing by typing “y” and press enter

Select SCSS stylesheet by using Arrow keys and press enter

- Angular application with the name “app” will be created.


The following will be Generated in the app folder

Navigate to the workspace folder, such as app, using following command

cd app

Run the following command to check if the application is created successfully or not

ng serve --open

After running the above command if the following page is opened in your chrome
browser then the app is successfully created
TO ADD BOOTSTRAP
USE THE FOLLOWING COMMAND AND PRESS ENTER

ng add @ng-bootstrap/ng-bootstrap

Enter “Y” and press enter

Bootstrap is now added

Now generate Required Components for the application By using

Syntax:
ng generate component component_name

For this application we need


1) home
2) header
3) footer
4) add-player
5) update-player
6) delete-player
7) view-players
8) view-player
So, we have to run the following command one-by-one

ng generate component home

Similarly when the below commands are executed


.component.html , .component.spec.ts , .component.ts , .component.scss files will be
created for each component

ng generate component header

ng generate component footer

ng generate component add-player

ng generate component update-player

ng generate component delete-player

ng generate component view-players

ng generate component view-player

In src/app all the components will be created

In src/app
Open app-routing.module.ts
-Import all the components,except header and footer
-set route path for each component
--code--
app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AddPlayerComponent } from './add-player/add-
player.component';
import { DeletePlayerComponent } from './delete-player/delete-
player.component';
import { HomeComponent } from './home/home.component';
import { UpdatePlayerComponent } from './update-player/update-
player.component';
import { ViewPlayerComponent } from './view-player/view-
player.component';
import { ViewPlayersComponent } from './view-players/view-
players.component';

const routes: Routes = [{
  path: '',
  component: HomeComponent
},
{
  path: 'add',
  component: AddPlayerComponent
},
{
  path: 'view',
  component: ViewPlayersComponent
},
{
  path: 'view/:id',
  component: ViewPlayerComponent
},
{
  path: 'delete',
  component: DeletePlayerComponent
},
{
  path: 'update',
  component: UpdatePlayerComponent
}];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
In src/app
Open app.component.html
-Clear all the existing code
-copy and paste the following code

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

In src/app/header
Open header.component.html
-Clear all the existing code
-copy and paste the following code

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">MY App</a>
    <button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-
label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  
    <div class="collapse navbar-collapse" i
d="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" routerLink="../">Home <span clas
s="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/add">Add</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/update">Update</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/delete">Delete</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/view">View</a>
        </li>
      </ul>
    </div>
  </nav>

In terminal Run the following command


ng serve --open

the following page will be opened in your chrome browser

You might also like