Angular 2 News Application
Budget: ₹600 – ₹1,500 INR
Components
The app has following components:
AppComponent: Main Component
HeaderComponent: Display the logo
SectionsComponent: Display different sections of news
NavbarComponent: Display sub-sections of news
NewsComponent: Will fetch the complete list of news and send to NewsItemComponent
NewsItemComponent: Display each news item
SectionsComponent
Subscribe and fetch the list of sections from store
Loop through the array and display each section name as routerLink
It should change the url as /section/sectionName
NavbarComponent
Display Subsections
Get the list of news from the store
Multiple news might be categorized in one subsection. Filter list of unique subsections from the list and display in the navbar
Filter News
When a user clicks on subsection, dispatch action and send the subsection name as a parameter to store
This action will update the filter variable in store
NewsComponent
Send the name of the selected section to Service and get the list of news.
Send this list of news to update store
Now subscribe store to get the news list and send it to NewsItemComponent
NewsItemComponent
Get news item from NewsComponent and display it
Show image and caption when clicked on "Read More"
Services
NewsService
The Service will have a function called getSectionNews().
This function will fetch news list of the selected section, from the NY Times API.
API url:
url = 'https://api.nytimes.com/svc/topstories/v2/' + sectionName + '.json?api-key=315a5a51483b469a918246dc2753b339'
Actions
Action
Implement the following two actions:
LOAD_SECTION_NEWS: Will be dispatched when the user wants to load a new section.
FILTER_SUBSECTION: Will be dispatched when one of the news sub-section is clicked.
Reducers
Reducer: Sections
Implement LOAD_SECTIONS action
When this action is dispatched, the reducer will return the state having list of sections.
Reducer: News
This reducer will implement two actions:
LOAD_SECTION_NEWS: This will load news from selected section to newsList in store.
FILTER_SUBSECTION: Sets the value of filter in store
Selector
This will get the news list and filter from the reducer
Return a new list of news, based on the selected subsection
GitHub URL for the source code - https://github.com/dheepthy23052009/angular-news-app
The app has following components:
AppComponent: Main Component
HeaderComponent: Display the logo
SectionsComponent: Display different sections of news
NavbarComponent: Display sub-sections of news
NewsComponent: Will fetch the complete list of news and send to NewsItemComponent
NewsItemComponent: Display each news item
SectionsComponent
Subscribe and fetch the list of sections from store
Loop through the array and display each section name as routerLink
It should change the url as /section/sectionName
NavbarComponent
Display Subsections
Get the list of news from the store
Multiple news might be categorized in one subsection. Filter list of unique subsections from the list and display in the navbar
Filter News
When a user clicks on subsection, dispatch action and send the subsection name as a parameter to store
This action will update the filter variable in store
NewsComponent
Send the name of the selected section to Service and get the list of news.
Send this list of news to update store
Now subscribe store to get the news list and send it to NewsItemComponent
NewsItemComponent
Get news item from NewsComponent and display it
Show image and caption when clicked on "Read More"
Services
NewsService
The Service will have a function called getSectionNews().
This function will fetch news list of the selected section, from the NY Times API.
API url:
url = 'https://api.nytimes.com/svc/topstories/v2/' + sectionName + '.json?api-key=315a5a51483b469a918246dc2753b339'
Actions
Action
Implement the following two actions:
LOAD_SECTION_NEWS: Will be dispatched when the user wants to load a new section.
FILTER_SUBSECTION: Will be dispatched when one of the news sub-section is clicked.
Reducers
Reducer: Sections
Implement LOAD_SECTIONS action
When this action is dispatched, the reducer will return the state having list of sections.
Reducer: News
This reducer will implement two actions:
LOAD_SECTION_NEWS: This will load news from selected section to newsList in store.
FILTER_SUBSECTION: Sets the value of filter in store
Selector
This will get the news list and filter from the reducer
Return a new list of news, based on the selected subsection
GitHub URL for the source code - https://github.com/dheepthy23052009/angular-news-app