1. Introduction

That will be easy if we just want to simple to integrate the HTML layout into Angular, just create the header,center and footer component and put the corresponding HTML to each component will be ok, but, I don’t like it, because I think the well design structure is very important for a project, in my concept, I think there are at least two part layouts for a complete website, one is frontend for presentation and the other is backend for admin management. So we should need to support two difference layouts in this situation.

By the way, for this article, I just want to demo how to create the Angular project’s infrastructure and integrate the HTML layout, so there is no any function for data operation. Ok, let’s start it!

2. About the HTML layout

Of course you can design the HTML layout yourself if you can, but I am nor a designer so I will download the existing open source and free HTML template 🙂 For this demo, I will use the free HTML template for frontend and the other one for backend.

3. Design the project infrastructure

3.1. Create base folders structure

There are several sections need to be use in this project

1) backend (admin) layout
2) authentication user login for admin management
3) frontend layout
4) core section for common logic and services
5) shared section for common components

So, we can create the below project structure

and we need to handle two difference layouts, so don’t need the app.component.html and app.component.scss file, we just need to put the router-outlet in full page, so put it in the app.components.ts will be ok:

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>',
})

3.2. Create the frontend layout

For well management and maintain, we can use module for each section. So we will create a frontend module under the frontend folder

ng g m frontend

3.2.1. Create each page for frontend

we can take a look the frontend HTML template, there are many sections in this site

after analyzed the HTML template, we know that we should create the below pages (components) base on frontend module, and we don’t need to generate the unit test file, so use --skip-tests parameter

ng g c frontend/header -m=frontend --skip-tests 
ng g c frontend/home -m=frontend --skip-tests 
ng g c frontend/about -m=frontend --skip-tests 
ng g c frontend/contact -m=frontend --skip-tests 
ng g c frontend/portfolio -m=frontend --skip-tests 
ng g c frontend/pricing -m=frontend --skip-tests 
ng g c frontend/services -m=frontend --skip-tests 
ng g c frontend/footer -m=frontend --skip-tests 
ng g c frontend/frontend-layout -m=frontend --skip-tests 

the lase frontend/frontend-layout is the main layout for frontend, just like the app.component.html, because we need to handle two difference layouts, so also need to create two difference main layouts.

3.2.2. Create the frontend routing

