Whenever you start learning a new technology, learning about its structure is one of the most important things. Let’s understand the Angular structure with an example:

Start with Creating a new project

Create a new project

Just select a folder where you want to put your project and then open the terminal and write the following command

->ng  new yourAppName

Add routing

After that, you will be asked to add routing or not.in my case, every project that I have worked on required routing so I suggest you add routing

Stylesheet selection

Same as routing now you will be asked to which style-sheet you want to use.select whichever you are familiar with.

• Now it will take a couple of minutes to create the whole structure required for angular projects.
• After the process is done you will be able to see a bunch of files created in your explorer menu.

Explanation of Angular structure

Let’s first Talk about files which you can see in this Screenshot.

editorconfig

editorconfig

You can maintain a consistent coding style for the whole project using editorconfig.assume a scenario where multiple developers are working on the same project with different using Editors so for that editorConfig is used to prevent conflicts in file format

.gitignore

• This file is used to provide instructions on which files you want to ignore while committing your code on git.
• for example: by default, angular take /node module in gitignore file because /node module includes a large number of small files which will reduce efficiency while sharing your code with other developers.

angular.json

• this file is used to provide workspace-wide and project-specific configuration defaults for build and development tools provided by the Angular CLI.
• In simple words, you can set the configuration of your projects from projectVersion to setting project budget (like minWaring at crossing 2mb size of your project)

browserlist

• You can create different loading using browserlist and tsconfig.json.let’s understand it with one example:
• Add this in your .browserlist
  
• browserlist

tsconfig.json:

Compiler option

• This will create two different bundles, one for es5 and the second one for es2015.Here is the difference:
  

Bundles for ES5 and ES2015+ browsers

karmaconf.js

Karma is used to test the workflow of the application.it collects all our testing tools to one place to define the framework we want to use like the specific actions we want to perform, testing different environment, etc

package.json

• It is used to install different open source and other available packages to your project.
• It is used for more than dependencies – like defining project properties, description, author & license information, scripts, etc.
• Package-lock.json will tell you the current version of that package where package.json will tell you the minimum version required of that package

tsconfig.js

• In the current scenario Typescript is the main script file for angular. Typescript is a superset of JavaScript with design-time support for type safety and tooling.
• you can add a TypeScript configuration to tsconfig.json in your project to guide the compiler as it generates JavaScript files.

tslint.json

• tslint is used for static analysis of typescript.
• It is used for code readability, maintainability, and some other function errors.it is also widely supported across modern editors & build systems, it can be customized with your own lint rules, configuration, and formatters

#angular #javascript #web-development #programming #developer