Design a site like this with WordPress.com
Get started

Angular JS Application Configuration Files

Angular JS project is having multiple files in it.In this post we will understand their types and importance of them.

First look at project structure in below image then will see all files in detail

In Above image there are two types of files

  • Workspace configuration files
  • Application project files

These files is having different kind of purpose to help angular js application to run ,compile and test successfully

Application configuration files


Once workspace can have multiple projects in it but all will have application configuration files which will be used to maintain that application.

There are three types of application configuration files

Source Files

assets/
environments/
favicon.ico
index.html
main.ts
polyfills.ts
styles.sass
test.ts
app/

Configuration

browserslist
karma.conf.js
tsconfig.app.json
tsconfig.spec.json
tslint.json

End-to-end test

•app.e2e-spec.ts •app.po.ts •protractor.conf.js •tsconfig.json

Below are application configuration files

Source Files

assets/

This folder holds details about image and other asset files


environments/

This folder having list of all files related to environment ,by default one dev and one prod environment related file will be created by default.


favicon.ico

This file holds all details about an icon to use for this application in the bookmark bar


index.html

This is starting point of all angular js aplication by default


main.ts

This is entry point for your angular application which holds details about bootstrapping module to start application.


polyfills.ts

This file will help for running angularjs application in different browsers.This will have pollyfill scripts which will be used by browsers.


styles.sass

This file holds details about lists of CSS files that supply styles for a project.



test.ts

This is entry point like main.ts but its getting used for testing angularjs application.


app/

This folder having all component,service,directive,routing and pipes in it specific to application. by default AppComponent will get created by angularjs while creating project. Once project is created you can add your components ,directives or services according to your need.


Configuration Files

browserslist

This file is used by the build system to adjust CSS and JS output to support the specified browsers


karma.conf.js

This is used for angularjs testing application .Angularjs using karma as framework for testing and using jasmine as framework.


tsconfig.app.json and tsconfig.spec.json

This file hold TypeScript configuration details which will helpful to run typescript project and follow all standards ,it also specifies the root files and the compiler options required to compile the project.

For more details please refer : https://www.typescriptlang.org/docs/handbook/tsconfig-json.html


tslint.json

This files holds all linting details which will he used by ng lint command to check format.This can be used to analyse typescript code if it is as per standard or not.

For more details please refer:https://palantir.github.io/tslint/


End-to-end test

app.e2e-spec.ts

This file is running end to end test for application


app.po.ts

This is default pojo getting created for end to end to test by angularjs


protractor.conf.js

This file holds configuration for protractor which helps to test your application end to end.

This file is having all details about ur,framework which is getting used by protractor and location about test case..etc


tsconfig.json

This file hold TypeScript configuration details which will helpful to run typescript project and follow all standards ,it also specifies the root files and the compiler options required to compile the project.

For more details please refer : https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

All these files are getting used to manage configuration of entire application.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: