Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular NestJS

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.

33e8114d7efe95ff134b3ae1eef78a41?s=128

David Würfel

October 15, 2019
Tweet

More Decks by David Würfel

Other Decks in Programming

Transcript

  1. None
  2. None
  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. ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪

  5. None
  6. None
  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
  16. None
  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.“
  21. None
  22. http://localhost:4200/user-profile/angular

  23. None
  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…“
  30. None
  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
  37. None
  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

  41. None
  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>
  48. None
  49. None
  50. ▪ ▪ ▪ ▪ ▪ @Module ▪ > nest g

    module <name>
  51. None
  52. None
  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
  58. None
  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.“
  64. None
  65. ▪ ▪ ▪ ▪ ▪

  66. TestingModule

  67. None
  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.“
  70. None
  71. ▪ ▪ SwaggerModule ▪ ▪ > npm install --save @nestjs/swagger

    swagger-ui-express http://localhost:3000/api
  72. SwaggerModule

  73. POST

  74. GET

  75. None
  76. „Andre, that wouldn't have been necessary. You are so attentive,

    making my wishes come through. Thank you so much!“
  77. ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪ ➢

  78. None
  79. ▪ ▪ ▪ ▪ ▪ ▪ ▪

  80. „We belong together!“

  81. None
  82. Thanks https://github.com/Centigrade/WebDC2019-AngularNestJS https://speakerdeck.com/mrcube42/angular-nestjs

  83. None