Skip to content

ng-square/slides

Repository files navigation

Topics

Basic Topics (Small Apps)

  • 00 - Intro
  • speakers
  • 01 - Basic Angular What is that
  • 02 - TypeScript & JS
  • 03 - Setup Node.js & NX & Angular @hirsch88
    • file structure
  • 04 - Design System @hirsch88
  • 05 - Components @yannickholzenkamp
    • templates
    • input / output bindings
    • control flows
    • pipes
    • lifecyle
    • architecure / nested
    • rework tasks
    • ( careful use function and getters )
    • ( use trackBy )
    • ( standalone )
  • 06 - Routing @yannickholzenkamp
  • 07 - DI / Inject-based dependency injection @hirsch88
  • 07 - Injection task & example solution @hirsch88
  • 07 - service @hirsch88
  • 08 - module / standalone @hirsch88
  • 10 - Change Detection Light @hirsch88
  • 11 - observables @hirsch88
  • 11 - task, example solution @hirsch88
  • 12 - signals @hirsch88
  • 12 - task - reuse 11 task with signals & example solution @hirsch88
  • 13 - Ajax Requests @yannickholzenkamp
  • 14 - Debugging (debug, angular dev tools) @yannickholzenkamp
  • Inform participants about requirements (node, npm, proxy, ...) @yannickholzenkamp

Intermediate

  • Routing (done ausser task)
    • lazy loading
    • parameters from route
    • route guards
  • Forms
    • layout
    • validation
  • Translations
  • security
  • baloise deployment (intern)

Advanced Topics (Large Apps & External)

  • Change Detection / performance / best practices
  • State Mgmt
  • Deferrable Views
  • Shared Lib / mono repo
  • architecure clean

Test Topics

  • unit testing
  • e2e testing with cypress
  • component
  • e2e
  • visuals

Slides

This workspace has been generated by Nx, a Smart, fast and extensible build system.

Generate code

If you happen to use Nx plugins, you can leverage code generators that might come with it.

Run nx list to get a list of available plugins and whether they have generators. Then run nx list <plugin-name> to see what generators are available.

Learn more about Nx generators on the docs.

Running tasks

To execute tasks with Nx use the following syntax:

nx <target> <project> <...options>

You can also run multiple targets:

nx run-many -t <target1> <target2>

..or add -p to filter specific projects

nx run-many -t <target1> <target2> -p <proj1> <proj2>

Targets can be defined in the package.json or projects.json. Learn more in the docs.

Want better Editor Integration?

Have a look at the Nx Console extensions. It provides autocomplete support, a UI for exploring and running tasks & generators, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.

Ready to deploy?

Just run nx build demoapp to build the application. The build artifacts will be stored in the dist/ directory, ready to be deployed.

Set up CI!

Nx comes with local caching already built-in (check your nx.json). On CI you might want to go a step further.

Connect with us!