In this article, we will see how to create basic web applications using Angular.
This is the 3rd article published as part of my 'Let's develop an Angular application' article series.
This article contains beginner level contents and this would be helpful for anyone interested to start learning Angular from scratch.
We will discuss the different Angular features and properties by using them in our application.
In this project, we will see the use of Bootstrap classes to improve our UI.
The project will start from scratch and implement different features step-by-step.
Since we have many Angular articles available already, I am not adding the Angular basics.
You can refer to the below links to learn some basic structure and features of Angular applications.
Let me explain about the project.
Our project name is ‘Ride Your Bike’. This project can be used as a bike rental portal. (Just for learning.)
Our first phase requirement is to create a page like the below screenshot.
In this screen, we will display the list of all bikes available for rent as a tile/box.
On clicking each tile, a detailed view will be visible on the right.
By accomplishing this requirement/ activity, we will get familiar with the following sections,
- Agular project creation
- Creation of component (using command and manual)
- Cross communication between components
- Different types of binding – string interpolation, property binding, event binding
- Bootstrap basics
Please note that , we are going to explain the development of this application through a series of articles.
We will create a new Angular project and will create 3 new components.
Our app would have the structure of the below screenshot:
Let’s create our Angular application.
Open command prompt and change the directory to the location where you want to keep the project files.
Execute the command ng new your-project-name
This may take couple of minutes to create the project.
Once our project has been created successfully, we can open it in any editor for the rest of the work.
I am using the Visual Studio code.
Our project folder structure would look like the below screenshot.
Let’s create the 2 components as ‘bike-list-box’ and ‘bike-details’ using the command ng generate component as below
Open the terminal by either using the Terminal->New Terminal menu or pressing Ctrl + `
The component creation will take a couple of seconds to complete. After the creation, we will get messages in the terminal as in the below screen shot.
Then create the second component, ‘bike-details’.
Here I am using a short syntax to create the component ‘ng g c’ as in the below screen shot.
If we expand the app folder, we can see the newly created component folder and files.
Please refer to the screenshot below.
Open the bike-details.component.ts file .We can see the property ‘selector’ in @Component decorator.
The value of the selector property is used to access the components.
Then, let’s clear the default contents of the app.component.html and add our new component.
Here, we are using the value of the selector property in the @Component decorator of the components.
Save all modified files and let’s run our application to check if it's working.
Run the command ng serve - -open to open our application in the browser.
If everything is correct, we will get the below screen in the browser.
Conclusion
In this article, I have given a short introduction about our Angular application and created an Angular project.
Then created 2 components - one is for listing all bike details and the second one is for displaying the detailed information of the selected bike.
In the next article, we will create a simple model class to store our bike details and see how to access the list of bikes in Angular UI.