1 00:00:00,180 --> 00:00:07,290 In this lecture, we are going to explore the different ways of injecting services by default, Angular 2 00:00:07,290 --> 00:00:09,840 does not make our classes injectable. 3 00:00:10,110 --> 00:00:14,880 We must tell Angular which of our classes can be injected into components. 4 00:00:15,180 --> 00:00:18,150 There are three ways of making a class injectable. 5 00:00:18,390 --> 00:00:20,400 We will go over each method. 6 00:00:20,730 --> 00:00:24,630 For starters, we will be working in the mobile service file. 7 00:00:27,090 --> 00:00:32,070 Above the class, we are decorating the class with the injectable decorator. 8 00:00:32,460 --> 00:00:40,230 This decorator can be imported via the angular core package by adding this decorator to a class. 9 00:00:40,500 --> 00:00:44,790 It'll tell Angular the class can be injected into a component. 10 00:00:45,480 --> 00:00:51,240 This decorator has one argument, which is an object of configuration options. 11 00:00:51,570 --> 00:00:54,660 We have one option called provided in. 12 00:00:57,190 --> 00:01:02,920 This option will tell Angular where to expose the service by setting it to route. 13 00:01:03,220 --> 00:01:10,330 The service will be injectable from the root injector, therefore it can be injected into any component 14 00:01:10,330 --> 00:01:11,110 in our app. 15 00:01:11,470 --> 00:01:18,340 Ninety nine percent of the time you will want to set this option to root, this is the most popular 16 00:01:18,340 --> 00:01:20,470 way to make a class injectable. 17 00:01:20,680 --> 00:01:28,480 However, let's go over the other two methods for making a class injectable, regardless of how classes 18 00:01:28,480 --> 00:01:29,530 are injected. 19 00:01:29,740 --> 00:01:32,830 We must always add the injectable decorator. 20 00:01:33,400 --> 00:01:38,800 Another way of registering an injectable service is through modules and components. 21 00:01:39,160 --> 00:01:45,910 If we don't want to make our service globally available, we can specify where our service can be injected 22 00:01:45,910 --> 00:01:48,040 through a module or component. 23 00:01:48,430 --> 00:01:53,440 First, we must remove the provided in option from the decorator. 24 00:01:55,820 --> 00:01:59,180 Next, let's open the shared module file. 25 00:02:01,660 --> 00:02:06,190 At the top of the file, we will import the modal service object. 26 00:02:08,699 --> 00:02:15,360 We are importing the modal service object inside the shared module, since it is the only part of our 27 00:02:15,360 --> 00:02:20,250 app that needs this service inside the engine module decorator. 28 00:02:20,430 --> 00:02:23,040 We will add an array called providers. 29 00:02:25,510 --> 00:02:29,260 We haven't had the opportunity to talk about the provider's array. 30 00:02:29,590 --> 00:02:33,190 It is one of the options we glanced over in a previous section. 31 00:02:33,490 --> 00:02:36,220 It's completely optional to add this option. 32 00:02:36,640 --> 00:02:39,790 The providers option is an array of services. 33 00:02:40,060 --> 00:02:43,660 We must declare our mobile service inside this option. 34 00:02:43,960 --> 00:02:47,440 We will add the mobile service object to this option. 35 00:02:50,000 --> 00:02:54,200 Let's refresh the page in their browser with the developer tools opened. 36 00:02:56,740 --> 00:03:03,790 Under the console panel, the visible property will continue to be logged by registering a service with 37 00:03:03,790 --> 00:03:04,540 a module. 38 00:03:04,660 --> 00:03:10,720 It'll be available to components, directives and pipes declared in the same module. 39 00:03:11,140 --> 00:03:15,580 Everywhere else will not have access to the service back in the ED. 40 00:03:15,760 --> 00:03:22,030 I will come and tell the providers option and import statement for the modal service object. 41 00:03:24,650 --> 00:03:30,590 We can register services with components, open the mobile component class file. 42 00:03:33,020 --> 00:03:35,660 Typically, we would import the service. 43 00:03:35,900 --> 00:03:42,950 However, we're already importing the mobile service object, we can move on to the second step, which 44 00:03:42,950 --> 00:03:46,820 is to add the providers option to the component decorator. 45 00:03:47,210 --> 00:03:49,970 This option will be an array of services. 46 00:03:50,300 --> 00:03:53,240 We will pass in the modal service object. 47 00:03:55,750 --> 00:03:58,150 Let's refresh the page one more time. 48 00:04:00,720 --> 00:04:07,200 The service is still injectable, however, it can only be injected into a single component. 49 00:04:07,620 --> 00:04:08,070 Thank you. 50 00:04:08,080 --> 00:04:12,960 That gives us a lot of flexibility with how far a service can be injected. 51 00:04:13,410 --> 00:04:20,370 You can inject services on a global level, module level or component level for this course. 52 00:04:20,610 --> 00:04:24,600 We are going to stick to injecting services on a global level. 53 00:04:24,960 --> 00:04:28,980 Back in our ED, we will comment out the providers option. 54 00:04:31,540 --> 00:04:38,260 Do not comment the important statement for the modal service object, the constructor function needs 55 00:04:38,260 --> 00:04:43,600 this object for type annotation back over to the modal service file. 56 00:04:43,780 --> 00:04:47,860 We will work for the changes we made to the injectable decorator. 57 00:04:50,570 --> 00:04:51,920 Our service is ready. 58 00:04:52,250 --> 00:04:59,090 We will make one more change before moving forward and the modal component file, we will remove the 59 00:04:59,090 --> 00:05:00,350 console statement. 60 00:05:02,750 --> 00:05:04,190 We don't need it anymore. 61 00:05:04,430 --> 00:05:07,010 It's time to toggle the visible property. 62 00:05:07,310 --> 00:05:10,850 We will begin toggling this property in the next lecture.