A single page application where people can view existing products available on the site and also can add products. Admin can update and delete existing products.
We also have an option to clear the search field by clicking on the Clear button.
Tools Required:
I used AngularJS framework for developing a single page application. Also used Angular material UI component framework to design this application. The following tools and packages must be used in order to accomplish this project:
- Visual Studio Code - Text editor.
- AngularJS, Angular Material
- HTML5, CSS
- JSON
- Node.js
- Firebase
Classifieds single page application:
As you can see in the above application we have few classifieds, used some static data to populate the website. Angular material was used to design this application. When we click on the contact button it will display all the details related to the person who posted the classified
and when we click on the Details button it will display the details of the product.An admin also has functionalities like editing and deleting a classified.so when we click on the Admin button we get two options such as Edit and Delete. We can click on the close button in order to hide these two options.
CRUD Operations:
We can also perform CRUD operations i.e. creating, adding, updating and deleting a classified.
1. Adding new classifieds:
In the above image we can see a new classifieds button which when clicked will display a side navigation bar where we can add a new classified. After filling in the details we can click on the save button and the new classified will appear at the bottom of the application.
2.Updating existing classified:
As we saw earlier an Admin can edit or delete a particular classified. so when an admin clicks on the edit button a side navigation bar will be displayed on the application where the Admin can edit the classified.
and as soon as the admin clicks on the save edit button a notification pops up showing that the classified has been saved
3. Deleting a classified:
An admin can also delete an existing classified by clicking on the delete button and the classified gets deleted from the application.
Angular Filters:
Angular filters provides a nice way for users to drill down for exactly what they are looking for and data updates in real time. When we click on Filters button the toolbar two search icons are displayed. we can manually type the item we are looking for.
Or we can select the category button which is like a drop-down menu and displays all the different categories in the application.
We also have an option to clear the search field by clicking on the Clear button.
UI Routing:
AngularJS provides a routing API, this API lets us get individual routes within out URL bar for various spots within our application.
For example: localhost:8080/#/classifieds/edit
The above URL lets us have direct access to the edit option in the classifieds page instead of going to the classifieds page and then selecting the edit option.
Firebase:
Now a user can perform the CRUD operations but lets say i tried adding a new classified after adding i refresh the page and i loose my data. Firebase (a relational database) allows us to persist all classified listings in the database and allows us to access them easily within the application.
Comments
Post a Comment