I am here with my another tutorial about the structure of Angular 4 application which we have created in our previous tutorial.
The node js command window will compile the application and if successfully compiled the below details will show as:
The above image is showing the created application is compiled successfully and we can run it. Now it's in default port which means localhost: 4200. We can update the port also which we will discuss in my future tutorial. When you run the application in any browser the output will show as,
Now, I am going to describe the structure of the Angular application which we have created.
Explanation about First Angular 4 Application Structure.
As you can see in the above image, I have designed the three images as:
- The first image is showing the Angular 4 application overall structure which Angular CLI is created when we create any new application.
- The second image is showing the src folder details. In src, we have many folder and files as app etc which all are an essential part of our application.
- The third image is showing the app folder and files which are in the app folder.
Now, I am going to define one by one each folder and files which are required with the Angular application.
- e2e
e2e stands for End to End. The basic need of this for an end to end testing as automation testing. I will tell about it my future tutorial.
- node_modules
the node_modules folder contains all the third party library which we will use for development of the Angular application.
- src
The src folder contains our application main folder and files. The actual source code of the application is within the src folder.
- app
The app folder contains the component HTML, typescript file, and spec(for testing) files. At the moment you can see above we have app.component.ts and app.compoent.html file which are the main components of our application. If we create any new component then we will add it here. The app.module.ts files are also available here which is the main file of our application.
- assets
The assets files contains the assets of the application and images, text file and icon etc. The basic purpose of this folder is that we will store static assets of the application.
- environments
We are using the environments folder for configuration setting . We have 2 parts of it,
- environment.prod
Configuration setting for the production environment.
- environment.ts
Configuration settings for development envoronment.
- favicon.ico
We will use this for adding the icon which is displayed in the browser as a favicon.
- index.html
It’s a simple HTML file in which we can add any reference file as script and styles etc.
The index.html is the file in which we will add our main component (app.compoent) HTML with the help of selector.
- main.ts
The main.ts file is the main file which is the start point of our application. As you have read before about the main method the same concepts are here in the Angular application. The main.ts file is the bootstrapping the application by the main module as .bootstrapModule (AppModule). It means Angular loads this module first .
- polyfills.ts
The files includes polyfills for Angular applications for the current browser. We will discuss the details in a later tutorial.
- styles.css
The styles.css is the files which we will use for css of our application. It’s a global style sheet file for a whole application.
- test.ts
This file is used for the setting of a testing environment with the help of karma and jasmine.
- angular-cli.json
It’s a configuration file for our Angular application.
- editorconfig
It’s the file which we will use for settings when developer works in a team then we have to add the same settings . We will discuss the details later.
- gitignore
If you will use GIT repository then you will use it.The basic purpose of it is to manage the source version control.
- karma.conf.js
It’s a configuration file for a testing environment. Karma is the test runner. We will discuss details about it in my later tutorial.
- package.json
It’s a most important file for the Angular application. There are many settings in this file including dependencies and devDependencies.
- dependencies
In this, we will add all the library which need for the production environment.
devDependencies
In this, we will add all the library which need for the development environment.
- protractor.conf.js
It’s the file which is used for running the end to end testing.
- tsconfig.json
In this, there are many setting for Typescript compiler. According to setting the Typescript code to compile into Java script so that browser can understand it .
- tslint.json
In this file, we have to do settings for Typescript code for readability, maintainability and stability.
The above are the details of the structure of the application which we have created.
I hope you liked this -- please share it if you did. My next tutorial will be about the components and component lifecycle hooks.
Bhairab DuttPosted May 2, 2018, 7:16 AM
Thanks a lot ........
Deepak VermaPosted May 2, 2018, 7:05 AM
Nice article sir......... :)
Bhairab DuttPosted May 2, 2018, 1:41 AM
Thanks a lot Sir :)
Khumana RamPosted May 2, 2018, 1:35 AM
Great article and explanation.... Keep it up B.D. sir
Bhairab DuttPosted Apr 26, 2018, 12:24 PM
Thanks a lot for such a nice comment :)
Mahesh VermaPosted Apr 26, 2018, 11:02 AM
Nice explaination sir :-)