We will understand the file and folder structure of angular.
Important file and folder for beginners👇
1 Package.json
2 Node_modules
3 Src folder
-> app
-> assets
-> environments
-> index.html
-> main.js
-> style.css
For Advance use
-> package-lock.json
-> angular.json
-> tsconfig files
-> .browserslistrc
-> karma.config.js
-> polyfills.ts
Package.json
What is Package.json?
Once you create new Angular application, you will see package.json file among the newly created files and folders. package.json file locates in project root and contains information about your web application. The main purpose of the file comes from its name package, so it'll contain the information about npm packages installed for the project.
Scripts
This section describes Node scripts you can run in your application. As the code sample uses Angular CLI, all scripts are calling it.
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
You can put any cmd command in the script and you will be able to run it with npm. To run the script, just run it in command line from project location:
> npm start
Dependencies
The list of packages installed as dependencies for this project are required at runtime.
"dependencies": {
"@angular/animations": "^14.0.0",
"@angular/common": "^14.0.0",
"@angular/compiler": "^14.0.0",
"@angular/core": "^14.0.0",
"@angular/forms": "^14.0.0",
"@angular/platform-browser": "^14.0.0",
"@angular/platform-browser-dynamic": "^14.0.0",
"@angular/router": "^14.0.0",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
Development Dependencies
The list of packages that are required only for development. This packages are installed only on developer's machine and will not be run for production build.
"devDependencies": {
"@angular-devkit/build-angular": "^14.0.6",
"@angular/cli": "~14.0.6",
"@angular/compiler-cli": "^14.0.0",
"@types/jasmine": "~4.0.0",
"jasmine-core": "~4.1.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.7.2"
}
Node_modules
Node_modules:- All library are there.
Src folder
Components: It is pice of code that can be used. Example: App,
Src folder contains the main code files related to our application. It contains all the business logic code. We can say that our application's 99% of the code is done under the Src folder.
OR
This is the source folder of our angular application. That means this is the place where we need to put all our application source code. So, every component, service class, modules, everything we need to put in this folder only. Whenever we create an angular project, by default the angular framework creates lots of files folder within the src folder which is shown in the below image.
As you can see src folder contains many subfolders and files. Let us discuss the use and need of each subfolder and files which are present inside the src folder.
app :- This folder contains the files needed to create the UI of an application. It contains HTML, CSS, Module & Routing file.
Contains the component files in which your app logic and data are defined.
assets:-This folder contains all the static files of your application like images, fonts, etc. that are used in your application. and Extra image store the assets.
environments:This folder is basically used to set up different environments. Here, you can find two files as shown in the below image.
You can use this file to store environment (either production or development environment) specific configuration such as the database credentials or server IP addresses. These two files are as follows:
1.environment.prod.ts. This file for the production environment
2.environment.ts. This file for the development environment.
favicon.ico: It is the icon file that displays on the browser.
index.html: Index.html is our main HTML file which contains our Angular application. It didn't contain any reference of CSS or javascript file in it. All references will dynamically insert into this page.
main.ts: Main.ts file is used to tell angular to start our application. It initializes the platform(browser) on which our application runs.
style.css: Style.css is used to add global styling in our application. Also, each component has its own styling but the style.css file will override this component level styling.
test.ts:Test.ts: file is used to initialize the testing environment in our application.
0 Comments