Structure of Angular Projects

Mosh Hamedani
A free video tutorial from Mosh Hamedani
Passionate Software Engineer and Best-selling Author
4.5 instructor rating • 20 courses • 479,534 students

Learn more from the full course

Angular Crash Course for Busy Developers

Have limited time to learn Angular 4 (Angular 2+)? Take this course and learn Angular in 10 hours!

10:17:00 of on-demand video • Updated April 2018

  • Master the essential Angular concepts
  • Troubleshoot common runtime errors
  • Write cleaner, more maintainable code
English Alright, now let's see what files and folders we have in this new project. So the first folder we have here is 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 end to end tests, 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 few links here and there, fill out a form, click a button, and then assert that there is something on the page. This is an example of an end to end test. Now, that's beyond this course, so we don't have to worry about it yet. Below that we have node_modules. And this is where we store all the third party libraries that our application may depend upon. Now this folder is purely for development, so when we compile our application, parts of this third party libraries are put in a bundle and deployed with our application. So we're not going to deploy this node_modules folder to a server. You're going to see this later in the course. Below that, we have the src folder. And this is where we have the actual source code of our application. So we have this app folder here, and inside this folder here, we have a module and a component, so every application has at least one module and one component. You're going to get familiar with these components and modules. very soon. Below that, we have this assets folder, where we store the static assets of our application. So, if we have any image files, any text files, any icons, all of these, go here. Below that, we have this environments folder. And this is where we store configuration settings, for different environments. So we have one file for the production environment, and the other, for the development environment. Now, the other files we have in the src folder are favorite icon which is the icon displayed in the browser, we have index .html which is a very simple html file that contains our Angular application, so note that here we don't have any references to a script or a style sheet. These references will be dynamically inserted into this page, as I will show you later in this course. Now below that, we have this main file which is a TypeScript file, and this is basically the starting point of our application. So in a lot of programming languages, we have the concept of the main method, which is the starting point of a program. We have the same concept in our Angular applications, so all we are doing here is boot strapping the main module of our application, which is in this case AppModule, so Angular loads this module and everything else starts from there. We have this 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 these polyfills 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, and this is where we add global styles for our application. And also each page or each component can have its own styles as you will see later in the course. Below that we have test.ts which is basically used for setting up our testing environment. Again, for now, we don't have to worry about this. Outside the src folder, you have a configuration folder for Angular cli its pretty standard configuration, you don't have to worry about this for the most part, below that we have editorconfig, so if you're working in a team environment, you want to make sure that all developers in the team use the same settings in their editors. So this is where you store the settings. You have this 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. Now below that we have karma .config.js, which is a configuration file for karma which is a test runner for JavaScript code Again, we're not going to worry about running tests at this stage. Now below that we have an imported 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 version of your application, we have this setting here, dependencies, which determines the libraries your application is dependent opon So here you can see we have nine references to Angular libraries, all these libraries, start with @angular, and after that we have the name of the library. So the first library here is for animations, if you're not going to use animations in your application you can delete this here. So in the future, as we use third party libraries, you will see them listed here under the dependencies. Now, below that we also have another setting or another key called devdependencies. And these are 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. So here we have a reference to angular/cli which we are all familiar with. We also have a few other references to karma, which is a again a test runner for JavaScript code. Now below this package that json we have protractor.config.js, which is basically a tool for running end to end tests, for Angular. Again, we're not going to worry about it, and another file here is tsconfig, which has a bunch of settings for your typescript compiler. So your TypeScript compiler looks at these settings and based on these settings is going to compile your TypeScript code into JavaScript that browsers can understand. Again, for the most part, you don't have to change any of these here. Just be aware that in the future, in a complex project, you need to change your TypeScript complier settings, this is where you need to apply your changes. And finally, we have tslint.json, which includes a number of settings for ts links. In case you don't know, tslint is a static analysis tool for TimeScript code. So it checks your TypeScript code for readability, maintainability, and functionality errors. So this is the basic structure of an Angular project.