th37rose/angular-automation-2022

Learning Angular Automation and How to Think in Modern WebApp Development from End2End

Angular Automation with Github Actions

Angular first time (BigBang)

# install angular cli package
npm install --global @angular/cli

ng 

ng new --help
ng new demoApp  --defaults --minimal --dry-run 
ng new demoApp  --defaults --minimal

cd demoApp

# edit with vscode
code .

npm install --silent

# discovery command
npm run 

# start up command
npm run start

How to Clone first time

git clone <repo> 
cd angular-automation
code .

# Need to install requirements
npm install --silent

# startup and listen on port 1234
npm run start

How to work/edit/run online

• https://stackblitz.com/edit/angular-qna
• https://stackblitz.com/edit/angular-registration-login-form
• https://stackblitz.com/edit/reactive-programmering?file=index.ts
• https://stackblitz.com/edit/angular-autocomplete-validation-form

cheatsheet docs

• cheatsheet

Modules Automation

• kursus module

ng generate module kursus --module=app.module --route="kursus" --routingScope=Child 

Component Automation

ng generate component --help
ng g c weather -d

# CREATE src/app/weather/weather.component.ts (268 bytes)
# UPDATE src/app/app.module.ts (766 bytes)

Pipes Automation

ng generate pipe --help

• https://underscorejs.org/
• https://lodash.com/
• https://date-fns.org/

Service Automation

ng generate service --help

Powershell Automation (Test)

# show your tester how to call PowerShell functions and how to start the app

function container-kill-all {
   docker container rm $(docker container ls -aq) -f
   docker image rm $(docker image ls -aq) -f  
}
function angular-automation-run{
  container-kill-all
  docker container run -d -p 2222:80/tcp jalalhejazi/angular-automation-2022:latest
  chrome http://localhost:2222/
}

angular-automation-run

DevOps Automation

• When Deployment is automated, then 95% of your time goes to development and research
• No waste time on Humans conflicts
• No more "It works on my machine"