In this article, We will learn about Angular Cli 9 from creating an e-commerce website from scratch.
Angular free Udemy courses:Download Udemy Courses free
First, ensure Node.js, npm, visual studio Code( my favorite code editor ) and Angular CLI installed on your computer.
Next check whether your visual studio PowerShell( Terminal ) is recognizing or detecting the ng commands. If not, don’t worry check this link and follow the steps to install perfect.
- Create a new angular e-commerce project
Go to Visual Studio Code, Open the folder you want to create a project. My path is D:\helperscript_content\angular_project_helperscript> . Go to the path in PowerShell( Terminal ) in visual studio code, and type ng new ecommerceAngular as below.
D:\helperscript_content\angular_project_helperscript> ng new ecommerceAngular
Note: ecommerceAngular is a project name by default.
It will ask to create routing and which style technology to use our project. We also create routing in this e-commerce project and for styling I prepare CSS. so give yes as a command and enter.
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
Angular projects take several times to create and install the needed packages. So Please be patient.
After packages are installed, let’s check the angular project is compile and run properly by the command in the terminal
Let’s start creating components.
Go to the project folder in Powershell (Terminal) and create a component by using this short command‘ ng g c header
ng => define angular
g => generate
C => component
header => name of the component
D:\helperscript_content\angular_project_helperscript\ecommerceAngular> ng g c header
Note: Naming conversion of an angular project for the component.
If we give the name of the component in camelCase it should split the component name by hyphen(-).
ng g c firstHeader , Now the component name will change to first-header
Now check the folder ecommerce_angualr/app/src into the project folder. The header component was created with four files called header.component.html, header.component.css, header.component.ts, and header.component.spec.ts
header.component.html => our HTML code here.
header.component.css => our CSS code here.
header.component.ts => typescript code here for header component.
header.component.spec.ts => this file for the testing purpose.(optional file)
Next, go to app.component.html in the app folder and remove all the default code then add the below code.
Ecommerce website Home page content
Then go to the project folder in terminal or PowerShell type ng serve
After it compiled successfully. Go to the browser type in the url http://localhost:4200
If port number 4200 used by another application, then run by defining port using –port
ng serve –port 3000