This project is using Angular and Angular Material to build the client-side for a movie application. It complements the server-side (REST API and database). You can see the GitHub repo here.
This application was built to explore the differences of building the client-side with Angular instead of React (see client-side built in React here)
- As a user, I want to be able to access information on movies, directors, and genres so that I can learn more about movies I have watched or am interested in.
- As a user, I want to be able to create a profile, so that I can save data about my favorite movies.
- welcome screen with login form & registration form
- list of all movies (after authentication)
- director dialog, genre dialog, synopsis dialog
- profile with
- data from registration form
- button to update information
- button to delete whole profile
- list of favorite movies (which have been selected from movie list)
This single-page-application provides the following major views - NavBar excluded:
Welcome screen informing about purpose of the app and allowing the user to register and/or login.
Registering for new users (username, password, email, birthday)
log in with a username and password
- List of ALL movies
- allows user to add and remove (toggle) a movie to their list of favorites by clicking a heart icon
- allows user to click on links to see detailed information about the genre, the director and the synopsis of the movie
Clicking on a link in the movie card returns a description of the movie story.
Clicking on a link in the movie card returns a description of the genre.
Clicking on a link in the movie card returns data about the director of the movie (name, bio, birth year, death year)
- Users can update their user info (username, password, email, date of birth)
- Users can delete their profile / deregister
- Display of a list of favorite movies, which were selected by clicking the heart icon in the movie card
The API endpoints are documented with Swagger. To visit the documentation click here.
For the documentation of the client-side I used TypeDoc. To visit the documentation click here.
Clone the project
git clone https://github.com/LisaPMunich/movie-API-ng-clientGo to the project directory
cd movie-API-ng-clientInstall dependencies
npm installStart the server
npm run startI loved the determined clear file structure of the Angular project folder. Also installing the components via the Angular CLI was clean and easy. The template of Angular is much more readable than the React code the AppComponent code does not generate HTML, it only fetches the data from the backend. The biggest difference just looking at the code is that in the Angular version there is a separation of concerns that does not inherently exist in React. One has to implement it oneself.
Since Angular has built-in libraries (e.g. Material Design) and third-party integrations (e.g.API calls and testing) which can be used out of the box, I did not run into as many dependency issues as I did when working with React.
Even though I am very happy with the result of the implementation of the client-side with Angular, I feel the need to take a Udemy course on Angular basics to better understand all the aspects of this framework before implementing the next project in Angular.
At first the deployment did not work. Not the app but the README file was deployed.
"build:gh-pages": "ng build --output-path docs --base-href /movie-API-ng-client/",
"postbuild:gh-pages": "cp docs/index.html docs/404.html && npm run build:docs"
Installation of typedoc was straight-forward running
npm install typedoc --save-dev
Then I defined the typedocOptions in the tsconfig.json file:
"typedocOptions": {
"entryPoints": ["src/main.ts"],
"out": "docs"
}
Problems with this approach:
- When running the build command for the documentation ($ typedoc src/main.ts) everything was generated except for the classes (my components/views) and interfaces directory.
- When deploying the docs to GitHub pages, the documentation kept overwriting my deployment of the application and using the index.html.
Solution:
- The reason was that the default generation of typedoc does not suffice. I had to specify the entryPointStrategy as "expand" in the tsconfig.json file in order to remedy that. Afterwards the typedocOptions looked like this
"typedocOptions": {
"entryPoints": ["src/main.ts"],
"entryPointStrategy": "expand",
"out": "docs"
}
- I had to further adjust the typedocOptions in the package.json and moved the documentation to docs/docu to stop overwriting index.html of the app.
"typedocOptions": {
"entryPoints": ["src/main.ts"],
"entryPointStrategy": "expand",
"out": "docs/docu/"
}
Also, when running the command to generate the documentation, the entry point should be a general "./src"
typedoc --tsconfig tsconfig.json ./src
I documented the build command for docs in the package.json as follows:
"build:docs": "typedoc --tsconfig tsconfig.json ./src"
Click to expand!
This project was generated with Angular CLI version 13.1.2.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.