Angular Folder Structure
Understanding Angular folder structure
Introduction
Before getting started check if you have installed node, npm and angular in your machine by running those commands.Here is a link of getting started with Angular.
Common terminologies in Angular
A workspace contains the files for one or more projects. ng new command creates a workspace, it creates an initial skeleton application at the root level of the workspace.
A project is the set of files that comprise a standalone application or a shareable library.
Thesrc/ subfolder of the workspace contains source files.
Workspace configuration files
.editorconfig contains the configuration for code editors.
.gitignore this file specifies intentionally untracked files that git should ignore.
README.md Introductory documentation for the root application.You can add information on the project you are working on for future reference or to help others who will need to work in your code.
angular.json it contains the CLI configuration defaults for all projects in the workspace, including configuration options for build, serve etc.
package.json it configures npm package dependencies that are available to all projects in the workspace.
package-lock.json it provides version information for all packages installed into node_modules by the npm client.
src/ this is the source files for the root-level application project.
node_modules/ it provides npm packages to the entire workspace. Workspace-wide node_modules dependencies are visible to all projects.
tsconfig.json the base TypeScript configuration for projects in the workspace.
tslint.json the default TSLint configuration for projects in the workspace.
Application project files
After creating a workspace, which contains the files above, we use the ng generate command on the command line to add functionality and data to the application.
Application source files
app/it contains the component files in which your application logic and data are defined.
assets/ it contains image and other asset files to be copied as-is when you build your application.
environments/ it contains build configuration options for particular target environments.
favicon.ico an icon to use for this application in the bookmark bar.
index.html the main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don't need to add any <script> or <link> tags here manually.
main.ts the main entry point for your application. Compiles the application with the JIT compiler and bootstraps the application’s root module (AppModule) to run in the browser.
polyfills.ts it provides polyfill scripts for browser support.
styles.sass lists CSS files that supply styles for a project. The extension reflects the style pre-processor you have configured for the project.
test.ts the main entry point for your unit tests, with some Angular-specific configuration. You don’t typically need to edit this file.
Application Folder
Inside the src/ folder, the app/ folder contains your project's logic and data. Angular components, templates, and styles go here.
app/app.component.ts it defines the logic for the application's root component, named AppComponent.
app/app.component.htmlit defines the HTML template associated with the root AppComponent.
app/app.component.css it defines the base CSS stylesheet for the root AppComponent.
app/app.component.spec.ts it defines a unit test for the root AppComponent.
app/app.module.ts it defines the root module, named AppModule, that tells Angular how to assemble the application.
Source: Angular documentation
Happy Coding!!!!!!!!!!!!!!!!!!!
