Create a static website using Angular 7 – Step by Step tutorial

by
In this blog, we will see how to create a static website in Angular 7. Creating a website or site in Angular is so easy that you can create a simple static website by reading this blog.
As you all know that Angular is used to build web applications. After reading this blog you can easily create pages and then you can define the route for those pages in Angular 7.

If you are new to Angular then please visit my earlier blog – Angular Tutorial.

Hope you have all pre-requisite tool to develop web application in Angular? If not, then please read this blog – Setting up local development environment for Angular

How to create a static website in Angular 7?

  • Create a new Angular App using this command– ng new MyProjectName
  • Create Various components for your Angular App like – Header, Footer, Side Bar, Home Page Component, About Component, Contact Us Component, FAQ Component, Blog Component. This is based on your website requirement.
Read:- Angular Interview Questions
  • To create a component in the Angular app, use this command – ng g c pages/header (See Angular CLI command for more details.) This will create 4 files i.e. header.component.css, header.component.html, header.component.spec.ts and header.component.ts in header folder within app > pages folder
  • Import newly created component in app-routing.module.ts as shown in below screenshot
  • Import component and create an array in routes.
angular 7 - step by step site creation
Note: All selector is created like this –  app-<component name>
So here it will be app-header, app-home, app-footer
  • Open app.component.html and add the selectors in order with exact parent div given in HTML
create site using angular7
  • Add all external files like CSS, js in index.html file.
  • Now you may place HTML in respective component.html files.
  • Use a router link to define the path in HTML.
How to create site using angular7?
Now run your newly created site. To run type below command –
ng serve –o
This will open your Angular app in the default browser and then you can navigate as per route path created in the app-routing.module.ts file.

Summary –

So based on the above points we can summarize like below –

Create a component as per your requirement using Angular CLI.
Create an array of routes in app-routing.module.ts
Place selectors in app.component.html. Add external files in index.html.
I hope you like this blog, then share it on social media and subscribe to the blog.

Related posts:

  1. How to implement JWT Token Authentication in Angular with .NET Core?
  2. Can we install multiple versions of Angular on a single System?
  3. Is Angular 16 the Quirkiest Version Yet? Find Out Now!
  4. Level Up API Authentication with JWT Refresh Token in ASP.NET CORE and Angular
  5. Standalone Components in Angular 14: Breaking Free from Modules

Leave a Comment

RSS
Facebook
Twitter
YouTube
YouTube
Instagram