Converting any HTML template into Angular project makes the web development task more easier and faster. A very simple responsive HTML template is used in this tutorial to create a angular project.
Steps:
1. Download any HTML template that contains CSS, JS, HTML and media files only. A free HTML template, “TINKER” is downloaded for this tutorial. If you want to use this template for practice you can download it from the following URL.
2. Create a folder named “angpro” under htdocs folder to create the angular project. Go to the folder and run the following command from the command prompt.
> ng new angpro
3. Copy all files and folders except html files of the template into src/assets/ folder.
4. Open index.html file from project folder in any editor and add all necessary links of css and js files of the template.
5. TINKER is a single page HTML template that has 7 sections. These are home, about, blog, contact, portfolio, feedback and footer. So, you need to create 7 components for these sections. Run the following commands from the project folder to create the components.
> ng g component components/home > ng g component components/about > ng g component components/blog > ng g component components/contact > ng g component components/portfolio > ng g component components/feedback > ng g component components/footer
6. Replace the content of app.component.html file by the following content.
<div class="page"> <app-home></app-home> <app-about></app-about> <app-portfolio></app-portfolio> <app-feedback></app-feedback> <app-blog></app-blog> <app-contact></app-contact> <app-footer></app-footer> </div>
7. Run the following command to check the angular server is working properly or not.
> ng serve -o
8. Open home.component.html file and replace the content with the code of the template’s home section.
9. Repeat the step 8 for others 6 sections of the template and check the output from the browser.
10. If you want to add content from the database and make the blog section dynamic then create a database named “angdb” and create a table named “blog” with the fields- id, type, author, title, details, publishdate and view. Add some records in the table.
11. Create api folder under the project folder and create two php files named database.php and blog.php.
12. Add the following content in database.php file.
<?php
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Credentials: true');
header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header("Content-Type: application/json; charset=UTF-8");
define('HOST', 'localhost');
define('USER', 'root');
define('PASS', '');
define('NAME', 'angdb');
$db = new mysqli(HOST ,USER ,PASS ,NAME);
if ($db->connect_errno) {
die("Database connection error:" . $db->connect_errno);
}
?>
13. Add the following content in blog.php file.
<?php
include 'database.php';
$posts = [];
$sql = "SELECT * FROM blog order by id desc limit 4";
if($result = $db->query($sql))
{
$i = 0;
while($row = $result->fetch_assoc())
{
$posts[$i]['id'] = $row['id'];
$posts[$i]['type'] = $row['type'];
$posts[$i]['author'] = $row['author'];
$posts[$i]['postdate'] = $row['publishdate'];
$posts[$i]['title'] = $row['title'];
$posts[$i]['detail'] = $row['detail'];
$posts[$i]['view'] = $row['view'];
$i++;
}
echo json_encode($posts);
}
else
{
http_response_code(404);
}
?>
14. Run the following command to create api service for database operations.
> ng generate service api
15. Create a model named post.ts under app/ folder with the following code.
export class Post {
id: number;
type: string;
author: string;
title: string;
detail: string;
postdate: string;
view: number;
}
16. Replace the content of api.service.ts file with the following content.
import { Injectable } from '@angular/core';
import { Post } from './post';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ApiService {
PHP_API_SERVER = "
";
constructor(private httpClient: HttpClient) {}
readPosts(): Observable<Post[]>{
return this.httpClient.get<Post[]>(`${this.PHP_API_SERVER}/blog.php`);
}
}
17. Add the following content in app-routing.module.ts.
import { BlogComponent } from './components/blog/blog.component';
const routes: Routes = [
{ path: 'blog', component: BlogComponent }
];
18. Replace the following content of blog.component.ts with the following content.
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../api.service';
import { Post } from '../../post';
@Component({
selector: 'app-blog',
templateUrl: './blog.component.html',
styleUrls: ['./blog.component.css']
})
export class BlogComponent implements OnInit {
posts: Post[];
selectedPost: Post = { id : null , type: null, author: null, title: null, detail: null, postdate: null, view: null}
constructor(private apiService: ApiService) {
this.apiService.readPosts().subscribe((posts: Post[])=>{
this.posts = posts;
console.log(this.posts);
}) }
ngOnInit() {
}
selectPost(post: Post){
this.selectedPost = post;
}
activatediv(id)
{
for(let i=1; i<=4; i++)
{
let eleid="tab"+i;
document.getElementById(eleid).classList.add("hide");
document.getElementById(eleid).classList.remove("show");
}
let eleid2="tab"+id;
document.getElementById(eleid2).classList.add("show");
}
}
19. Replace the left-side tab content of blog.component.html with the following content.
<li *ngFor="let post of posts; index as i" ><a id="a{{i+1}}" href="#tab{{ i+1 }}" (click)="activatediv(i+1)">{{ post.title }} </a></li>
20. Replace the right-side content of blog.component.html with the following content.
<div *ngFor="let post of posts; index as i">
<div id="tab{{i+1}}" [class.active]="!i" [class.hide]="i">
<img src="assets/img/blog_item_01.jpg" alt="">
<div class="text-content" >
<h4>{{ post.title }}</h4>
<span><a href="#">{{ post.type }}</a> / <a href="#">{{ post.author }}</a> / <a href="#">{{ post.postdate }}</a></span>
<p>{{ post.detail }}</p>
</div>
</div>
</div>
21. Add the following lines in app.module.ts to add HttpClientModule.
import { HttpClientModule } from '@angular/common/http';
Add the following modules in the import section.
HttpClientModule
22. Now, Check the output from the browser.
Hope, this tutorial will help new angular users to start their angular project easily.
***Note: You can follow the video tutorial to complete the steps clearly and successfully.
The steps are shown in the following video link:
You can follow the following link to host any angular project to Apache server.