1 00:00:03,810 --> 00:00:11,280 Hello, everyone, and welcome to the angular core deep dive course, I'm Vaskov from the angular diversity 2 00:00:11,280 --> 00:00:14,310 and I will be your instructor for this course. 3 00:00:14,670 --> 00:00:19,640 In this course we are going to dive deep into the core and common modules of angular. 4 00:00:19,950 --> 00:00:24,770 So these are the key modules that support the whole angular ecosystem. 5 00:00:24,780 --> 00:00:30,170 The main goal of this course is to give you a very solid foundation on the angular platform. 6 00:00:30,180 --> 00:00:34,970 We are going to cover everything that is contained in the core and common modules. 7 00:00:35,280 --> 00:00:40,740 These will include some of the most commonly used functionality of ANGULAR, but it will also include 8 00:00:40,740 --> 00:00:46,050 some very advanced topics, such as, for example, the multiple modes of change detection. 9 00:00:46,260 --> 00:00:51,540 We are going to cover dependency injection in detail, going to cover internationalization. 10 00:00:51,540 --> 00:00:57,900 We are going to cover angular elements and much more to get you up to speed as fast as possible. 11 00:00:57,900 --> 00:01:02,280 We are going to give you a quick and practical introduction to the angular framework. 12 00:01:02,430 --> 00:01:07,680 We are going to take the angular CLIA, the command line interface of the platform, and we are going 13 00:01:07,680 --> 00:01:12,180 to quickly scaffold a new project from scratch, from an empty folder. 14 00:01:12,690 --> 00:01:17,700 Then we are going to take these initial playground and we are going to quickly demonstrate some of the 15 00:01:17,700 --> 00:01:20,940 main benefits and key features of ANGULAR. 16 00:01:21,030 --> 00:01:26,910 After this quick introduction, we are going to jump to the components section of our course. 17 00:01:26,910 --> 00:01:29,250 We are going to talk about angular components. 18 00:01:29,250 --> 00:01:34,470 We are going to understand the key benefits of the component model and the way we talk about common 19 00:01:34,470 --> 00:01:39,210 functionality, such as, for example, inputs, outputs, custom events. 20 00:01:39,450 --> 00:01:46,170 We are going to learn how to build our own custom component, build our own tree of custom components. 21 00:01:46,380 --> 00:01:52,770 And we are also going to introduce at this stage many of the most commonly used angular directives, 22 00:01:52,770 --> 00:01:57,450 such as, for example, NGF, Energy for Energy, Switch, etc.. 23 00:01:57,480 --> 00:02:02,040 At this point, we are also going to introduce angular components styling. 24 00:02:02,040 --> 00:02:06,500 We are going to talk about the core energy class and energy style directives. 25 00:02:06,510 --> 00:02:08,860 We are going to learn when to use them and why. 26 00:02:09,030 --> 00:02:10,820 What are the main use cases? 27 00:02:10,830 --> 00:02:16,200 We are then going to talk about the Energy Container Directive and we are going to provide a complete 28 00:02:16,200 --> 00:02:21,180 catalogue of the builtin pipes that you have available for formatting data. 29 00:02:21,570 --> 00:02:27,570 And at this point, the introductory part of the course is going to be completed and the rest of the 30 00:02:27,570 --> 00:02:33,060 course is going to be intermediate to advanced topics on the angular framework. 31 00:02:33,390 --> 00:02:38,640 The first intermediate topic that we are going to cover is local template queering. 32 00:02:38,640 --> 00:02:44,430 We are going to learn all about the future child and view children decorator's. 33 00:02:44,670 --> 00:02:47,220 After the local template queering section. 34 00:02:47,220 --> 00:02:50,670 We are going to learn about angular content projection. 35 00:02:50,670 --> 00:02:54,840 We are going to learn all about content projection, when to use it and why. 36 00:02:55,110 --> 00:02:57,600 What are its key use cases? 37 00:02:57,600 --> 00:03:03,030 We are going to learn about the energy content directive and we are going to learn about multi Slote 38 00:03:03,030 --> 00:03:09,720 projects and we are going to learn everything about handling programmatically projective elements, 39 00:03:09,900 --> 00:03:16,170 using the content child and content children decorator's after the content projection part. 40 00:03:16,170 --> 00:03:19,650 We are going to learn everything about angular templates. 41 00:03:19,920 --> 00:03:24,660 And what I mean by that is the engy template tag template Parcel's. 42 00:03:24,660 --> 00:03:30,750 We are going to learn how to use templates as inputs to other components and we are also going to learn 43 00:03:30,750 --> 00:03:36,810 how to dynamically instantiate templates using the Engie Template Outlet Directive. 44 00:03:36,810 --> 00:03:40,680 Next, we are going to do a deep dive on angular electives. 45 00:03:40,680 --> 00:03:45,270 We are going to learn how to build our own custom angular directive's from scratch. 46 00:03:45,270 --> 00:03:52,770 We are going to learn about the host binding and host listner decorator's and the expert as Directive's 47 00:03:52,770 --> 00:03:53,460 Syntex. 48 00:03:53,760 --> 00:04:00,150 We are going to learn in detail how to build our own custom structural directive's, very similar to 49 00:04:00,180 --> 00:04:02,520 Engy four and NGF. 50 00:04:02,670 --> 00:04:07,080 Next, we are going to do a complete section on Angular View Encapsulation. 51 00:04:07,320 --> 00:04:13,140 We are going to talk about the multiple special access selectors related to view encapsulation, such 52 00:04:13,140 --> 00:04:16,860 as, for example, host host context or Engy Deep. 53 00:04:17,220 --> 00:04:22,800 We are then going to talk about the multiple modes of view encapsulation and we going to compare default 54 00:04:22,800 --> 00:04:26,190 view encapsulation with shadow dom encapsulation. 55 00:04:26,460 --> 00:04:32,760 At this point in the course we have a solid foundation on the angular view layer, everything that has 56 00:04:32,760 --> 00:04:34,650 to do with building the view. 57 00:04:34,980 --> 00:04:38,040 Next, we are going to move on to the service layer. 58 00:04:38,070 --> 00:04:43,740 We are going to learn how to build our own custom angular injectable services and we are going to talk 59 00:04:43,740 --> 00:04:45,780 about the injectable decorator. 60 00:04:46,200 --> 00:04:53,580 We are also going to learn about the angular EDP client as an example of a built in injectable service. 61 00:04:53,970 --> 00:04:59,790 We are going to learn how to use the sync by of ANGULAR in order to display on the screen. 62 00:05:00,230 --> 00:05:06,830 Observable data streams next, we are going to do a complete guided tour on the angular dependency injection 63 00:05:06,830 --> 00:05:07,390 system. 64 00:05:07,400 --> 00:05:14,060 We are going to learn exactly what these dependency injection and what are its main benefits and use 65 00:05:14,060 --> 00:05:20,000 cases where going to learn in particular how the angular dependency ejection system works under the 66 00:05:20,000 --> 00:05:24,880 WHO would cover in detail providers and injection tokens. 67 00:05:25,130 --> 00:05:30,180 We are going to write our own provider and factory function from scratch. 68 00:05:30,200 --> 00:05:36,020 We are going to build our own injection Tolkan from scratch and we are going to explore in detail how 69 00:05:36,020 --> 00:05:39,350 the radical dependency injection system works. 70 00:05:39,890 --> 00:05:46,990 Next, we are going to understand exactly what are clickable providers and what are their benefits. 71 00:05:47,270 --> 00:05:52,460 We are then going to build our own three sacrebleu provider from scratch. 72 00:05:52,790 --> 00:05:59,270 The next section of this course is going to cover an adverse topic of ANGULAR, which is change detection. 73 00:05:59,510 --> 00:06:04,310 We are going to learn exactly what change detection is, how it works under the hood. 74 00:06:04,310 --> 00:06:10,070 We are going to start by covering the default change detection mechanism of ANGULAR, which is on by 75 00:06:10,070 --> 00:06:10,760 default. 76 00:06:11,120 --> 00:06:18,320 You are then going to cover in detail an alternative also built in change detection mode called on Bush. 77 00:06:18,740 --> 00:06:23,480 These will provide some extra performance to our applications, but there is a tradeoff. 78 00:06:23,480 --> 00:06:25,070 It's a bit trickier to use. 79 00:06:25,250 --> 00:06:28,490 So we are going to cover some of its main pitfalls. 80 00:06:28,820 --> 00:06:34,670 We are going to learn how to handle observable data streams with unposed change detection, and we are 81 00:06:34,670 --> 00:06:38,990 going to learn how to build our own custom change detection mechanism. 82 00:06:39,200 --> 00:06:45,680 If we need it in the next section, we are going to learn everything about angular component lifecycle 83 00:06:45,680 --> 00:06:46,160 hooks. 84 00:06:46,160 --> 00:06:49,790 We are going to cover every single life cycle hook available. 85 00:06:49,970 --> 00:06:52,520 Where are we to understand its main use cases? 86 00:06:52,730 --> 00:06:59,000 We are going to understand when to use its lifecycle hook and also when not to use it. 87 00:06:59,150 --> 00:07:06,080 We learn some of the main pitfalls that we are likely to run into when using component lifecycle hooks. 88 00:07:06,380 --> 00:07:10,910 Next, we are going to learn in detail all about angular modules. 89 00:07:10,910 --> 00:07:15,980 We are going to be building our own custom application feature module from scratch. 90 00:07:16,370 --> 00:07:19,940 Next, we are going to cover angular internationalization. 91 00:07:19,940 --> 00:07:26,270 We are going to learn how to take an angular application written in one language and translate it into 92 00:07:26,270 --> 00:07:27,740 multiple languages. 93 00:07:27,980 --> 00:07:33,740 We are going to learn how to use the angular clay to make the process easier, and we're going to simulate 94 00:07:33,740 --> 00:07:41,720 the complete translation process of our application to an alternative language to complete our course. 95 00:07:41,720 --> 00:07:44,420 We are going to talk about angular elements. 96 00:07:44,420 --> 00:07:50,900 We want to learn exactly what is an angular element and what are some of the main benefits and use cases 97 00:07:51,110 --> 00:07:57,470 of angular elements and of the browser built in custom elements, mechanism in general. 98 00:07:57,740 --> 00:08:04,100 And with this last section of the course, you will now have a solid understanding of the angular framework. 99 00:08:04,100 --> 00:08:10,100 You will be familiar with the most commonly used concepts of the framework up until some of the most 100 00:08:10,100 --> 00:08:16,910 advanced concepts, such as, for example, custom change detection, angular elements and much more. 101 00:08:17,180 --> 00:08:19,640 So I hope that you will enjoy the course. 102 00:08:19,640 --> 00:08:24,320 And if you have any issues or questions, please let me know in the comments section. 103 00:08:24,560 --> 00:08:29,720 And without further ado, let's get started learning angular core together. 104 00:08:30,080 --> 00:08:33,710 I want to thank you for watching and I will see you inside because.