1 00:00:06,540 --> 00:00:08,460 - You can create an Angular application 2 00:00:08,460 --> 00:00:11,670 by using Angular CLI, the command line interface tool. 3 00:00:11,670 --> 00:00:13,980 Open up a command window and run this command, 4 00:00:13,980 --> 00:00:18,270 NG, for Angular, the Angular CLI, create a new application 5 00:00:18,270 --> 00:00:20,490 and call it HelloWorld. 6 00:00:20,490 --> 00:00:22,950 It'll create the folder called HelloWorld 7 00:00:22,950 --> 00:00:27,540 and it'll download all the libraries into that folder. 8 00:00:27,540 --> 00:00:28,920 And it'll generate all the code 9 00:00:28,920 --> 00:00:30,900 and all the configuration as well. 10 00:00:30,900 --> 00:00:32,910 When you run this command line tool, 11 00:00:32,910 --> 00:00:35,550 the first thing it does is ask you a couple of questions. 12 00:00:35,550 --> 00:00:36,750 Do you want routing? 13 00:00:36,750 --> 00:00:40,300 Routing is useful when you have a single page application 14 00:00:40,300 --> 00:00:43,080 where the user navigates the different URLs 15 00:00:43,080 --> 00:00:46,230 and automatically displays different components. 16 00:00:46,230 --> 00:00:47,610 We'll have that in general, 17 00:00:47,610 --> 00:00:49,860 but for the simple application we generated now, 18 00:00:49,860 --> 00:00:51,900 you'd say, "No, thanks." 19 00:00:51,900 --> 00:00:54,300 And then in terms of style sheets, 20 00:00:54,300 --> 00:00:56,790 we'll just go over the basic CSS option. 21 00:00:56,790 --> 00:00:59,250 You also have the option of using some CSS 22 00:00:59,250 --> 00:01:02,760 pre-processor like Sass or Less 23 00:01:02,760 --> 00:01:05,700 to make it easier to manage large style sheets. 24 00:01:05,700 --> 00:01:08,460 But for now, we'll just go for the simple option. 25 00:01:08,460 --> 00:01:12,990 No routing and a simple CSS style sheet format, please. 26 00:01:12,990 --> 00:01:15,120 I've already created an application. 27 00:01:15,120 --> 00:01:19,920 If you go into the demo folder for lesson 11 28 00:01:19,920 --> 00:01:22,290 you'll see there's a folder called "Example1," 29 00:01:22,290 --> 00:01:25,350 and in there I created a simple application, HelloWorld. 30 00:01:25,350 --> 00:01:27,390 It was the basic application generated 31 00:01:27,390 --> 00:01:29,580 using the Angular CLI. 32 00:01:29,580 --> 00:01:31,800 We'll have a look at the pre-built example in a moment, 33 00:01:31,800 --> 00:01:33,210 but first of all, I'm just gonna actually 34 00:01:33,210 --> 00:01:35,210 do this just to show what it looks like. 35 00:01:36,240 --> 00:01:37,890 So I've opened up a command window 36 00:01:37,890 --> 00:01:40,260 into Lesson 11, Example 1. 37 00:01:40,260 --> 00:01:43,320 I've already got a HelloWorld application in there, 38 00:01:43,320 --> 00:01:45,330 so I'm gonna create another application, 39 00:01:45,330 --> 00:01:47,433 NG new HelloWorld2. 40 00:01:50,610 --> 00:01:53,880 So it asks, "Do you want to add Angular routing?" 41 00:01:53,880 --> 00:01:55,680 Generally, you'd say yes, 42 00:01:55,680 --> 00:01:58,280 but in this simple example, we say, "No, thank you." 43 00:01:59,130 --> 00:02:00,690 Which style sheet format would you like? 44 00:02:00,690 --> 00:02:03,780 You can use the arrow keys to say which format 45 00:02:03,780 --> 00:02:06,870 of CSS you want of style sheets. 46 00:02:06,870 --> 00:02:09,000 So we'll just go for the plain CSS. 47 00:02:09,000 --> 00:02:11,070 Okay. And then you press enter, 48 00:02:11,070 --> 00:02:13,743 and off it goes, generating the application. 49 00:02:14,700 --> 00:02:16,620 It takes about two or three minutes 50 00:02:16,620 --> 00:02:18,420 to generate the application 51 00:02:18,420 --> 00:02:21,600 because generating the source files for one thing, 52 00:02:21,600 --> 00:02:25,230 but mainly because it downloads a lot of libraries. 53 00:02:25,230 --> 00:02:27,390 It generates a packaged json file, 54 00:02:27,390 --> 00:02:30,090 which specifies all the libraries to download, 55 00:02:30,090 --> 00:02:32,190 and there a lot of libraries to download, 56 00:02:32,190 --> 00:02:34,470 so go away and come back. 57 00:02:34,470 --> 00:02:35,940 Make a cup of tea. 58 00:02:35,940 --> 00:02:37,230 Have another cup of tea. 59 00:02:37,230 --> 00:02:40,770 By the time you've come back, it'll be ready. 60 00:02:40,770 --> 00:02:41,603 Okay. 61 00:02:41,603 --> 00:02:43,350 So what we'll do is, we won't wait for that, obviously. 62 00:02:43,350 --> 00:02:44,850 We'll have a look at the example 63 00:02:44,850 --> 00:02:47,070 that's already being created. 64 00:02:47,070 --> 00:02:50,400 So the Angular CLI, it creates a fully functional 65 00:02:50,400 --> 00:02:52,410 minimalistic application, 66 00:02:52,410 --> 00:02:55,380 which contains this directory structure. 67 00:02:55,380 --> 00:02:58,230 Okay, so this is the HelloWorld directory structure. 68 00:02:58,230 --> 00:03:01,080 I'll show you the actual demo in a moment. 69 00:03:01,080 --> 00:03:06,030 Notice a package.json file, which specifies the libraries. 70 00:03:06,030 --> 00:03:08,040 I also notice that it has downloaded 71 00:03:08,040 --> 00:03:11,100 those libraries into node_modules. 72 00:03:11,100 --> 00:03:14,910 Now, if you are using the examples that I provided 73 00:03:14,910 --> 00:03:17,160 to accompany this video series, 74 00:03:17,160 --> 00:03:20,040 the node_modules folder, in practice, is huge. 75 00:03:20,040 --> 00:03:22,800 So what I always do when I'm packaging my application, 76 00:03:22,800 --> 00:03:26,460 is I delete the node_modules folder before I zip it, 77 00:03:26,460 --> 00:03:27,990 because it's just too big. 78 00:03:27,990 --> 00:03:28,850 Okay. 79 00:03:28,850 --> 00:03:30,870 So if you want to run the HelloWorld application 80 00:03:30,870 --> 00:03:34,053 that I've provided, you'll have to do an NPM install. 81 00:03:35,730 --> 00:03:39,300 So open a command window, go to the HelloWorld folder, 82 00:03:39,300 --> 00:03:43,323 and then run NPM install. 83 00:03:45,660 --> 00:03:48,540 Like that. Okay? 84 00:03:48,540 --> 00:03:50,733 That will also take two or three minutes, 85 00:03:51,660 --> 00:03:52,950 but you need to do that, 86 00:03:52,950 --> 00:03:56,700 and it'll then install all the libraries 87 00:03:56,700 --> 00:03:57,990 in the node_modules folder. 88 00:03:57,990 --> 00:03:59,490 So make sure that you do that. 89 00:04:00,450 --> 00:04:03,390 Also, we've got TypeScript configuration file. 90 00:04:03,390 --> 00:04:06,000 Angular applications are TypeScript. 91 00:04:06,000 --> 00:04:08,070 Okay. So that's something to note. 92 00:04:08,070 --> 00:04:10,980 So it generates TypeScript configuration 93 00:04:10,980 --> 00:04:13,110 and the list of libraries we need, 94 00:04:13,110 --> 00:04:14,280 and then various files here. 95 00:04:14,280 --> 00:04:18,840 Karma is the test runner for Angular. 96 00:04:18,840 --> 00:04:20,490 Karma runs your tests. 97 00:04:20,490 --> 00:04:22,800 We'll see that later, obviously, 98 00:04:22,800 --> 00:04:25,050 plus various other configuration files, 99 00:04:25,050 --> 00:04:28,200 and then a source folder, or plus a git repository 100 00:04:28,200 --> 00:04:31,343 so you can upload to GitHub or Bitbucket. 101 00:04:31,343 --> 00:04:32,760 In the source folder, 102 00:04:32,760 --> 00:04:37,760 we have the homepage, index.tsx, plus the home entry file, 103 00:04:39,210 --> 00:04:41,100 if you like main.ts, 104 00:04:41,100 --> 00:04:43,770 is the code entry point in the application, 105 00:04:43,770 --> 00:04:46,669 and index.html is the actual homepage 106 00:04:46,669 --> 00:04:49,200 that the browser will open. 107 00:04:49,200 --> 00:04:53,490 And style.css is the global style sheet. 108 00:04:53,490 --> 00:04:56,160 In a way, you define your corporate color schemes, 109 00:04:56,160 --> 00:04:58,113 fonts, logos, and such like. 110 00:04:59,190 --> 00:05:00,023 Okay. 111 00:05:00,023 --> 00:05:01,200 There's obviously a lot of other detail here. 112 00:05:01,200 --> 00:05:05,460 The test file basically tells Angular what tests to run, 113 00:05:05,460 --> 00:05:07,810 what files to look for when it's running tests. 114 00:05:08,670 --> 00:05:11,370 The environments folder allows you to define 115 00:05:11,370 --> 00:05:14,970 different properties, like the URL of a server 116 00:05:14,970 --> 00:05:16,200 you want to connect to. 117 00:05:16,200 --> 00:05:18,780 You might connect to one server in development mode, 118 00:05:18,780 --> 00:05:20,640 but a different server in production mode. 119 00:05:20,640 --> 00:05:22,560 So you can define configuration information 120 00:05:22,560 --> 00:05:25,713 in here to help differentiate between those two modes. 121 00:05:26,610 --> 00:05:30,360 The assets folder is where you put your images 122 00:05:30,360 --> 00:05:32,190 and videos and things like this. 123 00:05:32,190 --> 00:05:35,820 You know, your kind of media assets, if you like. 124 00:05:35,820 --> 00:05:38,940 And then the app folder is where all the code lives. 125 00:05:38,940 --> 00:05:42,360 So if you go into the app folder, you will find, 126 00:05:42,360 --> 00:05:44,520 well, there were four files called 127 00:05:44,520 --> 00:05:46,770 app.component.something. 128 00:05:46,770 --> 00:05:49,860 A component in Angular is a class 129 00:05:49,860 --> 00:05:52,500 which renders part of your webpage. 130 00:05:52,500 --> 00:05:54,210 And in a minimalistic application, 131 00:05:54,210 --> 00:05:56,970 you have one component called app. 132 00:05:56,970 --> 00:05:59,340 Each component can have four files. 133 00:05:59,340 --> 00:06:02,310 A file that defines the component class. 134 00:06:02,310 --> 00:06:04,950 A spec file, where you put your tests. 135 00:06:04,950 --> 00:06:06,660 You can have a separate test file 136 00:06:06,660 --> 00:06:09,510 per component for unit testing. 137 00:06:09,510 --> 00:06:13,170 Each component has data to be rendered 138 00:06:13,170 --> 00:06:16,830 and that data is rendered in the associated HTML file. 139 00:06:16,830 --> 00:06:19,140 This is for the HTML template. 140 00:06:19,140 --> 00:06:22,080 A component has code and data 141 00:06:22,080 --> 00:06:23,992 that can be tested. 142 00:06:23,992 --> 00:06:27,750 The data is rendered by the HTML template 143 00:06:27,750 --> 00:06:29,910 with the file name. Same file. 144 00:06:29,910 --> 00:06:32,760 And a component can have its own style sheet. 145 00:06:32,760 --> 00:06:37,020 Okay. So that's relatively common. 146 00:06:37,020 --> 00:06:39,120 So you can have two different sets of style sheets. 147 00:06:39,120 --> 00:06:41,400 The global style sheet for the whole website, 148 00:06:41,400 --> 00:06:43,470 and then a specific style sheet 149 00:06:43,470 --> 00:06:46,230 just for this component if it needs it. 150 00:06:46,230 --> 00:06:49,110 Okay. And then this file here, app.module 151 00:06:49,110 --> 00:06:52,920 is kind of a box into which you put all your components. 152 00:06:52,920 --> 00:06:56,460 So we've got three main types of source file. 153 00:06:56,460 --> 00:07:00,120 The code entry point, which is always main.ts, 154 00:07:00,120 --> 00:07:03,180 the module, which is kind of like an assembly box 155 00:07:03,180 --> 00:07:05,460 that specifies all your components. 156 00:07:05,460 --> 00:07:08,790 And then each component itself has four files: 157 00:07:08,790 --> 00:07:12,990 the code, the test, the HTML to display the data, 158 00:07:12,990 --> 00:07:16,110 and a CSS to style the HTML. 159 00:07:16,110 --> 00:07:18,810 All right, so that's what was generated by default. 160 00:07:18,810 --> 00:07:20,610 I'll just show you the application 161 00:07:20,610 --> 00:07:22,740 that I've already created. 162 00:07:22,740 --> 00:07:26,520 So in my HelloWorld folder, in example one, 163 00:07:26,520 --> 00:07:28,920 if you open HelloWorld or HelloWorld2, 164 00:07:28,920 --> 00:07:31,320 in fact, that seems to be coming together now. 165 00:07:31,320 --> 00:07:33,630 Let's have a look at the HelloWorld folder 166 00:07:33,630 --> 00:07:35,250 in the code editor. 167 00:07:35,250 --> 00:07:36,210 So here it is. 168 00:07:36,210 --> 00:07:39,090 If I just expand, what we'll see here are the files 169 00:07:39,090 --> 00:07:39,960 that I just mentioned. 170 00:07:39,960 --> 00:07:43,320 All the configuration files in the root folder, 171 00:07:43,320 --> 00:07:47,010 the source folder that contains my homepage, 172 00:07:47,010 --> 00:07:48,810 my code entry file, 173 00:07:48,810 --> 00:07:51,810 plus my application component. 174 00:07:51,810 --> 00:07:54,600 My application component plus the module. 175 00:07:54,600 --> 00:07:56,250 I'm not gonna look at the source file yet 176 00:07:56,250 --> 00:07:57,930 because there are so many of them. 177 00:07:57,930 --> 00:07:59,190 We'll do that later. 178 00:07:59,190 --> 00:08:00,540 At the moment, I just wanted to give you, 179 00:08:00,540 --> 00:08:02,220 like, the big picture, 180 00:08:02,220 --> 00:08:05,070 create an application, and then be able to run it. 181 00:08:05,070 --> 00:08:06,660 Right, so to run the application, 182 00:08:06,660 --> 00:08:10,147 the easiest way is to say "ng serve." 183 00:08:10,147 --> 00:08:13,860 "ng serve" will compile your code into JavaScript. 184 00:08:13,860 --> 00:08:17,130 It'll start a development web server. 185 00:08:17,130 --> 00:08:20,940 By default, the web server will start on localhost. 186 00:08:20,940 --> 00:08:23,940 Although, you can use the "--host" property 187 00:08:23,940 --> 00:08:25,920 to run on a different host. 188 00:08:25,920 --> 00:08:29,670 And the port number by default is 4200, 189 00:08:29,670 --> 00:08:32,010 and you can use the "--port" option 190 00:08:32,010 --> 00:08:33,420 to run on a different port number. 191 00:08:33,420 --> 00:08:38,070 So I'm gonna serve my HelloWorld application. 192 00:08:38,070 --> 00:08:41,100 So first things first, you need to be in the folder 193 00:08:41,100 --> 00:08:42,720 that contains your application. 194 00:08:42,720 --> 00:08:45,730 Okay? So you need to go into the HelloWorld folder 195 00:08:47,580 --> 00:08:48,660 or HelloWorld2. 196 00:08:48,660 --> 00:08:50,160 You know, whichever one you wanna be in. 197 00:08:50,160 --> 00:08:51,840 Basically, you need to be in the folder 198 00:08:51,840 --> 00:08:54,540 that contains the package.json file. 199 00:08:54,540 --> 00:08:56,697 Then you say, "ng serve," 200 00:08:57,981 --> 00:08:59,940 and, you know, ng serve takes a few minutes. 201 00:08:59,940 --> 00:09:02,550 You have to be patient being an Angular developer. 202 00:09:02,550 --> 00:09:06,390 It compiles all your text script code into Angular. 203 00:09:06,390 --> 00:09:08,610 Oh, it's saying here that I have a more recent version 204 00:09:08,610 --> 00:09:11,220 of the Angular CLI on my machine. 205 00:09:11,220 --> 00:09:12,540 Okay. So there we go. 206 00:09:12,540 --> 00:09:15,660 So when I wrote the demos, it was version 12. 207 00:09:15,660 --> 00:09:18,963 As I sit here today, it's version 13. 208 00:09:19,980 --> 00:09:21,870 So I could upgrade. 209 00:09:21,870 --> 00:09:25,110 You can upgrade easily from version one to version two. 210 00:09:25,110 --> 00:09:28,320 I'm just gonna wait a moment while it does the compilation. 211 00:09:28,320 --> 00:09:30,300 It'll start the web server. 212 00:09:30,300 --> 00:09:32,700 Once that's ready, I can then go into a browser 213 00:09:32,700 --> 00:09:33,840 and serve the application, 214 00:09:33,840 --> 00:09:35,790 and have a look at the application. 215 00:09:35,790 --> 00:09:38,220 So if I could wait long enough, 216 00:09:38,220 --> 00:09:39,900 it would've completed building. 217 00:09:39,900 --> 00:09:41,250 I could go into a browser, 218 00:09:41,250 --> 00:09:46,230 browse to localhost 4200, and it would look like this. 219 00:09:46,230 --> 00:09:51,230 Okay. So, I feel it's a rather over-engineered sample page, 220 00:09:53,250 --> 00:09:57,180 but that was generated by the Angular CLI application. 221 00:09:57,180 --> 00:09:58,110 Okay. It's good. 222 00:09:58,110 --> 00:10:00,750 We're ready to start diving into the details. 223 00:10:00,750 --> 00:10:02,700 Now, what we need to do is to actually understand 224 00:10:02,700 --> 00:10:05,640 what does that code look like that's been generated? 225 00:10:05,640 --> 00:10:06,690 And once we understand, you know, 226 00:10:06,690 --> 00:10:08,070 what does a component look like, 227 00:10:08,070 --> 00:10:09,990 and what does the HTML look like, 228 00:10:09,990 --> 00:10:11,460 once we understand the code, 229 00:10:11,460 --> 00:10:13,590 then we'll be in a position to actually start writing 230 00:10:13,590 --> 00:10:15,933 the tests for the Angular application.