h) Angular CLI Commands - mentoring-new-tech/web-development-101 GitHub Wiki

Creating a Component

1 - Create a new folder called "components" in app folder

path = client/src/app/

2 - Navegate to components folder 'path = client/src/app/components' and run ng generate component "componentName" or ng g c "componentName" command

example = ng generate component home or ng g c home

Creating a Service

1 - Create a new folder called "services" in app folder

path = client/src/app/

2 - Navegate to services folder 'path = client/src/app/services' and run ng generate service "serviceName" or ng g s "serviceName" command

example = ng generate service user or ng g s user

Running a Project

1 - Run ng serve -o command inside the project folder

path = client/src/app/

Creating Web Application Components

After to create the components folder in client/src/app/ navegate to this folder using

cd client/src/app/components

Create Home Component

1 - run ng g c home

In a few seconds 4 file will be created

home.component.ts - Controller file of Home component

home.component.spec - Test file of Home component

home.component.html - HTML file of Home component

home.component.css - CSS file of Home component

Create Navbar Component

1 - run ng g c navbar

In a few seconds 4 file will be created

navbar.component.ts - Controller file of Navbar component

navbar.component.spec - Test file of Navbar component

navbar.component.html - HTML file of Navbar component

navbar.component.css - CSS file of Navbar component

Create ListSupplier Component

1 - run ng g c list-supplier

In a few seconds 4 file will be created

list-supplier.component.ts - Controller file of ListSupplier component

list-supplier.component.spec - Test file of ListSupplier component

list-supplier.component.html - HTML file of ListSupplier component

list-supplier.component.css - CSS file of ListSupplier component

Create AddSupplier Component

1 - run ng g c add-supplier

In a few seconds 4 file will be created

add-supplier.component.ts - Controller file of AddSupplier component

add-supplier.component.spec - Test file of AddSupplier component

add-supplier.component.html - HTML file of AddSupplier component

add-supplier.component.css - CSS file of AddSupplier component

Create EditSupplier Component

1 - run ng g c add-supplier

In a few seconds 4 file will be created

edit-supplier.component.ts - Controller file of EditSupplier component

edit-supplier.component.spec - Test file of EditSupplier component

edit-supplier.component.html - HTML file of EditSupplier component

edit-supplier.component.css - CSS file of EditSupplier component

Challenge

Based in the suppliers components creation, create the components of the products.