1 00:00:00,330 --> 00:00:01,540 Hello again, everyone. 2 00:00:01,770 --> 00:00:02,190 So. 3 00:00:03,380 --> 00:00:06,260 We are starting a new chapter in this lesson. 4 00:00:07,190 --> 00:00:14,300 And we're going to talk about data binding methods and angular, so I'm going to want to continue with 5 00:00:14,300 --> 00:00:15,600 a new project. 6 00:00:16,130 --> 00:00:20,510 So first, let's create a new project and remember how to construct it. 7 00:00:21,790 --> 00:00:24,010 So we're going to create a project in terminal. 8 00:00:25,300 --> 00:00:32,890 Now, Terminal is open with Visual Studio Code, and I am typing the engine command. 9 00:00:34,520 --> 00:00:35,960 To create the project. 10 00:00:36,730 --> 00:00:38,800 And then I'll write in a project name. 11 00:00:41,030 --> 00:00:42,650 And it's going to ask. 12 00:00:44,140 --> 00:00:45,130 If we want rounding. 13 00:00:46,190 --> 00:00:54,050 I'm going to say no and then Style asks, well, here to allow you access and now I can create the project. 14 00:00:54,870 --> 00:00:58,430 All right, so we already know all this, but I want to remind you. 15 00:01:00,430 --> 00:01:01,300 Step by step. 16 00:01:02,660 --> 00:01:04,730 All right, so our project is now created. 17 00:01:05,740 --> 00:01:10,990 So we can switch to the project folder by typing CD, project, name and code. 18 00:01:14,000 --> 00:01:21,170 And saying the folder opens in Visual Studio Code Project opens in E! 19 00:01:22,300 --> 00:01:24,580 And we already know the project structure. 20 00:01:25,900 --> 00:01:28,900 But we're going to get into it just briefly as an overview. 21 00:01:30,090 --> 00:01:36,840 So we already know there is a package that Jason file in here and in this file there are packages and 22 00:01:36,840 --> 00:01:39,390 scripts that we download via NPM. 23 00:01:40,530 --> 00:01:48,570 And we also, if you remember, talked about Noad modules where modules are located and it contains 24 00:01:48,570 --> 00:01:51,660 the modules downloaded by the package Jason File. 25 00:01:53,300 --> 00:01:59,480 And of course, we also know about the source folder, and that's where our project lives. 26 00:02:00,340 --> 00:02:07,490 Now there's an app module in this folder and here are some files that we can prepare for the project. 27 00:02:08,740 --> 00:02:14,770 And here, as you also know, we have an out module. 28 00:02:15,650 --> 00:02:21,170 So this is a file in which we will add modules from ANGULAR and other components that we're going to 29 00:02:21,170 --> 00:02:21,530 use. 30 00:02:22,370 --> 00:02:29,090 So in other words, it's like a junction point of both the modules from ANGULAR and the components that 31 00:02:29,090 --> 00:02:30,200 we will create. 32 00:02:32,240 --> 00:02:36,320 And as you also remember, we specify the startup component. 33 00:02:38,110 --> 00:02:43,120 And here is where we define the components that we will create later. 34 00:02:45,250 --> 00:02:50,800 Since we going to use a different file, we're not going to forget to import it, of course, either, 35 00:02:50,950 --> 00:02:51,500 aren't we? 36 00:02:51,520 --> 00:02:51,810 No. 37 00:02:52,370 --> 00:02:53,080 Yes. 38 00:02:53,590 --> 00:02:56,980 So we're building our project on the app module. 39 00:02:57,850 --> 00:03:05,560 And when we look at the main TSC file, we'll specify that we will run the project in the browser and 40 00:03:05,860 --> 00:03:08,230 on which module we will run. 41 00:03:10,940 --> 00:03:16,400 And we said it before, but we'll say it again, working with a single module will be sufficient unless 42 00:03:16,400 --> 00:03:19,040 there are some very large and complex projects. 43 00:03:19,880 --> 00:03:23,990 So we actually start the loop with the main TS file. 44 00:03:25,270 --> 00:03:29,140 And here we'll specify the model to run in the browser. 45 00:03:30,610 --> 00:03:35,260 OK, so in this module, we specify which component the application will start. 46 00:03:36,320 --> 00:03:42,800 And when we look into the component, we'll see The Selecter part and approved. 47 00:03:44,650 --> 00:03:47,830 And here is the index, that HTML file. 48 00:03:48,990 --> 00:03:50,160 When you open this file. 49 00:03:51,640 --> 00:03:53,110 We already see it in the body. 50 00:03:53,950 --> 00:04:00,520 In fact, when you look at it, the events follow each other and are processed just like a chain. 51 00:04:03,300 --> 00:04:07,710 And of course, you remember the angular logic that we talked about. 52 00:04:09,470 --> 00:04:11,150 And I think there's enough of a review. 53 00:04:12,100 --> 00:04:12,410 Cool. 54 00:04:12,700 --> 00:04:16,710 So let's start preparing a project and we're going to take it slowly, step by step. 55 00:04:17,790 --> 00:04:18,270 All right. 56 00:04:19,890 --> 00:04:26,220 As we add to our first project, I want to just include bootstrap in this project as well. 57 00:04:28,110 --> 00:04:33,720 So you remember how to do this, I'll run the NPM, install bootstrap command in the terminal. 58 00:04:35,190 --> 00:04:35,940 And. 59 00:04:36,950 --> 00:04:40,690 OK, so the final version of Bootstrap will be added to the project. 60 00:04:42,440 --> 00:04:46,730 So now when we look at the package, Jason, file, we see the last. 61 00:04:48,900 --> 00:04:51,840 And latest and greatest version of Bouchra. 62 00:04:53,810 --> 00:04:59,780 So when we look for node modules, we see that the bootstrap module is downloaded. 63 00:05:00,900 --> 00:05:07,350 Great, so now we'll need to specify the bootstrap path in Angular Jason. 64 00:05:08,590 --> 00:05:13,030 And here we can call the general fire with the descriptions of the modules that we use. 65 00:05:13,950 --> 00:05:17,280 So type bootstrap path in styles. 66 00:05:28,980 --> 00:05:32,530 And yep, sure enough, we have included bootstrap in our project. 67 00:05:33,540 --> 00:05:37,530 All right, so that means we're going to be able to use the bootstrap library while preparing. 68 00:05:38,100 --> 00:05:43,500 So, yes, my friends, we've created our new project and this is where we're going to get into our 69 00:05:43,680 --> 00:05:44,640 next topic. 70 00:05:45,000 --> 00:05:45,350 All right. 71 00:05:45,660 --> 00:05:48,060 We've also included the bootstrap library. 72 00:05:48,930 --> 00:05:52,380 So that means I want to see in the next lesson.