We need to create the pages routing for frontend section, for more clear and easy maintain, we create a frontend-routing.module.ts for handle the routing

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { HomeComponent } from './home/home.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { PricingComponent } from './pricing/pricing.component';
import { ServicesComponent } from './services/services.component';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'about', component: AboutComponent },
  { path: 'home', component: HomeComponent },
  { path: 'portfolio', component: PortfolioComponent },
  { path: 'pricing', component: PricingComponent },
  { path: 'services', component: ServicesComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class FrontEndRoutingModule { }

here we set the path for each page (component), so that we can use the URL for access them, and we need to add the routing to frontend.module

@NgModule({
  declarations: [
    HeaderComponent,
    HomeComponent,
    AboutComponent,
    ContactComponent,
    PortfolioComponent,
    PricingComponent,
    ServicesComponent,
    FooterComponent,
    FrontendLayoutComponent
  ],
  imports: [
    CommonModule,
    FrontEndRoutingModule  //add the routing here
  ]
})
export class FrontendModule { }

in the end, we also need to add the frontend module to app.module

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FrontendModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3.2.3. Split the HTML to each section

We can find the HTML template structure as below

the <div id="wrapper">...<div> section is the dynamic content area, so we need to replace to router-outlet, and we also need to split the header and footer

so we can copy the HTML template file index.html codes into frontend-layout.component.html and replace the <div id="wrapper">...<div> to below

<div id="wrapper">
  <app-header></app-header>
  <router-outlet></router-outlet>
  <app-footer></app-footer>
</div>

and then copy the HTML codes to corresponding component, for example, copy the <header>...</header> HTML to header.component.html, and <footer>...<footer> to footer.component.html, the middle of content’s HTML between header and footer to home.component.html

the header and footer are static and should be fixed, so we just need to copy the middle content to each component, for example:

The middle of content about.html to about.component.html
The middle of content contact.html to contact.component.html
The middle of content portfolio.html to portfolio.component.html
The middle of content pricing.html to pricing.component.html
The middle of content services.html to services.component.html

After that, we need to copy all of the HTML template’s NoN HTML files (e.g img,css,fonts,js) into /MyDemo.Client/src/assets/frontend folder, and update all of the links in frontend-layout.component.html , so the page should be like below

But please wait! Because angular is not allow to put any script in the component, so if we do so, these js files will be ignored, but we also can’t put these js files into root index.html, because we need to support multiple layouts with their own javascript and css files, so how should we do?

another approach that we can dynamic load the scripts when component loaded, let’s update frontend-layout.component.ts as below

create a function for dynamic load script

 loadScripts(path: string){
  let node = document.createElement('script');
  node.src = path;//Change to your js file
  node.type = 'text/javascript';
  node.async = true;
  node.charset = 'utf-8';
  document.getElementsByTagName('head')[0].appendChild(node);
 }

implements the OnInit event and call the loadScripts, we need to put all js files in an array and loop them

ngOnInit(): void {
    var scripts = [
      "/assets/frontend/js/jquery.js",
      "/assets/frontend/js/jquery.easing.1.3.js",
      "/assets/frontend/js/bootstrap.min.js",
      "/assets/frontend/js/portfolio/jquery.quicksand.js",
      "/assets/frontend/js/portfolio/setting.js",
      "/assets/frontend/js/jquery.flexslider.js",
      "/assets/frontend/js/animate.js",
      "/assets/frontend/js/custom.js"
    ];

    scripts.forEach(script => {
      this.loadScripts(script);
    });
 }

after that, we can use the js files, but maybe this is not good way, so please let me know if you have other better approach 🙂

Ok, now we can try to run the project and take a look:

Oh, unfortunately, the page was broken, what happen? After checked it, we missed an important thing that update the app routing for frontend module, so update the app-routing.module.ts as below

const routes: Routes = [{
  path: '',
  component: FrontendLayoutComponent,
  children: [{
    path:'', loadChildren: () => import('./frontend/frontend.module').then(m => m.FrontendModule)
  }]
}];

it’s better now

but still there was a problem that the images were missed, and we can see the errors in console

so don’t forget to change the images path in HTML, we update the images’s path in home.component.html as below

...
<img src="assets/frontend/img/slides/1.jpg" alt="" />
...
<img src="assets/frontend/img/slides/2.jpg" alt="" />
...
<img src="assets/frontend/img/slides/3.jpg" alt="" />

For now, we review the page again, and seems good! But we still have something need to do, the Menu!

Yes, we can’t navigate to other pages without the menu. Let’s do it!

4. Add the Menu

We still need to implement the header and footer layout, just copy the <header> codes to header.component.html and don’t forget to change the image’s path, and for the page link, we need to use routerLink property, so the codes will be like

<!-- start header -->
<header>
  <div class="navbar navbar-default navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <button
          type="button"
          class="navbar-toggle"
          data-toggle="collapse"
          data-target=".navbar-collapse"
        >
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/"
          ><img src="/assets/frontend/img/logo.png" alt="logo"
        /></a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li routerLinkActive="active"><a routerLink="home">Home</a></li>
          <li><a routerLink="about">About Us</a></li>
          <li><a routerLink="services">Services</a></li>
          <li><a routerLink="portfolio">Portfolio</a></li>
          <li><a routerLink="pricing">Pricing</a></li>
          <li><a routerLink="contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>
<!-- end header -->

also, copy the <footer> codes into footer.component.html, these only the hardcode data, so don’t need to change anything.

5. Summarize

Well, we tried to integrate a full HTML template to angular, there are many things need to do:

1) Design or download the HTML template
2) Split the layout to multiple components
3) Handle the multiple layouts in angular
4) Setup the routing
5) Dynamic to load the javascript files
6) Change the hyperlink in menu for support angular routing

We just demo how to integrate the frontend layout this time, actually the admin layout should be same, you can try it yourself if you are interested :satisfied: