In our last session we created a project now let's see what files and folders we have in this new project.
The first folder we have in our project hello-world is -
(See the screens of package.json here😊)
e2e :- you just expand it and you will see a bunch files there. e2e which stands for end to end and this is where we write end to end tests for our application. If you have not worked with e2e tests let me tell you that these are basically automated tests that simulate a real user, so we can write code to launch our browser, navigate to the homepage of our application, click a links, fill out a form, click a button and then assert that there is something on a page, this is an example of e2e tests, it comes in picture when you learn angular well, so just for now dont w😊rry about it.
node_modules - so below e2e we have node_modules and this is where you store all the third party libraries that our application may depend upon. keep in mind that this folder is purely for development so when we compile our application, parts of these third party libraries are put in a bundle and deployed with our application. So we are not going to deploy this node_modules folder to a server, we gonna see this later.
src - below the node_modules we have the source folder, and this is where we have the actual source code of our application. So under src we have
- app folder and inside this folder we have a module and a component so every application have atleast one module and one component, you get familier to this component and module very s😀😀n. Below that we have the
- assets folder where we store the static assets of our application, like if you have an image file, any text file, any icons all of these goes here. Below that we have
- environments folder, this is where we store configruation settings for different environments. So here we have one file for production environment and the other for development environment. Now the other files we have in the source folder are
- favicon :- icon displayed in the browser
- index.html :- here is very simple html file which contains our angular application, so note that we don't have any references to a script or a stylesheet, these references will be dynamically inserted into this page as i will show you later down the road🤓. Now below that we have
- main file which is typescript file and as usual in any programming language, this is basically a starting point of our application. as we know a lot of programming languages we have the concept of main method which is the starting point of the program, here we have the same concept in our angular applications, so we always doing here
"bootstraping the main module" of our aoplication. Here in this case AppModule (see the main.ts file) so angular loads this module and everything else starts from there. Below main we have
- polyfills file which basically imports some scripts that are required for running angular because the angular framework uses features of javascript that are not available in the current version of javascript supported by most browsers out there. So this polyfill fill the gap between the features of javascript that angular needs and the features supported by the current browsers. Below that we have
- styles.css here we can add global styles for our application and also each page or each component can have it's own styles as you will see in ulcoming articles. Below that we have
- test file which is basically used for setting up our testing environment.
Now outside the src folder we have
.angular-cli.json - this is a configruation file for angular CLI, it is pre-standard cinfigruation we don't have to worry about this for most of the part
.editorconfig - if you are working in team environment you make sure that all developers in the team use the same settings in their editors, so this is where you store your settings.
.gitignore - we have the gitignore file which is basically for excluding certain files and folders from your git repository. If you have not worked with git don't worry it's not something that you need to know in order to build applications with angular it's basically a tool for managing and versioning your source code.
karma.conf.js - which is configruation file for karma which is a test runner for javascript code. Agian we are not gonna w🤔rry about running tests at this stage😊
package.json - we have an important file package.json, this is a standard file that every node project has, apart from a bunch of basic settings, here like the name and the version of your application, we have the settings here like "dependencies" - which determines the libraries that your application is dependent upon( see package.json) so here we can see we have nine references to angular libraries all these libraries starts with @angular and after that the name of the library so the first library we have here "@angular/animations": "^4.0.0"
If you are not using animations in your application we can delete this library. So in the future as we use third-party libraries we will see them list of here under the dependencies. Now below that we also have another setting called "devDependencies" under this we have the libraries that we need in order to develop this application. So we don't need these to run our application on a production server, these are purely for a developer machine. Let's see in devDependencies so here we have a reference to "@angular/cli": "1.6.6" which you are already familier with we also have few other references to karma (a test runner for .js code) below this package.json we have
protractor.conf.js - which is basically a tool for running end to end tests for angular.
tsconfig.json - which having a bunch of settings for your typescript compiler. So your typescript compiler looks at these settings and based on these settings it is going to compile your typescript code into javascript that browsers can understands. For most of the part you don't have to change any of this here just be aware that if in the future in a complex project you need to change your typescript compiler settings this is where you need to apply your changes. And finally we have
tslint.json - which includes a number of settings for tslint. In case you dont know tslint this is a static analysis tool for typescript code so it checks your typescript code for readability, maintainability and functionality errors. So this is the basic structure of an angular project😊
"If at first you don’t succeed, call it version 1.0."
_😊
The first folder we have in our project hello-world is -
(See the screens of package.json here😊)
 |
