1 00:00:00,050 --> 00:00:05,810 In this lecture, we're going to review the starter files generated by the angular CLI. 2 00:00:05,840 --> 00:00:08,950 The CLI downloads dozens of files. 3 00:00:08,960 --> 00:00:11,810 It can be overwhelming deciding where to start. 4 00:00:11,840 --> 00:00:17,690 Therefore, I think a tour around the application will give us a good idea of where to start. 5 00:00:17,720 --> 00:00:20,540 This review won't be super comprehensive. 6 00:00:20,570 --> 00:00:24,320 It'll give you a general idea of what each file does. 7 00:00:24,350 --> 00:00:25,510 Let's begin. 8 00:00:25,520 --> 00:00:28,010 We're going to start with the root files. 9 00:00:28,040 --> 00:00:32,210 The editor config file is a configuration file for editors. 10 00:00:32,210 --> 00:00:33,800 That can be surprising. 11 00:00:33,800 --> 00:00:37,250 Why would we need a file for configuring a text editor? 12 00:00:37,250 --> 00:00:38,660 It's for teams. 13 00:00:38,660 --> 00:00:43,610 If you're working on a team, chances are everyone will be using a different editor. 14 00:00:43,640 --> 00:00:47,090 Their editors may be configured differently than yours. 15 00:00:47,090 --> 00:00:52,250 This difference in configuration can lead to formatting issues during commitments. 16 00:00:52,250 --> 00:00:56,870 Most editors can detect the editor config file if present. 17 00:00:56,900 --> 00:01:03,360 The configuration options in this file will override the current settings of the editor, thus saving 18 00:01:03,360 --> 00:01:06,720 us time from manually making the changes ourselves. 19 00:01:06,720 --> 00:01:12,700 In addition, it's a great way to keep formatting consistent across multiple editors. 20 00:01:12,720 --> 00:01:18,920 At the top of the file there's a link to the documentation for various configuration options. 21 00:01:18,930 --> 00:01:24,600 If you're using Visual Studio code, the editor config plugin is not supported. 22 00:01:24,600 --> 00:01:27,270 You need to install a separate extension. 23 00:01:27,270 --> 00:01:31,230 Check out this link to download the extension for this course. 24 00:01:31,230 --> 00:01:33,510 We're not going to be using this tool. 25 00:01:33,510 --> 00:01:35,190 It's okay to ignore it. 26 00:01:35,220 --> 00:01:38,340 The next file is called Git Ignore. 27 00:01:40,460 --> 00:01:46,710 The git ignore file will tell git to ignore a list of files when performing commitments. 28 00:01:46,730 --> 00:01:52,610 Angular has adjusted this file to include files and folders that don't need to be committed. 29 00:01:52,640 --> 00:01:54,830 We won't be modifying this file. 30 00:01:54,860 --> 00:01:58,190 The next file is called Angular.json. 31 00:02:00,360 --> 00:02:01,230 This file. 32 00:02:01,230 --> 00:02:03,720 Configures the workspace of our project. 33 00:02:03,750 --> 00:02:08,820 We can change how Angular builds our project for production and development. 34 00:02:08,850 --> 00:02:13,300 Unlike the other files, I want to dive into the options of this file. 35 00:02:13,320 --> 00:02:16,830 I'm going to fold some of these options for readability. 36 00:02:19,020 --> 00:02:21,450 The first option is called schema. 37 00:02:21,480 --> 00:02:27,990 Angular is capable of generating files for our projects aside from the initial starter files. 38 00:02:28,020 --> 00:02:31,290 It needs instructions for generating those files. 39 00:02:31,320 --> 00:02:38,370 This option is a path to a file to provide instructions on the various files generated with Angular. 40 00:02:38,400 --> 00:02:44,490 This file is also used for updating existing code whenever new changes are introduced. 41 00:02:44,520 --> 00:02:46,920 The next option is called version. 42 00:02:46,950 --> 00:02:51,900 This option will contain the version of the configuration we are currently using. 43 00:02:51,900 --> 00:02:53,940 Version one of the configuration. 44 00:02:53,940 --> 00:03:00,240 If the Angular team decides to change how the configuration file is formatted, this value would be 45 00:03:00,240 --> 00:03:00,990 higher. 46 00:03:01,020 --> 00:03:05,190 Afterward, we have the new project root option. 47 00:03:05,190 --> 00:03:09,710 Believe it or not, we can manage multiple angular applications at once. 48 00:03:09,720 --> 00:03:16,150 You may want to do this if you have a large app that needs to be broken down into several smaller apps. 49 00:03:16,170 --> 00:03:21,850 For example, you may have an application for customers and another for administrators. 50 00:03:21,880 --> 00:03:26,770 Code related to administrative actions shouldn't be loaded with customer actions. 51 00:03:26,770 --> 00:03:32,200 Both apps may feed into the same API, therefore they share a relationship. 52 00:03:32,200 --> 00:03:35,680 We can break this type of app into two apps. 53 00:03:35,710 --> 00:03:41,440 The new project Root option will be the name of the directory for hosting additional apps. 54 00:03:41,440 --> 00:03:48,280 For example, if we create a new project from within this angular project, it will be placed inside 55 00:03:48,280 --> 00:03:50,050 the projects directory. 56 00:03:50,080 --> 00:03:52,630 The next option is called Projects. 57 00:03:52,670 --> 00:03:56,630 It'll contain a list of projects currently registered with Angular. 58 00:03:56,650 --> 00:04:00,610 We've created one app so far, which is the basics app. 59 00:04:00,610 --> 00:04:06,370 Inside this object, we'll have more configuration options for this specific project. 60 00:04:06,400 --> 00:04:08,560 We won't go over every one of them. 61 00:04:08,560 --> 00:04:10,010 It's not necessary. 62 00:04:10,030 --> 00:04:13,330 The most crucial option is called architect. 63 00:04:13,360 --> 00:04:17,079 I'm going to quickly minimize the children's properties. 64 00:04:19,100 --> 00:04:23,780 The architect option contains a list of commands for building the project. 65 00:04:23,810 --> 00:04:26,960 Building is the process of compiling our code. 66 00:04:26,990 --> 00:04:33,590 For example, we need to build our TypeScript code into JavaScript code if we want to run our app in 67 00:04:33,590 --> 00:04:34,520 the browser. 68 00:04:34,730 --> 00:04:39,790 Angular needs to build our project differently based on what we plan on doing with the app. 69 00:04:39,800 --> 00:04:44,330 If we want to develop the application, we will use the serve command. 70 00:04:44,360 --> 00:04:49,100 If we want to ship our app to production, we would use the build command. 71 00:04:49,130 --> 00:04:54,830 As you can probably tell, each of these objects correlate to a command in the CLI. 72 00:04:55,310 --> 00:04:58,490 These commands will build the project differently. 73 00:04:58,490 --> 00:05:04,130 If we want to configure the building process, we can do so through the respective option. 74 00:05:04,160 --> 00:05:07,550 The build command will build the project for production. 75 00:05:07,580 --> 00:05:11,390 The serve command will build the project for development. 76 00:05:11,420 --> 00:05:17,000 The extract i18n command will extract translations from a project. 77 00:05:17,030 --> 00:05:21,600 Lastly, the test command will build the project for testing. 78 00:05:21,630 --> 00:05:26,160 We aren't going to be running through every command provided by Angular. 79 00:05:26,160 --> 00:05:31,200 However, it's always good to know where you can modify the behavior of a command. 80 00:05:31,230 --> 00:05:36,540 There isn't anything else worth mentioning, so let's move on to the next file in our project. 81 00:05:36,570 --> 00:05:39,840 The next file is called Package.json. 82 00:05:41,960 --> 00:05:44,630 You should already be familiar with this file. 83 00:05:44,630 --> 00:05:48,200 It contains a list of dependencies for our project. 84 00:05:48,230 --> 00:05:54,550 If we look inside the scripts object, we'll find some commands for starting and building the project. 85 00:05:54,560 --> 00:05:56,270 As I've mentioned before. 86 00:05:56,300 --> 00:06:01,280 The START command runs the NG serve command behind the scenes. 87 00:06:01,310 --> 00:06:03,710 They both turn on the development server. 88 00:06:03,740 --> 00:06:08,030 The next files are the TypeScript configuration files. 89 00:06:10,050 --> 00:06:13,040 There are three configuration files there. 90 00:06:13,080 --> 00:06:23,100 The TS config dot app.json tsconfig.json and TS config dot spec dot json files. 91 00:06:23,190 --> 00:06:27,600 It feels redundant to have various configuration files for typescript. 92 00:06:27,630 --> 00:06:30,000 However, they do serve a purpose. 93 00:06:30,030 --> 00:06:37,980 The TS config dot app.json file runs when we're compiling our application, whereas the spec file runs 94 00:06:37,980 --> 00:06:39,090 for tests. 95 00:06:39,120 --> 00:06:43,330 Both files extend the tsconfig.json file. 96 00:06:43,350 --> 00:06:48,300 If we look inside either file we'll find a property called extends. 97 00:06:50,370 --> 00:06:54,700 The extends option allows us to import settings from another file. 98 00:06:54,720 --> 00:07:00,420 As you can see, these files import the tsconfig.json file as a base. 99 00:07:00,450 --> 00:07:06,600 If there are conflicting settings, the file importing the configuration file will have priority. 100 00:07:06,630 --> 00:07:11,560 We aren't going to be modifying the TypeScript configuration for this project. 101 00:07:11,580 --> 00:07:14,040 It's been optimized for Angular. 102 00:07:14,070 --> 00:07:16,860 That wraps up the files in the root directory. 103 00:07:16,890 --> 00:07:20,760 You may have noticed one thing about the files in this directory. 104 00:07:20,760 --> 00:07:22,980 They're all configuration files. 105 00:07:23,010 --> 00:07:26,980 Not a single file contains code for the actual application. 106 00:07:27,000 --> 00:07:32,190 It's because the application code can be found inside the source directory. 107 00:07:32,220 --> 00:07:36,300 The CLI will compile the code inside this directory. 108 00:07:36,330 --> 00:07:40,870 We're going to start exploring the code in this directory in the next lecture. 109 00:07:40,890 --> 00:07:42,210 I'll see you there.