Skip to content

index.asciidoc

Latest commit

 

History

History
82 lines (62 loc) · 2.78 KB

index.asciidoc

File metadata and controls

82 lines (62 loc) · 2.78 KB

Title of my new tutorial

technology=Angular difficulty=beginner topic=architecture;module asset=devon4ng

## Prerequisites

Basic Angular knowledge

## Learning goals

This tutorial aims to explain concepts and principles of devon4ng architecture by refering an Angular application template. Below are the steps we will go through to understand it clearly.

  • Understand Angular architectural terminology (components and modules)

  • Different layers of an Angular application

  • Different types of modules - feature, core, shared

You will be refering a devon4ng application while going through the theoretical aspects of the tutorial.

By end of this tutorial you will have detailed understanding of principles followed by devon4ng application as well as its structure and architecture.

restoreDevonfwIde(["npm", "ng", "vscode"]) addSetupScript("files/cloneProject.sh", "files/cloneProject.ps1")

displayContent("Overview", [{ "file": "files/overview.md" }])

displayContent("Architectural Layers", [{ "image": "images/architecture-layers.png" }, { "file": "files/layers.md" }])

openFile("devon4ng-application-template/src/app/sampledata/sampledata.module.ts") displayContent("Architectural Layers explained", [{ "file": "files/layers-explained.md" }]) openFile("devon4ng-application-template/src/app/sampledata/services/sampledata.service.ts")

displayContent("Modules", [{ "image": "images/architecture-modules.png" }, { "file": "files/modules.md" }])

displayContent("Core module", [{ "file": "files/core-shared-modules.md" }]) openFile("devon4ng-application-template/src/app/core/core.module.ts")

displayContent("Shared module", [{ "file": "files/core-shared-modules2.md" }]) openFile("devon4ng-application-template/src/app/layout/layout.module.ts")

Conclusion

To conclude, in this tutorial you learned * the concepts of modules and components * the layers of the architecture - components and services * the different types of modules - core, shared and feature

Then we referred a devon4ng application by cloning it and traversing through its files. You can study in more detail about Angular architecture by following [this document](https://devonfw.com/website/pages/docs/master-devon4ng.asciidoc_architecture.html#meta-architecture.asciidoc_devonfw-reference-client-architecture).

The idea with devon4ng is to define an architecture which is a compromise between, on the one hand, leveraging the best practices and latest trends like reactive style development, on the other hand, providing a short onboarding time while still using an architecture that helps us scale and be productive at the same time.