Day 13 : Angular directories

In previous blog we learn the installation of angular cli...

Now we are going to learn the configuration files or folder structure in angular...

            We develop application or project in angular workspace. Workspace contains files for multiple projects or we can say that it allows us to organize our big applications into small and multiple projects.

            When we run  > ng new project_name  command , the angular cli install all necessary angular npm packages and dependencies in a root folder project_name with new workspace. By default, ng new creates a simple web application that is ready to run and can be easily modified. 

Workspace configuration files :

• The workspace contains the workspace configuration file where the configuration files act as a root level application and subfolders act as a root level application source and test files.     

1) e2e : 

            An e2e stand for end-to-end test files. It contains source files for end-to-end tests that corresponds to root application.

2) node_modules :

           It provides npm packages to entire workspace. It also shows the dependencies.

3) src : 

          This folder contains the main code/source files related to our application. Files at the top level of src support the testing of application.

4)  .editorconfig :

          This file is used to configure and maintain the consistency in code editors to organize the indentation(extra space) and whitespace.

5) .gitignore :

          It specifies that the Git should ignore some files which are not needed to track. This file is related to the source control of git in application.

6) angular.json :

         It is the  most important file in angular application. It defines the structure of app and configuration options like build, test, and serve. We can also define environment on file(development and production). We can also add bootstrap file here.

7) browserslist :

          This file is used to configure the sharing of browser among the servers. We can also say that it adjusts the CSS to support a various browsers.

8) karma.conf.js :

         This file specifies the configuration file for karma. Karma is the test runner developed by the AngularJS team. It runs the tests for AngularJS and Angular2+.

9) package-lock.json :

         This is the auto-generated file which gets updated whenever the npm does operation on  node_modules. It also provides version information for all packages installed into the node modules by the npm.

10) package.json :

          This is the npm configuration files which includes the application package dependenciesalong with detailed information.

11) README.md :

           It contains the documentation and introduction of the root app.

12) tsconfig.app.json:

           This is the application configuration file for TypeScript. It also has the application-specific TypeScript configuration, including Typescript and Angular compiler options.

13) tsconfig.json :

          This is the TypeScript configuration file.

14) tsconfig.spec.json :

          This is the TypeScript configuration file for application tests.

15) tslint.json :

            This is the application-specific TSLint configuration.

The src file contains the subfolders as below :

1) app :

       It contains the component file which contains application logic and data defined.

2) assets:

       We can say that it is the placeholder for image and other asset files.

3) environments :

       This folder contains the environments configuration. If we run ng build command, it will build application using development environment settings. If we run ng build ?prod command will build the project using production environment setting.

4) favicon.ico :

       This file specifies a small icon that appears next to browser tab of website.

5) index.html :

       The main HTML page that is served when someone visits our application. The CLI automatically adds all JS and CSS files while building an app.

6) main.ts :

       This is the file which runs first. This file bootstraps(starts) AppModule from app.module.ts and it can be used to define global configuration.

7) pollyfills.ts :

       This is used to cover the missing features from given browser. This folder contain set of code and it also provides compatibility support for older browsers. 

8) style.css :

       This is the global css file. This supplies styles for projects.

9) test.ts :

       This is the main test file that the Angular CLI command ng test will use to traverse all the tests within the application and run them.

The src/app file contains subfolders as below:

1) app.component.css :

       This file contains the cascading style sheets code for our application component.

2) app.component.html :

       This is the template file which is used by angular to do thedata binding.

3) app.component.spec.ts :

       This file is used along with other tests. It is run by ng test command.

4) app.component.ts :

       This is the most important typescript file which includes the view logic behind the component.

5) app.module.ts :

       This is the typescript file which includes all dependencies for application. It defines the root module, named AppModule that instruct angular how to assemble application.

We have seen the almost all the files in angular file structure...

For more understanding and queries watch below video:

Angular

Thank You!!!