Application Setup

TABLE OF CONTENT

Install the Angular CLI

Install the Angular CLI, if you have not already installed.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install -g @angular/cli
npm install -g @angular/cli
npm install -g @angular/cli

Create a new Application

Create a new project named

electronic-shop
electronic-shop with the below CLI command.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
ng new electronic-shop
ng new electronic-shop
ng new electronic-shop

The Angular CLI generated a new

electronic-shop
electronic-shop project with a default application and supporting files.

Install Bootstrap

We will use the Bootstrap UI for the creating the User Interface.

Refer Bootstrap Installation for angular, to install bootstrap in this application,

Serve the Electronic Shop Application

Now serve the application using  

ng serve
ng serve command and remove the default content from 
app.component.html
app.component.html

application setup is complete.

Now we have a blank canvas to start with our application.

let’s add one title message and tagline of our application.

Add Jumbotron in AppComponent

Jumbotron is the Bootstrap component. 

We can use it to show the welcome message, company profile as well as offers, based on your requirement.

I have created one jumbotron on the

app.component.html
app.component.html so that it can be visible on all pages. In this, I have shown, one header which will show you a welcome message. And one text which will show you the tagline.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">Welcome to Electronic-Shop</h1>
<p class="lead">THE ONLINE MEGASTORE</p>
<hr class="my-2">
</div>
</div>
<div class="jumbotron jumbotron-fluid"> <div class="container"> <h1 class="display-3">Welcome to Electronic-Shop</h1> <p class="lead">THE ONLINE MEGASTORE</p> <hr class="my-2"> </div> </div>
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-3">Welcome to Electronic-Shop</h1>
    <p class="lead">THE ONLINE MEGASTORE</p>
    <hr class="my-2">
  </div>
</div>
  • Tip

If you have installed Bootstrap Snippets Extension then, just write

b4-jumbotron
b4-jumbotron on an html page, and it will generate the basic jumbotron template for you.

As shown below, above code will display welcome message and the tagline on the screen.

Jumbotron

Summary

  • We have created initial application structure using Angular CLI.
  • after that, we have installed Bootstrap UI.
  • at the end, we have added a welcome message and tagline of our application using jumbotron on the app.component.html.
Introduction
Component