MyFlix Angular is a Movie Catalog App to catalog Movies and store data on the Movies, Directors, Actors, Genres, and the Users who wish to view the data. It was built using Angular and is connected to a backend database. It also uses Angular Material for styling.
This project uses an API built by Doug Hill ([email protected]), hosted here: https://stix2you-myflix-5cbcd3c20372.herokuapp.com/
Further information and documentation related to this API and database can be found here: https://github.com/stix2you/myFlix_api
Git Repo for the client-side Angular project here: https://github.com/stix2you/myFlix-Angular-client
-
Download repo from above URL and install in a directory.
-
In terminal windown within that directory:
-
Set up Node to lateset stable version
nvm install 16.19.0 (or whatever is latest stable version) nvm use 16.19.0
-
Install Angular Angular CLI version 17.3.6
npm install -g @angular/cli
-
Install Angular Material [documentation here: https://material.angular.io/]
ng add @angular/material
-
Navigate to directory you want to place the project in
-
Clone this repository https://github.com/stix2you/myFlix-Angular-client
-
Install project dependencies (see full list below):
npm install
-
To start Dev server for mobile devices, enter:
npm start (this runs a script to launch a dev server on port 8080, which is accepted by the CORS of the database)
Add angular-cli-ghpages: ng add angular-cli-ghpages.
Build command: ng deploy --base-href=/myFlix-Angular-client/
Dependencies can be viewed in the package.json file, all dependencies can be installed by running: npm install from the command line
@angular/animations: ^17.3.0,
@angular/cdk: ^17.3.8,
@angular/common: ^17.3.0,
@angular/compiler: ^17.3.0,
@angular/core: ^17.3.0,
@angular/forms: ^17.3.0,
@angular/material: ^17.3.8,
@angular/platform-browser: ^17.3.0,
@angular/platform-browser-dynamic: ^17.3.0,
@angular/router: ^17.3.0,
rxjs: ~7.8.0,
tslib: ^2.3.0,
zone.js: ~0.14.3
@angular-devkit/build-angular: ^17.3.6,
@angular/cli: ^17.3.6,
@angular/compiler-cli: ^17.3.0,
@types/jasmine: ~5.1.0,
jasmine-core: ~5.1.0,
karma: ~6.4.0,
karma-chrome-launcher: ~3.2.0,
karma-coverage: ~2.2.0,
karma-jasmine: ~5.1.0,
karma-jasmine-html-reporter: ~2.1.0,
typescript: ~5.4.2
This project was generated with Angular CLI version 17.3.6.
To set up this project, install Angular globally on your machine: $ npm install -g @angular/cli
Then clone this repository into a project directory, go to that directory, and install dependencies: $ npm install
Run npm start which will run a script: ng serve --port 8080 for a dev server. Navigate to http://localhost:8080/. The application 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.