AngularJsProjectStructure

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

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.

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

Workspace configuration files

Below are workspace configuration files

.editorconfig

This file holds details used by editor which helps to maintain consistent coding styles across different editors and developers

.gitignore

This file having list of all files and folder which needs to be excluded from angularjs project while checking in to repostitory

README.md

This file is acting as document for angular js applicaiton which will have alld etails about application and its usability.

angular.json

This file holds all configuration details to angular js application whcih will help to run different commands like build,run ..etc

package.json

This is having all below details

scripts
Dependencies use for application
Application basic details
Dev dependencies which is used for development only.

package-lock.json

This holds details about version information for all packages installed into node_modules

src/

This folder is having all application source which will get compiled and run.

node_modules/

This folder holds all dependencies related to your application.When you run npm install all dependencies will get downloaded to this folder.

tsconfig.json

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/