Learn how understanding templates is one of the keys of building Angular applications. Because of the new features in Angular, templates are a bit different, they can be stored inline as simple text strings, or use backticks for more complex HTML. Finally, they can be loaded as external documents.
Now, I want to hide these files, because we really just want to be able to work with the typescript files. So, I can do that in this particular editor I'm using Visual Studio Code, which is a really cool editor. I know you can do this in other editors as well, but in Visual Studio Code, what we're going to do is create a folder. This folder is going to start with a period, which means it's going to be invisible, and we're going to call it vscode, and then in here, we're going to create a settings file, and this will eventually configure some settings for us within Visual Studio Code, so I'll make a new file here, and it's going to be called settings.json and in this file, I want to grab some code that is going to hide all of the files that are not .ts files, so I'm going to switch over to a gist that I've created for that purpose, and once I'm at this gist, I can hit this "Raw" button.
That just makes it easier to copy, and I'm just going to copy these settings, and go back into my application, and I'm going to paste the files right here and hit save, and let's go ahead and close this out. And I may need to hit this refresh button, and what you should see is that anything that is not a .ts file will automatically hide, and this will just make it easier for us to see what's going on with our applications without seeing a lot of other .js or .js map files.
And so, if we go to the component right now, our template just has a headline level one, and this template property in the decorator lets us create html that is going to appear and replace our html tag called "app." If you remember in the index at html, we got this sort of tag that we created ourselves called "app," and whatever is in this template is going to be replacing that. So this is one way of working with your template. You can just put any html code you want here, so if you want to, you could put a paragraph tag here, and put in some other text for the paragraph.
(keyboard clicks) Alright, so let's go ahead and save that, and you have to make sure that your automation is running, so pull up the terminal, if you haven't already. Let's go ahead and type in the npm start command. Now if you're running the npm start command, you may need to refresh your browser. So, backticks, in addition to allow you to create more complex template, it lets you keep the template and the view together, so in some instances, especially for sort of shorter pieces and components, this makes a lot of sense.
Now, the third way to create a template is by using external files. So I'm going to create a partials folder, as well as an app.html file. Let's go ahead and close this app folder out, and somewhere in here, I'm going to make a folder, it's going to be called "partials," and in this folder, I'm going to create a file, and I'm going to call this app.html, and then I'm going to take the text that I typed in here, I can just copy and paste this piece right here, and paste that in app.html.
Let's go ahead and change the name here, just so that we can notice what happens when we change. So, let's save this, and right now it's still saying Artist Directory, because it's still picking the text from here, I haven't saved this file yet. And what we need to do is instead of template, use something called templateUrl. And, in here, we're going to refer to our partials and app.html file. Let's go ahead and save this, and we should see this update to Directory.
So, let's go ahead and switch it back to Artist Directory, and you should see it automatically update over here on the right. Let's go ahead and close up the terminal. You can leave your terminal running for the rest of the videos, or you can remember to run the npm start command whenever you want to preview what's goin' on with your application. So, you may be wondering what's best for which instance. If your application is super simple, then a regular template string is going to work just fine. If it's a little bit more complicated, then either template strings, using backticks, could be better or if the project is much more complex, I think that external files make more sense but it's really a matter of style.
Some people really like to keep everything in a single component file, and some people prefer to work with partials and different html documents.
In this course, Ray Villalobos shows you how to start using Angular 2 in your own projects. He starts by defining what exactly Angular 2 is and how it differs from AngularJS 1. Then, once the basics are out of the way, he sets up the template that will drive the project and starts coding. Ray shows how to divide your project into modules, work with events, style content with CSS, and create components and subcomponents. Plus, you can find out how to change content dynamically using data pipes.
Note: Members can find a template to download in the exercise files.
- What is Angular 2?
- Setting up a template
- Creating a simple component
- Using multiple modules
- Displaying data in templates
- Working with events
- Creating a subcomponent
- Filtering content through data pipes