In this lecture, we will look at how to further organize a component by splitting our component into
different files.
We can centralize everything in one file.
The business logic, HTML and CSS says, can be written in a single file.
However, this approach may not be the best way to write a component.
Before we dive into splitting our code into files, I think this would be an excellent opportunity to
talk about the MVC pattern.
The MVC pattern is popular among programming languages.
It's especially popular with convention over configuration frameworks.
It stands for a model view controller.
It's a pattern for how an app should be structured.
This pattern can be applied to components.
The words in MVC describe each piece of a component.
It sounds complicated, but it's not.
Once you know what each word is describing, the word model refers to the data in a component.
For example, let's say a component renders the user's profile information.
The data for the user can be considered the model if we're rendering a list of blog posts.
The blog posts would be regarded as the model.
The model can feed and manage data for a component.
The word vue refers to HTML and access.
It's the appearance of the component.
That's pretty much it.
It's self-explanatory.
Lastly, the word controller refers to the business logic of the component.
The responsibility of the controller is to manage the view and model.
The controller will ask the model for data.
It'll then give the data to the view.
If the View changes the data like a form submission, the controller will provide the updated data to
the model.
You can think of it as the middleman between the model and view.
It controls the logic of the components in angular.
The controller code would be written in the methods of a component class.
Angular makes it extremely easy to break our components into separate files.
We are going to continue working inside the app component file at the moment we're writing the template
in the component class.
Thus, we're not applying the MVC pattern inside the configuration object.
We're going to add a property called template URL.
The template your property can be added to point to an external HTML file.
This file will act as the template for the component.
Typically, the value for this property is an HTML file.
Conveniently, the default project comes with a template file for our component in the source slash
app directory.
We have a file called App Component Dot HTML.
There's a lot of code in this file.
We don't need to keep it around, the comment at the top says the following The content below is only
a placeholder and can be replaced.
Delete the template below to get started with your project.
Let's completely delete this template.
Next, let's add a pair of paragraph tags with a message seen as before.
It's time to load this file back in the component class.
We're going to set the template you are L property to the following dot slash app component Dot HTML.
The Dot and slash characters will tell Angular to search for the template in the same directory as the
class before we check out the browser.
Let's learn how to dynamically add styles to a component in the configuration object.
We will add a property called style URLs.
The value for this property is in a way we can apply multiple style sheets to eight components.
The array must contain a string of paths to the style sheets, like before the default project comes
with a style sheet for the app component.
It's called App Dot Component Access.
This file will be empty.
Let's change the paragraph element to the color orange.
We're changing the element to test if the style sheet works, that can be component.
We will add the app component access file to the style you URLs array.
Alternatively, we can a property called Styles to the component configuration.
It's also an array of styles.
The array can contain multiple inline styles.
We're not going to be applying inline styles.
We're going to comment out the template and styles properties.
We can't use the template and template URL property at the same time, we must use one or the other.
The same rule applies to these style URLs and styles properties angular will throw an error if we try
to add both properties.
Let's refresh the page in the browser.
Tara, we've got a functioning component.
It displays the message where the text color is orange.
We've separated the HTML from the component class.
Another way of saying it is separating the view from the controller.
We haven't had the opportunity to discuss how to create models.
This topic will be discussed in a future section.
We're mainly going to be focusing on the controller and view in the next lecture.
We will wrap this section up.