The focus of this application is the display of information from the Angular channel on YouTube using the Angular UI framework and Angular Material components. Application state management is handled by NgRedux.
The application uses the following Angular components and services:
-
MatTable
- the Angular Material component that displays the video data. -
VideoTableDataSource
- a service that provides data for theMatTable
component. This class extends theDataSource
class from the Angular Component Development Kit and obtains video data and metadata using theVideoTableService
. This service also sets up anObservable
loading$ property used for displaying aMatProgressSpinner
component as a data loading indicator. -
VideoTableService
- a service that uses Angular'sHttpClient
to get the video data via an HTTP Get request to the YouTube Data API. Domain model interfaces residing in themodel.ts
file represent the YouTube API HTTP response data containing the video information and metadata encapsulated in theYouTubeApiResponse
interface. This interface contains an array ofVideo
objects which hold the data displayed in the data table. Note that theVideo.description
field is truncated to 150 characters in each data table row to save space. -
MatPagination
- the Angular Material component used to paginate the video data displayed by theMatTable
component. Metadata used by this component is contained in aYouTubeApiResponse
object that populates the appropriate fields in theVideoTableDataSource
service. -
VideoTableComponent
- a custom component that is a container for theMatTable
andMatPagination
components. This component and related services and models are packaged in the Angular moduleVideoTableModule
to promote encapsulation and reusability. -
ErrorHandlerService
- extends the AngularErrorHandler
class to capture application errors and provide logging and a UI alert containing a non-technical message for the user if an error occurs. -
AppRoutingModule
- defines and sets up application routing to theVideoTableComponent
as the app's default path. -
VideoDetailsComponent
- used to display an individual video and its details in a separate page when a row in the video table is clicked. The video is displayed in an IFRAME to allow the user to play the video published on the YouTube site. -
NgRedux
- a third party implementation of the Redux architectural pattern used to manage application state. The redux store is configured inAppModule
to hold state defined in theAppState
interface inredux/root.ts
. The same file holds the reducer implementation (calledrootReducer
). All actions and action creators are located in theredux/actions.ts
file.AppState
holds the currentVideo
object to be displayed on the video details page and a cache of API response objects keyed by pageToken used to prevent duplicate http requests for video table data. Redux action and action creators are defined as TypeScript interfaces to promote type safety.NgRedux
is also configured to run the Redux Dev Tools extensions for Chrome and Firefox when the application is in development mode to aid debugging.
To create and run the application, clone this repository (or unzip the code archive), and invoke npm install
to install the project's dependencies. This and the following npm
commands need to be executed in the project's root folder.
In order to run the application, you need to put a keys.js
file in a project root folder named private
. The file will contain your YouTube Data API key. The code in the file should look like this:
export const secrets = {
apikey: 'YouTube Data API key here'
};
Run npm start
to build the application and start the development server and browse to http://localhost:4200/ to view the application. The app will automatically reload if you change any of the source files.
Execute npm test
to run the unit tests via Karma in watch mode.
Execute npm run code-coverge
to run the unit tests and collect code coverage data. Once the test run is finished an HTML code coverage report can be found in code-coverage/index.html
.
Run npm run e2e
to execute the end-to-end tests via Protractor.
Run npm run build
to build the project for production. The build artifacts will be stored in the dist/
directory.
This project was created with Angular CLI version 1.7.3.
Video details page displaying video after clicking on the second row of the data table
Additional work can be done on the project beyond its original requirements to make it more useful. This includes:
-
If the Home link is clicked on when the user is on a details page, the user should be navigated back to the page containing the row that they clicked on to get to the details page.
-
Implement a feature for filtering data table rows by video title
-
Move the YouTube Data API key into an environmental variable set at the command line.
-
Implement a logging service that connects with a server-side alerting service like Sentry.
-
Create header, footer and navigation components to aid
AppComponent
layout and functionality. -
Use CSS media queries to adapt the layout of the video table (and any new pages) to small screens.
-
Improve styling based on the application owner's design requirements.