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