1. Create an Angular App using angular CLI
ng new angular-templat
2. copy all the files and folder and paste it in the src > assets folder expect the HTML file.
3. Then include your all css files into the angular.json file like this ex.
“styles”: [
“src/styles.css”,
“src/assets/css/custom.css”,
“src/assets/vendor/bootstrap/css/bootstrap.min.css”,
“src/assets/vendor/font-awesome/css/font-awesome.min.css”,
“src/assets/css/fontastic.css”,
“src/assets/css/grasp_mobile_progress_circle-1.0.0.min.css”,
“src/assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css”,
“src/assets/css/style.default.css”
],
4. Then include your Js file into the angular.json ffile like this ex-
“scripts”: [
“src/assets/vendor/jquery/jquery.min.js”,
“src/assets/vendor/popper.js/umd/popper.min.js”,
“src/assets/vendor/bootstrap/js/bootstrap.min.js”,
“src/assets/js/grasp_mobile_progress_circle-1.0.0.min.js”,
“src/assets/vendor/jquery.cookie/jquery.cookie.js”,
“src/assets/vendor/chart.js/Chart.min.js”,
“src/assets/vendor/jquery-validation/jquery.validate.min.js”,
“src/assets/vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js”,
“src/assets/js/charts-home.js”,
“src/assets/js/front.js”
]
5. Now time to create components for all the html files first we will create layout like this. Run the command below listed Ex–
>> Create header component using Angular CLI.
ng generate component components/layout/header
>> Then create sidemenu component using angular CLI
ng g component components/layout/sidemenu
>> Then create sidemenu component using angular CLI
ng g component components/layout/footer
6. Now we can create site component using angular CLI
>> Create components of all html files that you have in html template like this ex-
ng g component components/site/home
ng g component components/site/charts
ng g component components/site/forms
ng g component components/site/login
ng g component components/site/register
ng g component components/site/tables
7. Now move to the folder structure of your project, you can see that in two folders find in src > app > layout > site
Open layout folder from app, and
Paste header code into header.component.html
paste sidemenu code into sidemenu.component.html
paste footer code into footer.component.html
Now paste main content of the html pages in the site folder under the respective pages.
8. After you finish all the above steps now turns into the angular routing
>> Now write routing for the corresponding site in app.module.ts file
import { FooterComponent } from ‘./components/layout/footer/footer.component’;
import { HomeComponent } from ‘./components/site/home/home.component’;
import { ChartsComponent } from ‘./components/site/charts/charts.component’;
import { FormsComponent } from ‘./components/site/forms/forms.component’;
import { LoginComponent } from ‘./components/site/login/login.component’;
import { RegisterComponent } from ‘./components/site/register/register.component’;
import { TablesComponent } from ‘./components/site/tables/tables.component’;
import { RouterModule, Routes } from ‘@angular/router’;
import { registerContentQuery } from ‘@angular/core/src/render3/instructions’;
const appRoutes: Routes = [
{ path: ‘login’, component: LoginComponent },
{ path: ‘home’, component: HomeComponent},
{ path: ‘register’, component : RegisterComponent},
{ path: ‘charts’, component : ChartsComponent},
{ path: ‘forms’, component : FormsComponent},
{ path: ‘tables’, component : TablesComponent},
{ path: ”,
redirectTo:’/home’,
pathMatch:’full’
}
];
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
SidemenuComponent,
FooterComponent,
HomeComponent,
ChartsComponent,
FormsComponent,
LoginComponent,
RegisterComponent,
TablesComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
9. Now you are good to go the final step
>> Now paste below code into app.component.html
<app-sidemenu></app-sidemenu>
<div class=”page”>
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
10. Now you are done type ng-serve to run this application.
