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
.