In this exciting video, I and Juan embark on a journey to collaborate on creating an Angular app using Node.JS on StackBlitz. Our adventure starts as we begin our Node.JS project using StackBlitz so we can use the Angular CLI. This is just the beginning and we have many more plans to grow this app in the future.
As we delve into the project, we start by installing the necessary dependencies through
npm install, including the RxJS Reactive Extension Library. Then, we add the Angular Material to make the app look sleek and stylish. We double-check to ensure we have everything we need and then start discussing the app structure.
We delete the temporary test component and generate a module, renaming it as necessary. We then generate a component for the nav and add it to the app.component.html. After starting the app with
ng serve, we add some minimal styling for testing and refine it as necessary. We then import the Angular Material Components in the app.module.ts and experiment with different Material UI components such as the menu and nested menu.
Adding custom styling in the nav.component.scss, we then plan on adding a logo and aligning the nav bar. We even address the question of how to add images to a StackBlitz project, discovering there is more than one way.
The final step of our journey is to connect the StackBlitz project to our GitHub repository. We create a second branch and push changes to GitHub, enjoying the convenience of StackBlitz where commits and pushes happen simultaneously. And finally, we tackle the issue of adding images to the project, marking the end of our collaboration on this Angular app with Node.JS on StackBlitz.
npm install- installing node package manager - all the dependencies
npm install @angular/cli- installing the Angular CLI (-g is usually omitted in web-based IDEs)
ng add @angular/material- adding Angular Material
ng g m module-name- generating a Module
ng g c component-name- generating a Component
ng sereve- running the app - compiling