Angular Project Structure

Hello everyone, in my previous article we created a simple angular application HelloAngular using Angular CLI, in this article, we will discuss Angular Project Structure. Once the application was set up for us by Angular CLI, we have seen there are many files generated (please see the attached screenshot below). Let’s discuss some of the necessary files and its purpose in this article so that it will be helpful for all if we want some behavioral changes in our application.

Angular Project Structure

In package.json we can see project name, version, scripts, dependencies, and devDependencies. Dependencies and devDependencies contain packages that are required to build our application. Packages under devDependencies are required only when we are developing our application and they are not required on our production server, while packages under dependencies are required during development as well as on production server to successfully run our application.

{
"name": "hello-angular",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "~1.7.0",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}

When we created our application all these packages under dependencies and depDependencies are installed under node_modules folder. So node_modules folder contains all the necessary packages that are required to develop and run our application. In our later article, we will show you how to install and add new packages in our application.

package.json also contains a scripts section. This scripts section contains npm command function that will trigger the command that is specified under its value. For example

 npm start 

will trigger

ng serve

command that will build and run our application.

.angular-cli.json Angular CLI use this configuration file to work on. This file contains many settings. Angular CLI uses these settings when we generate components, services, pipes, etc. also when building our application and during testing.

“root”: “src”

Root specifies that src is the root location where we will be working and put our files.

“outDir”: “dist”

This is the output directory where our compiled files will be fallen when our angular application will be built for the staging or production release.

“assets”: [“assets”, “favicon.ico”]

When we build our application the values that are defined in the array properties (assets, favicon.ico) will be copied over to the assets folder under dist folder. We use assets folder under src to keep images, files that are being used in our application.

“index”: “index.html”

This property indicates that index.html is the main HTML or home page of our application.

“main” : “main.ts”

All application have the main entry point that will be hit first when our application will run. main.ts file is the main entry point of our angular application. This will bootstrap our AppModule.

“prefix”: “app”

This indicates the selector prefix that will be applied to our generated component. If we open our app.component.ts file we will note that selector properties app-root having app prefix. Similar can be seen in other component typescript file. We can change this with the following command.

ng new HelloAngular –prefix proj
ng g c student --prefix std

 

“styles”:[“styles.css”]

Contains the CSS file that will be used in our entire application. Note that the style option is CSS, we can use LESS or SCSS instead. To do that when we are creating our application or generating our component using angular CLI we will specify styles choice in the CLI command. For example:

ng new HelloAngular --style less
ng new HelloAngular --style scss
ng generate component --style less

.
Do note that while creating a new angular application the style option that we define will be used as default style option whenever we add a new component using ng command without –style keyword.

Let’s now move to the src folder. src folder contains application source code i.e, components, pipes, services, styles, images, etc. Outside of the src folder are just to support the application during development.

Under src, assets folder is where we place our application assets like images.

Environments folder contain two typescript file environment.ts and environment.prod.ts. environment.ts is for the development environment and environment.prod.ts is for the production environment. If we look into this file we can see clearly that production property is set to false while in other it’s true. Environment file mapped under .angular-cli.json file. we will get about this file when we will discuss building, bundling and deploying on a server in upcoming articles.

Index.html and main.ts are already discussed in the .angular-cli.json file.

Under app folder, we have our root component and their related ts, html, css, spec.ts file. app.component.ts contains the typescript component class, app.component.html contains the view template, app.component.css contains the styles for that component and app.component.spec.ts file contains the unit test and App.module.ts is the root application module.

There are many other files which will be discussed in our upcoming articles where we will build a real world application. At the moment this may not seems to be clear but when we will be building a real world application and put our fingers in this files, it will be more clear.

Share Knowledge

About Pankaj Kumar Singh

Learn, Share and Discuss.
This entry was posted in ANGULAR and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *