Presenter: Jesse Webb
Subject: How to Create a Directive
Duration: 00:08:03
00:00:05.280 --> 00:00:13.274 - This is a training video on how to make a directive in the sev
00:00:13.274 --> 00:00:18.696 - 2020.3 implementation. So you are tasked with making a a
00:00:18.696 --> 00:00:23.700 - directive in angular JS for the will say on the product details
00:00:23.700 --> 00:00:27.453 - page. It's something that's different enough that can just
00:00:27.453 --> 00:00:29.955 - be done in HTML override by
00:00:29.955 --> 00:00:34.156 - changing. Some setting or text so you have to make a whole new.
00:00:35.060 --> 00:00:38.954 - The whole event directive, the 1st place you'll start is just
00:00:38.954 --> 00:00:43.556 - take a look at whatever is close enough to what you're doing for
00:00:43.556 --> 00:00:46.034 - a great jump off point, say the.
00:00:46.590 --> 00:00:48.850 - Client in this case needed.
00:00:50.020 --> 00:00:54.940 - A a default message to appear if this their product doesn't have
00:00:54.940 --> 00:00:56.990 - a short. A short description.
00:00:59.550 --> 00:01:04.898 - So we will. We will go ahead and make 2 new files right. Will
00:01:04.898 --> 00:01:10.246 - make a copy of say our old short description and a copy of the
00:01:10.246 --> 00:01:12.156 - TypeScript an of the HTML.
00:01:13.890 --> 00:01:18.520 - There are several things that make up this as a.
00:01:20.330 --> 00:01:22.772 - Sector is a directive for angular JS, so we'll go over
00:01:22.772 --> 00:01:23.882 - them one at a time.
00:01:24.600 --> 00:01:30.270 - 1st is the name of the class. The name of the object in the
00:01:30.270 --> 00:01:31.890 - code that is our.
00:01:34.370 --> 00:01:37.050 - Is directive, but it is the controller for a directive.
00:01:38.370 --> 00:01:42.143 - As you can see, it's present in several places. It's the
00:01:42.143 --> 00:01:45.573 - directive itself. At the lower part of our module here.
00:01:46.460 --> 00:01:48.440 - Knows that this object.
00:01:49.660 --> 00:01:53.287 - Exported above with these properties and functions and the
00:01:53.287 --> 00:01:56.511 - constructor and all the dependencies is its controller.
00:01:56.511 --> 00:02:00.541 - That's AngularJS way of knowing that in another important place
00:02:00.541 --> 00:02:05.377 - is how we refer to the controller in the HTML. So right
00:02:05.377 --> 00:02:06.989 - here we have given.
00:02:08.540 --> 00:02:11.644 - Camel cased version of the product. Short description
00:02:11.644 --> 00:02:12.420 - Alt control.
00:02:13.710 --> 00:02:17.158 - And up here the.
00:02:18.540 --> 00:02:21.627 - The first argument in the directive function.
00:02:22.740 --> 00:02:27.360 - Is essentially what's going to do in angular JS. Specifically,
00:02:27.360 --> 00:02:28.746 - build our selector.
00:02:30.290 --> 00:02:33.290 - So we'll keep note of that, and finally.
00:02:34.810 --> 00:02:40.640 - The path to the HTML file that is the template so.
00:02:41.380 --> 00:02:44.604 - Copying from any other TypeScript file will have
00:02:44.604 --> 00:02:47.828 - given you the handy filter course link function.
00:02:49.470 --> 00:02:53.214 - And we'll just look at what the HTML looks like for our new.
00:02:54.090 --> 00:02:55.238 - Directive we made it.
00:02:56.960 --> 00:03:01.530 - Here in the short description Alt dot HTML, we've decided
00:03:01.530 --> 00:03:06.585 - that. It's all eight state. We're using our product. Short
00:03:06.585 --> 00:03:11.035 - description, alt control as the controller as and we've decided
00:03:11.035 --> 00:03:15.485 - that if there is an alt description present, we will.
00:03:16.520 --> 00:03:17.350 - Show that.
00:03:18.920 --> 00:03:21.380 - There are seven. There are two other know few other
00:03:21.380 --> 00:03:22.610 - things you need to do.
00:03:23.930 --> 00:03:27.152 - Ticket this to build before we
00:03:27.152 --> 00:03:31.762 - continue. You have your TypeScript file specifically
00:03:31.762 --> 00:03:37.394 - right here and we've decided to put that in framework store
00:03:37.394 --> 00:03:43.026 - product controls in many, many of these folders, you'll see a
00:03:43.026 --> 00:03:45.870 - references TypeScript. 4.
00:03:46.940 --> 00:03:51.000 - The current types TypeScript, builder and minifier that we use
00:03:51.000 --> 00:03:55.466 - called gulp. There needs to be these reference dot TS files
00:03:55.466 --> 00:04:00.338 - presence so we need to make sure we include our new file.
00:04:01.490 --> 00:04:07.859 - Right here there's also another spot in the actual CSS product
00:04:07.859 --> 00:04:10.175 - CSS project file itself.
00:04:10.810 --> 00:04:14.700 - Both the HTML of our.
00:04:16.050 --> 00:04:20.586 - Our modules and the TypeScript of our modules is
00:04:20.586 --> 00:04:25.626 - presence, so we want to make sure that they're both
00:04:25.626 --> 00:04:30.162 - referenced and set under the types TypeScript compile key.
00:04:32.190 --> 00:04:32.750 - Ah.
00:04:34.120 --> 00:04:38.310 - That's that, so we've got that. We've made our directive.
00:04:38.870 --> 00:04:44.725 - Now. We want a We want to apply it. We want to turn to use it.
00:04:44.725 --> 00:04:47.838 - So here we have a standard product details page in self.
00:04:49.060 --> 00:04:55.144 - And we can see here that it is the standard CF dash product
00:04:55.144 --> 00:04:56.548 - short description module.
00:04:57.600 --> 00:05:03.072 - What we want to do then is there now are override for
00:05:03.072 --> 00:05:06.720 - the product details dot HTML. Let's change short
00:05:06.720 --> 00:05:10.368 - description too. Short description alt. Now this is
00:05:10.368 --> 00:05:13.104 - the selector mentioned earlier in the.
00:05:14.280 --> 00:05:15.220 - TypeScript file.
00:05:17.900 --> 00:05:20.068 - In angular JS our.
00:05:21.410 --> 00:05:25.814 - Our selector is built off of UN camel casing. The first argument
00:05:25.814 --> 00:05:29.851 - in the directive function that is where there is a capital
00:05:29.851 --> 00:05:35.420 - letter. A instead please A dash and in front of it and lower
00:05:35.420 --> 00:05:37.700 - case it again for our HTML.
00:05:38.700 --> 00:05:41.499 - So as simple as that we have over here.
00:05:42.950 --> 00:05:43.430 - Our.
00:05:45.570 --> 00:05:46.190 - Pardon me.
00:05:47.450 --> 00:05:50.778 - Will change it to short description Alt and.
00:05:51.820 --> 00:05:54.898 - What we wanted to do is.
00:05:56.120 --> 00:06:00.190 - Put a default. We've decided that this would be called
00:06:00.190 --> 00:06:03.039 - Alt. Description will put our default in.
00:06:04.290 --> 00:06:08.490 - But over here this is the original module. There's really
00:06:08.490 --> 00:06:13.110 - no in our scope, no way to bind to this controller.
00:06:13.730 --> 00:06:17.668 - And Alt description, so we've decided to add 1 over here.
00:06:18.510 --> 00:06:22.227 - Note I bind to controller is set to true.
00:06:23.800 --> 00:06:28.376 - And we have built a placeholder reference for
00:06:28.376 --> 00:06:30.092 - this scope variable.
00:06:31.870 --> 00:06:37.030 - And to use that, we'll we decided with a string, so we're
00:06:37.030 --> 00:06:41.760 - going to just make it be a string. Please contact a
00:06:41.760 --> 00:06:43.050 - customer service representative.
00:06:44.910 --> 00:06:49.890 - And since we have had our gulp watch working this.
00:06:50.600 --> 00:06:55.664 - Whole time for us we will go back to our product details
00:06:55.664 --> 00:07:03.042 - page. Refresh it and we note that our new module is present
00:07:03.042 --> 00:07:05.370 - an working exactly as.
00:07:07.030 --> 00:07:10.391 - We want. As simple as a new directive, as
00:07:10.391 --> 00:07:12.329 - this is a lot of the.
00:07:13.710 --> 00:07:17.320 - All of the procedure is going to be the same.
00:07:18.300 --> 00:07:21.282 - Note you'll need you. You need a
00:07:21.282 --> 00:07:26.164 - a. Controller with a unique name or I'd rather a class with a
00:07:26.164 --> 00:07:31.321 - unique name. You need to fill the directive out as follows
00:07:31.321 --> 00:07:32.608 - with the Selector.
00:07:34.140 --> 00:07:39.805 - The whatever scope variables you like, you need to make sure
00:07:39.805 --> 00:07:42.895 - you're linking to your new HTML.
00:07:44.060 --> 00:07:47.998 - You need to write. Make sure the directive is referencing it's
00:07:47.998 --> 00:07:50.504 - it's class, it's controller class up here.
00:07:51.390 --> 00:07:56.213 - And you need to make sure it is referenced in the index files.
00:07:56.213 --> 00:07:59.923 - The reference dot TS files and the CS project files.
00:08:01.450 --> 00:08:03.430 - Eating a simple directive and stuff.