Repository files navigation

• 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 fromPaul Halliday see👏 Inspiration below. Updated to latest Angular version.
• Note: to open web links in a new window use:ctrl+click on link

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

• 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.

...

• Angular v15
• RxJS Library v7 used tosubscribe to the API dataobservable.
• json-server v0.17.1 used with thedb.json file to get a fake API.

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

• 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"><imgsrc="/assets/movie.png"/></li></ul></ng-template>

• 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: Working.
• To-Do: Add a nav back button on detail page.

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

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

• Repo created byABateman, email:gomezbateman@yahoo.com