1 00:00:00,240 --> 00:00:06,300 In this lecture, we will look at how to further organize a component by splitting our component into 2 00:00:06,300 --> 00:00:07,380 different files. 3 00:00:07,680 --> 00:00:10,350 We can centralize everything in one file. 4 00:00:10,680 --> 00:00:15,900 The business logic, HTML and CSS says, can be written in a single file. 5 00:00:16,260 --> 00:00:20,490 However, this approach may not be the best way to write a component. 6 00:00:20,850 --> 00:00:27,000 Before we dive into splitting our code into files, I think this would be an excellent opportunity to 7 00:00:27,000 --> 00:00:29,130 talk about the MVC pattern. 8 00:00:29,730 --> 00:00:33,570 The MVC pattern is popular among programming languages. 9 00:00:33,900 --> 00:00:38,310 It's especially popular with convention over configuration frameworks. 10 00:00:38,610 --> 00:00:41,040 It stands for a model view controller. 11 00:00:41,370 --> 00:00:44,100 It's a pattern for how an app should be structured. 12 00:00:44,430 --> 00:00:47,250 This pattern can be applied to components. 13 00:00:47,700 --> 00:00:51,930 The words in MVC describe each piece of a component. 14 00:00:52,170 --> 00:00:54,370 It sounds complicated, but it's not. 15 00:00:54,390 --> 00:01:01,170 Once you know what each word is describing, the word model refers to the data in a component. 16 00:01:01,380 --> 00:01:06,330 For example, let's say a component renders the user's profile information. 17 00:01:06,660 --> 00:01:12,270 The data for the user can be considered the model if we're rendering a list of blog posts. 18 00:01:12,450 --> 00:01:15,300 The blog posts would be regarded as the model. 19 00:01:15,570 --> 00:01:18,990 The model can feed and manage data for a component. 20 00:01:19,590 --> 00:01:23,340 The word vue refers to HTML and access. 21 00:01:23,640 --> 00:01:25,560 It's the appearance of the component. 22 00:01:25,830 --> 00:01:26,940 That's pretty much it. 23 00:01:27,180 --> 00:01:28,680 It's self-explanatory. 24 00:01:29,220 --> 00:01:34,240 Lastly, the word controller refers to the business logic of the component. 25 00:01:34,590 --> 00:01:38,820 The responsibility of the controller is to manage the view and model. 26 00:01:39,420 --> 00:01:41,970 The controller will ask the model for data. 27 00:01:42,240 --> 00:01:44,580 It'll then give the data to the view. 28 00:01:44,910 --> 00:01:51,450 If the View changes the data like a form submission, the controller will provide the updated data to 29 00:01:51,450 --> 00:01:52,050 the model. 30 00:01:52,350 --> 00:01:55,980 You can think of it as the middleman between the model and view. 31 00:01:56,310 --> 00:02:00,330 It controls the logic of the components in angular. 32 00:02:00,360 --> 00:02:04,710 The controller code would be written in the methods of a component class. 33 00:02:06,220 --> 00:02:11,350 Angular makes it extremely easy to break our components into separate files. 34 00:02:11,680 --> 00:02:18,460 We are going to continue working inside the app component file at the moment we're writing the template 35 00:02:18,460 --> 00:02:19,930 in the component class. 36 00:02:20,200 --> 00:02:26,020 Thus, we're not applying the MVC pattern inside the configuration object. 37 00:02:26,170 --> 00:02:29,560 We're going to add a property called template URL. 38 00:02:32,220 --> 00:02:37,710 The template your property can be added to point to an external HTML file. 39 00:02:38,190 --> 00:02:41,250 This file will act as the template for the component. 40 00:02:41,670 --> 00:02:45,930 Typically, the value for this property is an HTML file. 41 00:02:46,320 --> 00:02:53,490 Conveniently, the default project comes with a template file for our component in the source slash 42 00:02:53,490 --> 00:02:54,690 app directory. 43 00:02:54,900 --> 00:02:59,100 We have a file called App Component Dot HTML. 44 00:03:01,790 --> 00:03:03,620 There's a lot of code in this file. 45 00:03:03,830 --> 00:03:10,340 We don't need to keep it around, the comment at the top says the following The content below is only 46 00:03:10,340 --> 00:03:12,770 a placeholder and can be replaced. 47 00:03:13,100 --> 00:03:16,460 Delete the template below to get started with your project. 48 00:03:17,000 --> 00:03:19,220 Let's completely delete this template. 49 00:03:21,710 --> 00:03:26,960 Next, let's add a pair of paragraph tags with a message seen as before. 50 00:03:29,520 --> 00:03:33,150 It's time to load this file back in the component class. 51 00:03:33,210 --> 00:03:41,100 We're going to set the template you are L property to the following dot slash app component Dot HTML. 52 00:03:41,640 --> 00:03:48,060 The Dot and slash characters will tell Angular to search for the template in the same directory as the 53 00:03:48,060 --> 00:03:50,820 class before we check out the browser. 54 00:03:51,030 --> 00:03:57,060 Let's learn how to dynamically add styles to a component in the configuration object. 55 00:03:57,240 --> 00:04:00,840 We will add a property called style URLs. 56 00:04:03,480 --> 00:04:09,810 The value for this property is in a way we can apply multiple style sheets to eight components. 57 00:04:10,140 --> 00:04:17,760 The array must contain a string of paths to the style sheets, like before the default project comes 58 00:04:17,760 --> 00:04:20,250 with a style sheet for the app component. 59 00:04:20,579 --> 00:04:24,210 It's called App Dot Component Access. 60 00:04:24,780 --> 00:04:26,430 This file will be empty. 61 00:04:26,700 --> 00:04:30,420 Let's change the paragraph element to the color orange. 62 00:04:32,970 --> 00:04:38,010 We're changing the element to test if the style sheet works, that can be component. 63 00:04:38,250 --> 00:04:44,340 We will add the app component access file to the style you URLs array. 64 00:04:47,520 --> 00:04:52,920 Alternatively, we can a property called Styles to the component configuration. 65 00:04:53,280 --> 00:04:55,230 It's also an array of styles. 66 00:04:57,870 --> 00:05:01,290 The array can contain multiple inline styles. 67 00:05:01,560 --> 00:05:04,380 We're not going to be applying inline styles. 68 00:05:04,680 --> 00:05:08,220 We're going to comment out the template and styles properties. 69 00:05:10,720 --> 00:05:17,650 We can't use the template and template URL property at the same time, we must use one or the other. 70 00:05:18,010 --> 00:05:25,390 The same rule applies to these style URLs and styles properties angular will throw an error if we try 71 00:05:25,390 --> 00:05:26,920 to add both properties. 72 00:05:27,100 --> 00:05:29,290 Let's refresh the page in the browser. 73 00:05:29,700 --> 00:05:32,440 Tara, we've got a functioning component. 74 00:05:32,710 --> 00:05:36,130 It displays the message where the text color is orange. 75 00:05:36,400 --> 00:05:39,910 We've separated the HTML from the component class. 76 00:05:40,270 --> 00:05:44,140 Another way of saying it is separating the view from the controller. 77 00:05:44,590 --> 00:05:48,520 We haven't had the opportunity to discuss how to create models. 78 00:05:48,790 --> 00:05:51,640 This topic will be discussed in a future section. 79 00:05:52,000 --> 00:05:56,920 We're mainly going to be focusing on the controller and view in the next lecture. 80 00:05:56,950 --> 00:05:58,870 We will wrap this section up.