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.
As you all know that Angular is used to build web applications. Next in this blog, we will see how we can create a basic website in 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.
  • 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.


Comments

Popular