This project was generated with Angular CLI version 13.2.0. This projects consists of a Tasks App from Angular Crash Course - Traversy Media - 2h1m.
The complete documentation for this project can be found here: Study Notes from Angular Crash Course - Traversy Media.
Contents:
Run npm install
. Make sure you have Node.js installed (at least version 14/15/16).
npm install
Install Angular Command Line (Angular CLI) globally if it is not already installed (you can check by running ng --version
).
npm install -g @angular/cli
> ng --version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ â–³ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 13.2.0
Node: 14.16.0
Package Manager: npm 6.14.11
OS: win32 x64
Angular: 13.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1302.0
@angular-devkit/build-angular 13.2.0
@angular-devkit/core 13.2.0
@angular-devkit/schematics 13.2.0
@schematics/angular 13.2.0
rxjs 7.5.2
typescript 4.5.5
Run ng serve --open
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
ng serve --open
This app is using a dummy pre-made back-end service (REST API), namely JSON Server npm - a full fake REST API with zero coding in less than 30 seconds.
Run in CMD Prompt: npm run server
. Now we will have our Angular Front-End App on http://localhost:4200/, and Mock REST API Back-end on http://localhost:5000/ (where we can make GET/POST/PUT/DELETE requests just like on a real server made with Django/Express.js/Node.js/Spring-Java/etc).
npm run server
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 as a static Application (independent from the Development Environment that is ran by ng server --open
). 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.
If you don't want to install Node.js and Angular on your machine, you can run this Application (both front-end app on port 4200 AND back-end JSON Server on port 5000) with Docker.
🔵 Note: The Dockerfile
files were configured to run this App in Development mode (the Angular App will NOT be built and ran as production app in Docker). Therefore, expect the Docker images to be both over 1GB in size (due to npm modules).
- Clone this repo
git clone https://github.com/radualexandrub/angular-crash-course-traversy angular-app
cd angular-app
- Build (and run as containers) the front-end and back-end images via
docker-compose.yml
file (based onDockerfile
for front-end andDockerfile.json_server
for back-end) withdocker compose up
command
docker-compose up
# or -d to supress logs (Detached mode: Run containers in the background)
docker-compose up -d
-
Open the front-end app (on http://localhost:4200/) and the back-end JSON server (on http://localhost:5000/)
-
Play with the app (you can follow the app's logs with
docker-compose logs -f
) -
Stop and remove both Docker containers
docker-compose down
- Remove both built Docker images
# View images and their IDs
docker images -a
# Remove both images by their IDs
docker rmi <angular_appImageID>
docker rmi <json_serverImageID>
- Show Docker disk usage
docker system df
- (Optional) Remove all Docker data (including Images, Containers, Local Volumes and Build Cache)
docker system prune
Copyright (c) 2022 Radu-Alexandru Bulai
Released under MIT License.