Scribd
Upload
33 views

Food Blog Application

Uploaded by

SRISTI MALLA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views

Food Blog Application

Uploaded by

SRISTI MALLA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

FOOD BLOG APPLICATION IN ANGULAR

-Sristi Malla ([email protected])

Github link for the project : https://github.com/Sristi-Malla/Blog-Project

Project objective
Build an Angular app where users can read and add blog posts.

Background of the problem statement


You are a web developer at a company that provides web solutions. The company was approached
by a client to build a food blog app where users can read, write, edit, or delete new and existing
posts. During sprint planning, you agree to lead this project and develop the frontend using Angular.
The backend developers have agreed to provide you with the required APIs to perform CRUD
operations on the data. The tasks you are responsible for include:

● Designing the app in Angular


● Creating routes for navigation between Angular pages and components
● Creating service for accessing REST API
● Setting up a JSON server for testing until backend APIs are ready
● Testing the application
●
The following tools are used
● Angular: To build the application
● NgModules: To configure the injector and the compiler and organize related components
● JSON Server: To build a placeholder backend for app development and testing
● Angular Router: To navigate within the app using URL links
● Jasmine/Karma: To test the application

Following requirements are met


● The app should be responsive.
● The app should have functionalities for users to create, view, update, and delete posts.
The app should have a contact form, a header, and a nav component.
View Posts on the Homepage:

View Post and Perform Operations like Publish/ Update and delete:

Add Functionality:
Search Functionality

Tasks Responsible:

1. Designing the app in Angular


– The App component is a container with router-outlet. It has navbar that links to routes paths
via routerLink.
– BlogsList component gets and displays blog posts.
– BlogDetails component has form for editing blog’s details based on :id.
– AddBlog component has form for submission of new blog post.
– These Components call BlogService methods which use Angular HttpClient to make HTTP
requests and receive responses.
blog.model.ts exports the main class model:Blog.
– There are 3 components: blog-list, blog-details, add-blog.
– blog.service has methods for sending HTTP requests to the Apis.
– app-routing.module.ts defines routes for each component.
– app component contains router view and navigation bar.
– app.module.ts declares Angular components and import necessary modules.
– style.css contains import for Bootstrap file.
Setting up app.module.ts
Adding Navbar and Router view to the App component since it is the root container of our blog
application.
Defining Model class : Our main model class Blog will be exported in blog.model.ts with 4
fields:

Creating angular components

1. Blog-list Component

This component calls 3 BlogService methods:


● getAll()
● deleteAll()
● findByTitle()
Blog-list.component.html
2. Blog-Details Component

This component handles 2 things:


– display the current selected Blog post (from BlogsList) if viewMode is true
– display the form (with action buttons) for blog details if viewMode is false
For getting data,updating and deleting the post, this component will use 3 BlogService methods:
● get()
● update()
● delete()
Blog-details.component.ts
Blog-details.component.html
3. Add new Item Component
This component has a Form to submit new blog post with 2 fields: title & description. It calls
BlogService.create() method.
add-blog.component.ts
Add-blog.component.html
2. Creating routes for navigation between Angular pages and components

There are 3 main routes:


– /blogs for blogs-list component
– /blogs/:id for blog-details component
– /add for add-blog component
3.Creating service for accessing REST API

blog.service has methods for sending HTTP requests to the Apis.


4.Setting up a JSON server for testing until backend APIs are ready
5.Testing the application

You might also like