andrewjbateman/angular-movie-database

:clipboard: Angular app to create movie database using rxjs and observables

⚡ 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

📄 Table of contents

• ⚡ Angular Movie Database
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • ✉️ Contact

📚 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

. . .

📶 Technologies

• Angular v15
• RxJS Library v7 used to subscribe to the API data observable.
• json-server v0.17.1 used with the db.json file to get a fake API.

💾 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

• Paul Halliday Youtube video: FREE Angular 8 Course - Learn Angular 8, RxJS, HttpClient, Smart/Presentational Components

📁 License

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

✉️ Contact

• Repo created by ABateman, email: [email protected]