Angular2: Speech IMDB using Angular2, Typescript, Web API and ASP.NET MVC

Standard

Speech based Search Movie Web App using Angular2, TypeScript, BING API, ASP.NET MVC, Web API & Web Speech API

This web application assist you to search movies and seasons through voice. Just say any keyword from movie and season name and then command by saying term search to look from millions of record rapidly.

Project Website

Project Code


Dashboard

This is the homepage of application and displays latest Hollywood news at the moment. BING API has been used over here to retrieve latest Hollywood news.

screenshot_1


Manual Search

Just for the ease, manual search has been provided with parameter likes searching content name, year, content type(movie, series, episode). Please note year and type are optional.

screenshot_2


Voice Search

Awesome part starts from here, you may say any thing to search for movie, series and episode. You will also able to see on runtime in message box and console window what keyword your have voiced out to search.

screenshot_8

screenshot_9

screenshot_10

screenshot_11


Movie List Page

This page shows list of all movies, series and episode relevant to your search keyword, pagination has been implemented in case of large returned data set along with sorting functionality. Thumbnail associated with each record will help you to quickly pick your content.

screenshot_6


Movie Detail Page

This page shows full detail of user selected movie/series/episode. It displays unique url to checkout content’s reviews on IMDB , content’s rating, votes and full fledged poster.

screenshot_7

Bing Search Using Angular Material and Angular UI Bootstrap

Standard

Using Angular Material, Angular UI Bootstrap, ASP.NET WebAPI and Bing API in implementing Bing clone SPA

Angular Material Directive used

Angular UI Bootstrap Directive used

  1. App Directory Structure

1

2. Module Directory Structure

2

3. Logical Module Division

3

4. App Config contains routing info and App Run contains startup logic

4

5. Lazy Loading for search page

  • bing.search module will not be loaded on page load, it will be loaded once user searched any keyword, this is done by resolving promises during route change.

5

6. Controller Structure

  • JS closure using IIFE
  • Controller As implementation to avoid $scope var every time in code
  • Named function for controller
  • Function declarations to abstract underline detail
  • Bindable members upfront at the top
  • DI using $inject to overcome issues during bundling and minification.
  • Wrapping members in init() method for controller activation promises.

6

7. Service Structure

  • Function declarations to abstract underline detail
  • Accessible members upfront at the top
  • Singleton object
  • SRP

7

8. Directive Structure

  • DOM manipulation using directive
  • Controller As and Controller activation promises
  • Restrict of directive to Element and Attribute only
  • Usage of shared and isolated scope (two way and behavioral binding)
  • Accessible members upfront & Function declarations to hide detail
  • SRP

8

9. Shared Services Structure – Example 1

  • This will be shared service which will be consumed by all modules for executing CRUD operation, Request Type, URL, Parameter Object will be passed to this shared service, so it will make code more maintainable readble and scaleble. If we dont go through this method then we have to use $http.get() or $http.post method very where in services files of each module, content negotiation issues can be simply handled over here, If you want to append anything with each URL like ‘Http:\bing\’ then instead of copy it on every service file just hardcode this thing in this file and append URL from thier respective services. We dont need to mention protocol and hostname now in every URL request. It also handles http communication exceptions globally.

9

10. Shared Services Structure – Example 2

  • Below service is used to store value of search text and selected text throughout application using angular factory.

10

11. WebAPI Structure

  • Weather transaction is for images, web, news or composite search, every http call will hit Get function first, and then on basis of mode it will redirect to actual BING api call. We can change underline structure anytime for image, news, web & composite search (for instance we can use google search api), but for client, service contract will be same as GET function is acting as facade here.

11

12. Credentials are stored in web.config and accessed through static class

12

13. Introduction of Template in HTML Structure for SPA

13

14. WebPage Snapshot

  • HomePage

15

  • Autocomplete

14

  • Main Search Page

16

  • Web Search Page

17

  • News Search Page

18

  • Images Search Page

19

  • Notification: In case of communication error message and vertical loader is spinning

21

  • Notification: If search button is pressed without any keyword

20