Create a static website using Angular7 step by step tutorial

In this blog, we will see how to create a static website in Angular 7? If you are new to Angular then please visit my earlier blog. Angular Tutorial.

How to create a static website in Angular 7?

  • Create a new Angular App using this command– ng new MyProjectName
  • Create Various component 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.
  • To create a component in 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 screen shot
  • Import component and create 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 routerLink 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 default browser and then you can navigate as per route path created in app-routing.module.ts file.

Summary -

So based on above points we can summarize like below -
Create component as per your requirement using Angular CLI. Create array of routes in app-routing.module.ts
Place selectors in app.component.html. Add external files in index.html.

If you like this blog, then please share this on social media and comment down below to give your feedback.


Keep following - SharePointCafe.Net

Comments

Popular

What is Web API? When should we use in our projects?