Angular CLI project structure 1

this is part 7 of angular CLI tutorial in this video well discuss the angular project structure we already know one of the easiest ways to generate a working angular project is by using the angular CLI tool with this ng new command we generate a working angular project out of the box in no time I've already executed this command and here is the angular project generated by the angular CLI tool as you can see there are several files and folders in this project in this video we'll discuss all these files and folders and their purpose except the source folder and its contents in our next video we'll discuss the source folder and its contents so let's get started with the rest of the files first let's look at this package store Jason so what is packaged for Jason and what does it contain in short this package store Jason file contain the packages to build and run our angular application we can also add our own custom scripts so if we look at this package dot Jason notice there are two sets of packages dependencies and dev dependencies these dependencies are essential for running our angular application whereas these dev dependencies are only required to develop the application which means we don't need these packages on our production servers now all these packages and dependencies and dev dependencies are installed into this node modules folder by the node package manager when npm install' command is executed so in addition to the packages this package to our jason file can also contain custom scripts so if we look at this package store jason file again notice we have script section right here and the start property is pointing to this command ng serve so when we execute NPM start it's actually going to execute this command ng serve and what does ng serve do it builds the application and starts the server now in addition to that if we also want to launch the browser and open our application within that we can modify the start property so instead of just ng serve we can also include this option - - open so what is this command going to do it's not only going to build the application and start the server it's also going to launch the browser and open our application with the net when we execute npm start command so let's quickly verify this let's go back to command prompt change the directory to our angular project and then we want to execute this NPM start command and behind the scenes it's going to execute ng serve - - open because that's what NPM start is pointing to look at that ng serve - - open is being executed there we go built completed the server is running in watch mode we have the browser launched and our application running next we have the node modules folder which we have just discussed the node modules folder is right here and we know that whatever packages we have under dependencies and dev dependencies these packages are installed into this node modules folder so when we expand that we can see all the modules right here next we have e to e folder e to e stands for end to end as the name implies this folder contains end to end tests and their configuration files will discuss end to end test in detail in our upcoming videos dot angular - CL I dot Jason this is the angular CLI configuration file which is right here we discussed the settings in this file in our previous video next we have dot editor config this is the configuration file for visual studio code which is right here as you can see the settings in this file lets us set certain coding style guidelines for example what NN style do you want spaces are tabs what should be the end n size etc we can share this editor configuration file with other developers in our team to maintain consistent coding styles if you want to learn more about this editor configuration please visit this URL right here next we have the dot git ignore file this file contains the files and folders that we do not want to check into source control and file is right here now one of the folders that we definitely don't want to check in the source control is this test folder whenever we build of our angular application the build results are copied into this test folder so we definitely don't want to check that into source control and that's the reason why it is listed in this git ignore file so basically all the files and folders that are listed here are ignored and they are not checked into source control karma or cons dot J s karma is the unit test runner for angular applications as the name implies karma dot conf tortillas is the configuration file for karma and that file is right here just like caramel corn tortillas we have protractor conf dot J's and that file is right here protractor is an end-to-end test framework for angular applications as the name implies protracted corn tortillas is the configuration file for protractor next we have the readme dot MD file as the name implies this is the readme file and if we look at this file within Visual Studio code notice out of the box it contains some commonly used angular CLI commands like ng serve ng generate ng build etc now we can enhance this file to include our own project documentation so if anyone checks out our application they know the commands to use to build on and test our application ts config dot jason TS in the file name stands for typescript as the name implies this is the typescript compiler configuration file and this file contains several typescript compiler settings for example if you want your typescript code to be automatically compiled to JavaScript when we save the typescript file then set this compile on save property to true similarly if you don't want dot map files to be generated then set source map property to false dot map files are useful when debugging our application we don't usually need these my files on a production server so when we do a production build we usually set this property to false finally we've got Tia Slynt dot Jason Bangla has got a built-in linting tool which checks our typescript code for programmatic errors stylistic errors and any non adherence to our coding standards and conventions Tia Slynt dot Jason is the linting configuration file will discuss the settings that we've caught in this file in our upcoming videos when we discuss lending in detail in our next video we'll discuss the source folder and its contents thank you for listening and have a great day

Channel: kudvenkat

Views: 46,046

Keywords: angular 2 app structure, angular 2 app file structure, angular 2 app folder structure, angular 2 application structure, angular 2 application folder structure, angular 2 project structure, angular 2 project file structure, angular 2 project folder structure, angular 4 app structure, angular 4 app folder structure, angular 4 application structure, angular 4 project structure, angular 4 project file structure

Id: 54lvXWA3U-g

Length: 7min 21sec (441 seconds)

Published: Thu Oct 05 2017