Creating a Simple Web Application(Shopping Website) from Scratch [#1] | Angular + Material | Mock-up

Опубликовано: 21 Ноябрь 2024
на канале: Shaheer Shukur

71,327

#web #development #angular #material

Source Code: https://github.com/shaheershukur/Mark...
Complete Playlist: • Web Application Development

Starting with this video, let's create a simple web application from scratch, using Angular, Express and MongoDB. For the front end development, the Angular framework and Material library will be used, and for the back end Express JS and MongoDB will be used.

Cloed Captioning:
Let's create a web application, a simple shopping website.
Typically, a complete web application can be split into 2 parts.

The client side is what the user will be interacting with.
This is also called Front End or the User Interface(UI).
The UI can be created with the Angular Framework.
By using the Material library in Angular, we can create good interface in little time.

The Server side consist of the server which accepts requests from client side and gives back response to client side.
The server can be programmed using web frameworks like Express JS.
The serve will be connected to a database which contains all the data required by the user.
The requested data will be fetched from database and sent as a response to the user.
MongoDB can be used as the database.

Angular and Express are javascript based frameworks.
For developing and running javascript based applications, we need the NodeJS.

This whole set of components can be called the MEAN stack.
M stands for MongoDB
E stands for Express JS
A stands for Angular
N stands for NodeJS

We will create an Angular project in this folder.
Before that, we need NodeJS and Angular framework to be installed in our system.
NodeJS can be downloaded from "nodejs.org".
Once NodeJS is downloaded and installed, go back to VS Code.
Open a new terminal by clicking on 'Terminal', 'New Terminal' from menu options, or by using the shortcut 'Ctrl' + 'Shift' + '`'.
To install Angular, type the command 'npm install -g @angular/cli'
The '-g' option makes sure that angular is installed for system wide usage, and not just for our project folder.
Now Angular is installed in our system.

Let's close the panel for now.
Looking at our project folder, we can see the 'src' folder, inside which we can find the source code of our application.
Inside the 'src' folder, we will find a folder named 'app'.
Inside the 'app' folder, we can find an app routing module, app component, and the app module already created by Angular.
App routing module will be used for navigating the user to different pages/components in our application. We will see it's usage later.
The app component constitutes the CSS, HTML and TS files.
CSS file will be used for styling the component.
HTML file contains the view/interface of the component.
TS file contains all the logic and operations of the component.
The app module file is the main module inside which we declare all the components and import other modules for our project.

Inside the HTML file, we can find the sample code being displayed in browser.
Let's select it all and delete it.
Save the file.
Now our application is clean, as you can see.

For making the development of UI faster, we can use the Angular Material library which contains lot of useful components and theming.
To add Angular Material library to our project, right click on the project folder and select 'Open in Terminal'.
Now type the command 'ng add @angular/material'
When asked to select a theme, we must select 'custom' theme, so that we can create theme with desired color, and also include dark theme.
We will use angular material provided fonts and styles in this project. So press 'y'.
Also we need animations enabled in our project. So press 'y' again.
Now Angular Material library is successfully added to our project.
Let's check it out.

Kill all the open terminals.
Now open the app module file.
Let's add a basic material module into our project for testing.
In the 'imports' section of module, type the material button module 'MatButtonModule'.
Since VS Code couldn't automatically detect it, we will import the module at the top by our self.
Type the import statement at the top.
Now let's open the apps HTML file and add a material button.
First, let's create a basic HTML button with a text saying 'Click Me'.
To convert it into a material button, just add the attribute 'mat-button'.
Save all the edited files.
Open the terminal and type 'ng serve' for a fresh start of application.
Once the app starts running, open the browser and see the result.
Yes, material button is working.
Let's try out few variations of material buttons.
Modify the attribute to 'mat-raised-button', and notice the change.
For better visibility, let's add some margin space around the button.
Now, let's try changing the color of the button.
Material supports the 'color' attribute with values 'primary', 'accent' or 'warn'.
We just have to add the attribute color with desired value.