• Youtube: Angular Crash Course
• Youtube: Angular application in Docker - Traversy Media Angular Crash Course into Docker Environment
• Docs: https://angular.io/docs

npm install -g @angular/cli

ng new angular-crash

yarn start

Then go to localhost:4200

yarn server

ng generate component components/header
ng generate component components/button
ng generate component components/tasks
ng generate component components/task-item
ng generate component components/add-task

ng generate service services/task
ng generate service services/ui

# Local Server (not for production)
npm install json-server
# In Package Script add
# "server": "json-server --watch db.json"
# After started the server, can try http://localhost:5000/tasks

• https://github.com/FortAwesome/angular-fontawesome

ng add @fortawesome/angular-fontawesome

Add HttpClientModule and FormsModule. E.g: In app.module.ts add following:

import { FormsModule } from '@angular/forms';

 imports: [
    :
    :
    FormsModule,
  ],

[] are for input; () are for output; [()] are for bi-directional data binding.

Add RouterModule and Routes in app.module.ts

import { RouterModule, Routes } from '@angular/router';
:
:
const appRoutes: Routes = [
  {path: '', component: TasksComponent },
  {path: 'about', component: AboutComponent },
  {path: 'footer', component: FooterComponent }
];
:
:
RouterModule.forRoot(appRoutes, {enableTracing: true}),

In app.component.html, add <router-outlet></router-outlet> instead of <app-tasks></app-tasks>

In about.component.html, add <a routerLink="/">Go Back</a>

1. Create environment files under src

2. In task.service.ts, use environment.domain instead.

3. In angular.json, update the configurations and serve section correspondingly.

4. Update package.json scripts.

For frontend:

docker run --rm -p 4200:4200 $(docker build -q -f Dockerfile.dev .)

For backend, go to json-server dir:

docker run --rm -p 5000:5000 $(docker build -q .)

OR

docker-compose up -d

And then go to http://localhost:4200

In nginx.conf, the following block redirects all /tasks traffic to http://json-backend:5000

 location /tasks {
   proxy_pass http://json-backend:5000;
 }

docker-compose -f docker-compose-prod.yaml up -d --build 

Try:

• delete task
• toggle task
• add task