| package.json |
e2e :- you just expand it and you will see a bunch files there. e2e which stands for end to end and this is where we write end to end tests for our application. If you have not worked with e2e tests let me tell you that these are basically automated tests that simulate a real user, so we can write code to launch our browser, navigate to the homepage of our application, click a links, fill out a form, click a button and then assert that there is something on a page, this is an example of e2e tests, it comes in picture when you learn angular well, so just for now dont w😊rry about it.
node_modules - so below e2e we have node_modules and this is where you store all the third party libraries that our application may depend upon. keep in mind that this folder is purely for development so when we compile our application, parts of these third party libraries are put in a bundle and deployed with our application. So we are not going to deploy this node_modules folder to a server, we gonna see this later.
src - below the node_modules we have the source folder, and this is where we have the actual source code of our application. So under src we have
- app folder and inside this folder we have a module and a component so every application have atleast one module and one component, you get familier to this component and module very s😀😀n. Below that we have the
- assets folder where we store the static assets of our application, like if you have an image file, any text file, any icons all of these goes here. Below that we have
- environments folder, this is where we store configruation settings for different environments. So here we have one file for production environment and the other for development environment. Now the other files we have in the source folder are
- favicon :- icon displayed in the browser
- index.html :- here is very simple html file which contains our angular application, so note that we don't have any references to a script or a stylesheet, these references will be dynamically inserted into this page as i will show you later down the road🤓. Now below that we have
- main file which is typescript file and as usual in any programming language, this is basically a starting point of our application. as we know a lot of programming languages we have the concept of main method which is the starting point of the program, here we have the same concept in our angular applications, so we always doing here
"bootstraping the main module" of our aoplication. Here in this case AppModule (see the main.ts file) so angular loads this module and everything else starts from there. Below main we have
- polyfills file which basically imports some scripts that are required for running angular because the angular framework uses features of javascript that are not available in the current version of javascript supported by most browsers out there. So this polyfill fill the gap between the features of javascript that angular needs and the features supported by the current browsers. Below that we have
- styles.css here we can add global styles for our application and also each page or each component can have it's own styles as you will see in ulcoming articles. Below that we have
- test file which is basically used for setting up our testing environment.
Now outside the src folder we have
.angular-cli.json - this is a configruation file for angular CLI, it is pre-standard cinfigruation we don't have to worry about this for most of the part
.editorconfig - if you are working in team environment you make sure that all developers in the team use the same settings in their editors, so this is where you store your settings.
.gitignore - we have the gitignore file which is basically for excluding certain files and folders from your git repository. If you have not worked with git don't worry it's not something that you need to know in order to build applications with angular it's basically a tool for managing and versioning your source code.
karma.conf.js - which is configruation file for karma which is a test runner for javascript code. Agian we are not gonna w🤔rry about running tests at this stage😊
package.json - we have an important file package.json, this is a standard file that every node project has, apart from a bunch of basic settings, here like the name and the version of your application, we have the settings here like "dependencies" - which determines the libraries that your application is dependent upon( see package.json) so here we can see we have nine references to angular libraries all these libraries starts with @angular and after that the name of the library so the first library we have here "@angular/animations": "^4.0.0"
If you are not using animations in your application we can delete this library. So in the future as we use third-party libraries we will see them list of here under the dependencies. Now below that we also have another setting called "devDependencies" under this we have the libraries that we need in order to develop this application. So we don't need these to run our application on a production server, these are purely for a developer machine. Let's see in devDependencies so here we have a reference to "@angular/cli": "1.6.6" which you are already familier with we also have few other references to karma (a test runner for .js code) below this package.json we have
protractor.conf.js - which is basically a tool for running end to end tests for angular.
tsconfig.json - which having a bunch of settings for your typescript compiler. So your typescript compiler looks at these settings and based on these settings it is going to compile your typescript code into javascript that browsers can understands. For most of the part you don't have to change any of this here just be aware that if in the future in a complex project you need to change your typescript compiler settings this is where you need to apply your changes. And finally we have
tslint.json - which includes a number of settings for tslint. In case you dont know tslint this is a static analysis tool for typescript code so it checks your typescript code for readability, maintainability and functionality errors. So this is the basic structure of an angular project😊
"If at first you don’t succeed, call it version 1.0."
_😊
Comments
Post a Comment