HTML to Angular Quick Guide

Prerequisites

• Install Node.JS (https://nodejs.org/en/)
• Install Angular CLI (https://angular.io/cli)

Generate the Angular Application

The first step is to generate the angular application. For that, I would use the below command, which generates an application where it has routing and SCSS as my CSS preprocessing language.

ng new my-website --routing --prefix=mw --style=scss

Understanding the Structure

To understand the structure of the website you have to carefully visit all the pages and collect common components, pages etc. For example, have to figure out navigation bars, sidebars, footers, sliders.

Split into components

After understanding the structure of the website, you have to split them out as components. For example:

To generate components you can use the Angular CLI

# Generate a component in the root folder 
ng generate component auth-layout 
# Generate a component in a sub folder 
ng generate component auth-layout/login

Working with Third-Party Libraries & CSS

Adding external CSS in Angular Project

I prefer to convert the website’s CSS files into SCSS and maintain them in a separate folder called SCSS inside the angular application root. And import them into style.scss. Or you can add them inside styles in angular.json.

@import “scss/color”; 
@import “scss/template/abstracts/abstracts”; 
@import “scss/bootstrap-v5.1/bootstrap”; 
@import “scss/color-classes”; 
@import “scss/template/base/base”; 
@import “scss/template/layout/layout”; 
@import “scss/template/components/components”; 
@import “scss/template/pages/pages”; 
@import “scss/animate”;

The second way of Adding external CSS in Angular Project is, Go to your root path of the angular project. Find the fine name as angular.json. Go through the line and find code “styles”: [] and add your CSS path like this.

“styles”: [ 
“src/styles.css”, 
“src/assets/css/bootstrap.min.css”, 
“src/assets/css/style.css”, 
“src/assets/css/colors.css”, 
“src/assets/css/versions.css”, 
“src/assets/css/responsive.css”, 
“src/assets/css/custom.css” 
]

Adding external JavaScript in Angular Project

Go to your root path of the angular project. Find the fine name as angular.json. Go through the line and find code “scripts”: [] and add your JavaScript path like this.

“scripts”: [ 
“node_modules/jquery/dist/jquery.js”, 
“src/assets/js/animate.js”, 
“src/assets/js/custom.js”, 
“src/assets/js/hoverdir.js”, 
“src/assets/js/jquery.prettyPhoto.js”, “src/assets/js/jquery.vide.js”, “src/assets/js/map.js”, “src/assets/js/mapsed.js”, “src/assets/js/modernizer.js”, “src/assets/js/owl.carousel.js”, “src/assets/js/portfolio.js”, “src/assets/js/retina.js”, “src/assets/js/scroll.js” 
]

Example Conversion

HTML Page

After Convert

index.html

app.component.html

home-page.component.html

We’re here to help!

If you have any further questions or want to clarify any existing topics of discussion, feel free to reach out over Email, Chat, or Call. Got a project for us? We’re available 24/7.

+1 ‪(704) 325–9288‬

contact@direct-software-solutions.com

Find us on the web:

Website — Facebook — Instagram — YouTube — LinkedIn — Twitter