Menu
I am an Angular 1 developer that is starting to learn about Angular 2. There are a lot of different types of folder structure methods depending on the training material. I am going to list each one below and I would love to get people's opinions on which I should use and why. Also, if there is a method that is not listed but you feel that it works better, please feel free to list it as well.
By looking at all of these, method #3 is pretty much how I was doing my Angular 1 apps.
Method 1: angular2-quickstart
Source: https://angular.io/guide/quickstart
Folder Structure:
Method 2: ng-book2
Source: https://www.ng-book.com/2/ (have to pay to see the files)
Folder Structure:
Method 3: mgechev/angular2-seed
Source: https://github.com/mgechev/angular2-seed
Folder Structure:
997
Folder for each Angular Module. The Angular uses the concept of Angular Modules to group together the related features. This gives us a nice starting point to organize the folder structure. Each Module should get its own folder named after the Module Name. The Angular does not make any distinction between the Modules.
The shared module contains classes and resources which are used in more than one dynamically loaded module. By always loading with the application the shared components are ready whenever a module requests them. The shared module is a good place to import and export the FormsModule and the ReactiveFormsModule .
Vetter Skylabs Pre-sale Starts 21 Aug! The folder structure of the angular application is the fundamental concepts of angular. Every application has at least one ‘module” and one “components” of your angular application. In the asset folder, we can store static assets of our application for example images, icons, and so many things.
Angular 9, Angular 10, Angular 11, Angular 12 The Angular uses the concept of Angular Modules to group together the related features. This gives us a nice starting point to organize the folder structure.
As you can see, by default it creates one component (app.component.ts) and one module (app.module.ts) and an angular application should have at least one component and one module. Along with these two files, there are also so many other files like HTML, CSS, Sass, routing modules.
You don't typically need to edit this file. New Angular projects use strict mode by default. If this is not desired you can opt-out when creating the project. For more information, see Strict mode. Inside the src/ folder, the app/ folder contains your project's logic and data.
The official guideline is there now. mgechev/angular2-seed had alignment with it too. see #857.
https://angular.io/guide/styleguide#overall-structural-guidelines
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
