Skip to content

📋 Angular app to create movie database using rxjs and observables

License

Notifications You must be signed in to change notification settings

AndrewJBateman/angular-movie-database

Repository files navigation

⚡ Angular Movie Database

  • App using Angular to create a movie database. The home screen displays a list of movie images. Each image redirects to a movie detail page with movie details listed using data-binding.
  • Tutorial code from Paul Halliday see 👏 Inspiration below. Updated to latest Angular version.
  • Note: to open web links in a new window use: ctrl+click on link

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

📄 Table of contents

📚 General info

  • App routing module to load movie home screen. Differential loading used with 2nd routing module.
  • Movie-routing module for: list of movies (MovieListComponent), form to add movie (AddMovieComponent) and a movie detail page (MovieDetailComponent).
  • Dummy backend used to store json movie data.

📷 Screenshots

Example screenshot. Example screenshot. Example screenshot.

📶 Technologies

💾 Setup

  • Install dependencies using npm i then run ng serve for a dev server. No API key required.
  • Navigate to http://localhost:4200/. The app does automatically reload if you change any of the source files.
  • Open a second terminal and run npm run api for a local JSON server. Navigate to http://localhost:3000/. The json file will update if a movie is added from the front-end 'add movie' page.

💻 Code Examples

  • movie-list.component.html extract showing HTML to load movies asynchronously with a loading image until they are shown.
<!--if there are movies then show them in the DOM using Angular async pipe-->
<ul *ngIf="movies$ | async as movies; else loading" [@listAnimation]="movies">
  <li *ngFor="let movie of movies">
    <a [routerLink]="movie.id">
      <img [src]="movie.image" />
    </a>
  </li>
</ul>

<ng-template #loading>
  <ul [@listAnimation]="loadingMovies.length">
    <li
      *ngFor="let movie of loadingMovies"
      [@listAnimation]="loadingMovies.length"
    >
      <img src="/assets/movie.png" />
    </li>
  </ul>
</ng-template>

🆒 Features

  • Angular Reactive Forms (model-driven forms) are used instead of the html template-driven method.
  • BrowserAnimations used to add some animation to the movie details loading.
  • Working backend on port 3000 was very easy to setup and run.

📋 Status & To-Do List

  • Status: Working.
  • To-Do: Add a nav back button on detail page.

👏 Inspiration

📁 License

  • This project is licensed under the terms of the MIT license.

✉️ Contact