1 00:00:03,820 --> 00:00:10,160 Hello, everyone, and welcome to the angular core deep dive course in this course, we're going to 2 00:00:10,180 --> 00:00:16,390 introduce the angular framework from the beginning from scratch, and we're going to do a detailed guided 3 00:00:16,390 --> 00:00:23,980 tour on the angular core module, which is the most important module of angular from which all other 4 00:00:23,980 --> 00:00:25,570 modules are derived. 5 00:00:25,720 --> 00:00:31,950 Let's start by answering the question what is angular and see it in action immediately. 6 00:00:32,320 --> 00:00:36,900 So in order to see Angular in action, we are going to be needing a development environment. 7 00:00:37,300 --> 00:00:41,480 Let's then set up a development environment in this initial lesson. 8 00:00:42,010 --> 00:00:47,380 So in order to have your development environment up and running, you're going to be needing the low 9 00:00:47,380 --> 00:00:48,800 G.S. runtime. 10 00:00:48,970 --> 00:00:56,290 Let's head over to not just org and download here the latest node version that you have available and 11 00:00:56,290 --> 00:01:01,110 notice that the version number is going to probably be different from the one that we see here. 12 00:01:01,330 --> 00:01:08,620 Please use the latest version and not the long term support version as the latest version tends to work 13 00:01:08,620 --> 00:01:15,880 better with front end development tools such as the angular Seelie that we will be using in this course. 14 00:01:16,090 --> 00:01:23,410 Once you have those installed on your machine, you are also going to be needing an idea or an integrated 15 00:01:23,410 --> 00:01:24,730 development environment. 16 00:01:25,210 --> 00:01:28,390 In this course, we're going to be using the Web Storm IVI. 17 00:01:28,630 --> 00:01:34,960 So if you want to use the same idea that we'll be using in the course, please head over to Gitte Brains 18 00:01:34,960 --> 00:01:42,320 dot com slash web storm and download here Web storm if you prefer instead of a free. 19 00:01:42,820 --> 00:01:46,540 You can also use visual studio code from Microsoft. 20 00:01:46,550 --> 00:01:49,240 This is also an excellent Abie. 21 00:01:49,660 --> 00:01:56,470 Once you have both end and I've installed in their machine, we are now ready to start exploring ANGULAR. 22 00:01:56,890 --> 00:02:03,640 The best way to understand what exactly Anglet is and how it works is to see it in action. 23 00:02:03,640 --> 00:02:06,070 So that's what we're going to do straight away. 24 00:02:06,550 --> 00:02:12,090 We are going to switch here to the command line and we are going to quickly scaffold a small, angular 25 00:02:12,100 --> 00:02:12,880 application. 26 00:02:13,150 --> 00:02:19,090 So in order to do that, we are going to be using the angular command line interface, also known as 27 00:02:19,090 --> 00:02:20,830 the angular SLA. 28 00:02:21,220 --> 00:02:26,770 The first thing that we need to do is to install it globally because we will be running several commands 29 00:02:26,890 --> 00:02:28,390 here from the command line. 30 00:02:28,570 --> 00:02:35,200 So in order to do that, we are going to do NPM install minus G at Angular slash CLIA. 31 00:02:35,740 --> 00:02:41,500 This is going to take a moment, but in the end we will have here the latest version of the angular 32 00:02:41,500 --> 00:02:45,850 CLIA in place in our machine was the installation completes. 33 00:02:45,850 --> 00:02:51,670 You are going to have available in your machine a global command line tool called Engy, which is the 34 00:02:51,670 --> 00:02:53,170 angular seal itself. 35 00:02:53,650 --> 00:02:58,660 If you type energy and you hit enter, you are going to see here the multiple commands that we have 36 00:02:58,660 --> 00:03:01,330 available using the angular clay. 37 00:03:01,630 --> 00:03:05,350 Now that we have the angular Seela in place, here is what we are about to do. 38 00:03:05,350 --> 00:03:12,550 We are going to use the SLA to generate here a new angular application using the engine new command. 39 00:03:12,730 --> 00:03:19,180 We are then going to run the angular application itself, using the engie serve commands. 40 00:03:19,180 --> 00:03:24,640 So we will have here a small hill world angular application that we are going to explore. 41 00:03:24,790 --> 00:03:31,060 As you can see at this point, ANGULAR is not only a Web framework, there is also the SLA and there 42 00:03:31,060 --> 00:03:35,950 is a whole ecosystem of tools that helps us to build Web applications. 43 00:03:36,160 --> 00:03:37,630 Let's see this in action. 44 00:03:37,630 --> 00:03:41,680 We are going to scaffold a new application using the following commands. 45 00:03:41,680 --> 00:03:43,300 We are going to use Engy. 46 00:03:43,510 --> 00:03:46,030 That's the executable of the angular clay. 47 00:03:46,390 --> 00:03:51,790 We are going to use the new command and we're going to specify here a name for our project. 48 00:03:52,060 --> 00:03:54,760 Let's use the name Angular Dash Course. 49 00:03:55,000 --> 00:04:01,360 Let's now hit Enter and we're going to be prompted by the angular clay for a series of questions. 50 00:04:01,630 --> 00:04:04,410 First, would you like to have angular rooting? 51 00:04:04,450 --> 00:04:05,830 Let's choose the option. 52 00:04:05,830 --> 00:04:13,510 No, at this stage and let's choose here on the second question, plane success for our styling and 53 00:04:13,510 --> 00:04:14,410 we these in place. 54 00:04:14,650 --> 00:04:19,990 Our application is going to be scaffolded and our dependencies are now being installed. 55 00:04:20,140 --> 00:04:22,720 After a while, our installation is completed. 56 00:04:22,720 --> 00:04:28,720 So if we know least here the contents of our directories, we're going to find here a new folder called 57 00:04:28,720 --> 00:04:30,100 Angular Discourse. 58 00:04:30,430 --> 00:04:33,520 These will contain our new angular application. 59 00:04:33,730 --> 00:04:38,620 If we see the into it, we are going to see that we have here a series of files that we're going to 60 00:04:38,620 --> 00:04:40,930 cover later in this course. 61 00:04:40,960 --> 00:04:46,060 Right now, what we want to do is we want to see Angular in action as soon as possible. 62 00:04:46,300 --> 00:04:52,680 So what we're going to do is we are going to open this folder in our IVI, switching here to the website, 63 00:04:52,690 --> 00:04:58,720 or maybe we're going to see that we have here the same files that we saw on the command line. 64 00:04:58,960 --> 00:05:00,490 So we have here a small. 65 00:05:00,580 --> 00:05:08,200 No module that contains a series of tasks, one of the tasks NPRM Start is going to allow us to start 66 00:05:08,200 --> 00:05:10,030 the small, angular application. 67 00:05:10,450 --> 00:05:15,730 Let's do that by heading over here to the terminal and running the following commands. 68 00:05:16,090 --> 00:05:17,930 NPM Start. 69 00:05:18,430 --> 00:05:24,010 This is going to spin off here using the angular Sheila as small development server. 70 00:05:24,220 --> 00:05:27,890 Actually internally this is using the engy serve commands. 71 00:05:28,240 --> 00:05:34,930 So here the server will be available on board localhost 4200. 72 00:05:35,230 --> 00:05:40,090 Once the server is up and running, we are going to switch here to the browser window and we are going 73 00:05:40,090 --> 00:05:41,800 to type the following URL. 74 00:05:42,100 --> 00:05:47,770 HTP localhost Callon 4200 and we don't even live here. 75 00:05:47,770 --> 00:05:49,810 This slash at the end. 76 00:05:50,170 --> 00:05:56,190 If we hit these Eurail, we are going to get here our very first angular application. 77 00:05:56,350 --> 00:06:03,550 Let's then do a guided tour of the application and see what is angular and how does it work in practice.