Angular NestJS

All-the-way: Angular ❤️ NestJS

You love Angular, TypeScript, and you are fluent in building client apps? At some point, you may need to write server-side APIs. As it is natural to use the same language in the backend as in the frontend, you are likely to choose Node.js. However, when using libraries like Express or even plain Node you are often leaving known territory lacking good idioms and structural patterns.

Have you ever heard of NestJS? It is a framework to build efficient, reliable and scalable server-side applications. What is remarkable about it is that it uses similar concepts as Angular. You can organize your code into modules. It works with dependency injection of services into controllers (which are in a way your components for API routes) and even has a CLI to get you started quickly.

We will investigate what a project structure with an Angular front- and NestJS backend could look like, we proceed to implement our first API routes and we finally conclude testing them. Since it is so easy, we will also generate a nice API documentation on-the-go and will take a peek at helpful, already built-in plugins. In the end, you should be ready to develop your full stack web application using a marriage of Angular and NestJS.

Transcript

3. h DATA VISUALS v LOGIK q USER RESEARCH w INSPECTION e TESTING t NAVIGATION z INTERAKTION r MODELLING a GAMIFICATION s VISIONt1 d SCREENS f ICONS g ANIMATION j 3D k ASSETS l PROTOTYPING ö FLOWS ä STYLEGUIDES y LOOK & FEELS x MARKUP c ARCHITEKTUR AgAHDAoDBAA
4. ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪
7. „Hey! My name is Andre Gular. I am looking for a companion. Someone who is similar to me and for whom my hobbies are fine.“
8. http://localhost:4200/companions
9. http://localhost:4200/companions
10. http://localhost:4200/companion/express
11. http://localhost:4200/companion/express
12. http://localhost:4200/companion/express HTTP POST
13. http://localhost:3000/companions [ { "id":"express", "name":"Eliza Xopress", "markdownName":"*E*liza *X*o*press*", "avatar":"robotrabbit" }, { "id":"vanilla-node", "name":"Vanilla Nodesto", "markdownName":"*Vanilla Node*sto", "avatar":"deer" }, { "id":"adonisjs", "name":"Adones Johnson", "markdownName":"*Adonis J*ohn*s*on", "avatar":"otter"
14. http://localhost:3000/companions/express { "id":"express", "name":"Eliza Xopress", "markdownName":"*E*liza *X*o*press*", "avatar":"robotrabbit", "characteristics":[ "quite a fast runner", "little structure in life", "somewhat popular", "a tad messy" ], "favoriteColor":"#88E1F8" }
15. ▪ ▪ ▪ tsc init ts-node ▪ ▪ ▪ ▪ .gitignore ▪ ▪ > npm install express --save > npm install @types/express --save-dev
17. ▪ ▪ ▪ ▪ ▪ ▪ ▪ ➢
18. „I said hello to Eliza Xopress. We met a couple of times, but I think I can‘t handle her. She is kinda messy and has little structure in her life.“
19. „I‘ve met with Andre Gular. I've done my best to make us understand each other. However he couldn't handle my loose lifestyle.“
20. „I think I need to start over. I will update my profile details again. I need to find a good match.“
22. http://localhost:4200/user-profile/angular
24. ▪ CompanionService getAll() getDetails (id: string)
25. ▪ CompanionService UserService DialogService imports: […]
26. ▪ ▪ ▪ ▪ ▪ ▪ ➢
27. http://localhost:4200/companions
28. http://localhost:4200/companions
29. „Oh my! What is this? A new companion has arrived. Looks interesting…“
31. „A progressive Node.js framework for building efficient, reliable and scalable server-side applications.“
32. ▪ ▪ ▪ ▪ ▪
33. ▪ ▪
34. ▪ ▪
35. ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪
36. Service ▪ @Component ▪ @Injectable ▪ @NgModule ▪ @Controller ▪ @Injectable ▪ @Module
38. ▪ ▪ ▪ ▪ ▪
39. ▪ ▪ ▪ > npm install –g @nestjs/cli > nest new <project-name> > cd <project-name> > nest start --watch http://localhost:3000 Hello World!
40. main.ts
42. http://localhost:3000/companions [ { "id":"express", "name":"Eliza Xopress", "markdownName":"*E*liza *X*o*press*", "avatar":"robotrabbit" }, { "id":"vanilla-node", "name":"Vanilla Nodesto", "markdownName":"*Vanilla Node*sto", "avatar":"deer" }, { "id":"adonisjs", "name":"Adones Johnson", "markdownName":"*Adonis J*ohn*s*on", "avatar":"otter" http://localhost:3000/companions/express { "id":"express", "name":"Eliza Xopress", "markdownName":"*E*liza *X*o*press*", "avatar":"robotrabbit", "characteristics":[ "quite a fast runner", "little structure in life", "somewhat popular", "a tad messy" ], "favoriteColor":"#88E1F8" } > curl -d ‘{ “myId”: …, “contactId”: … }’ http://localhost:3000/contact http://localhost:3000/companions/:id
43. ▪ ▪ @Controller ▪ ▪ /companions ▪ /contact ▪ ▪ > nest g controller <path>/<name>
44. GET
45. POST
46. ▪ ▪ @Header ▪ @HttpCode ▪ @Redirect ▪ ▪ @Get(‘favo*rites‘) ▪ ▪ ▪
47. ▪ ▪ ▪ ▪ @Injectable ▪ ▪ > nest g service <path>/<name>
50. ▪ ▪ ▪ ▪ ▪ @Module ▪ > nest g module <name>
53. ▪ ▪ ▪ ▪ ▪ ▪ ▪ @Global
54. http://localhost:4200/companion/nestjs
55. „I‘ve met with Andre Gular. He is a really nice guy. Our interests coincide to a large extent.“
56. „Meeting Nesta Jason was a real breeze. We have so much in common. However we still have some things to clear up.“
57. ▪ ▪ ▪ ▪ ▪ ▪ @interfaces/ ▪ > nest start --watch --webpack
59. „We‘re talking on the same wavelength. Seems to good to be true. I am still unsure whether Nesta is herself and doesn‘t pretend to be someone else.“
60. „Dear Andre, trust me. I am real and I will show you my true self.“
61. ▪ ▪ ▪ @nestjs/TypeORM ▪ @nestjs/mongoose ▪ ▪ > npm install --save @nestjs/mongoose mongoose
62. MongooseModule
63. „Nesta is awesome and a true match! I am so happy, I would even go so far to secure our friendship through some kind of contract.“
65. ▪ ▪ ▪ ▪ ▪
66. TestingModule
68. „I am sure that we can deal well with our mistakes and that our friendship will last for a long time.“
69. „I want to thank Nesta for being such a good friend with something special.“
71. ▪ ▪ SwaggerModule ▪ ▪ > npm install --save @nestjs/swagger swagger-ui-express http://localhost:3000/api
72. SwaggerModule
73. POST
74. GET
76. „Andre, that wouldn't have been necessary. You are so attentive, making my wishes come through. Thank you so much!“
77. ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ➢
79. ▪ ▪ ▪ ▪ ▪ ▪ ▪
80. „We belong together!“
82. Thanks https://github.com/Centigrade/WebDC2019-AngularNestJS https://speakerdeck.com/mrcube42/angular-nestjs