Gettin’ Started with Angular 5 (Part 2) — About that Data thing
Ok, so you’ve got an Angular 5 application up, it’s serving a page that looks kinda like this:
But that’s not what you want your application to say, or look like. That’s ok — let’s dig into the project structure a little bit, and we can make it say something very different very quickly — fun!
First, you’re going to want some sort of code editor to be able to interact with your files. I like WebStorm, but you can use Sublime Text (free), Atom (free), Visual Studio (free) or many other editors.
Breaking down the data structure
If you use your code editor to open the folder where your project is held, you’ll see something that looks like this (depending on your code editor). Don’t worry about reading these images too closely, I’ll explain in the text.
The Angular-cli has created a whole bunch of files for you to be able to serve your project. There are two main folders that you can pretty much ignore (for now) — node_modules and e2e. These folders contain code that is from “outside packages” that helps to run your Angular project.
All of the files that we’ll be starting out with live in your src folder. If you expand that, you’ll see a number of files — again, you don’t need to look too closely.
Ok phew! That’s a lot of files and folders. Could be a little overwhelming, but we’re ignoring most of them. Let’s take a little bit of a deeper look, though, at one file in particular, which is really critical to your app. If you open the file index.html, you’ll see some code that is listed on the right. This is the page that gets served and displays your entire application.
Crazy, right? But it’s got some really important parts. So let’s break them down.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>FirstApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>First, there’s the doctype tag. This tells the browser to read the file as a particular version of html (HTML5 in this case). Then there’s an html declaration, with some meta information, a title, and finally in the body you see this little tag that looks like this <app-root></app-root>.
That little sucker is what makes your whole app work. If you cut those out of that index file, and save the file, you’ll notice that the whole app disappears!
Don’t worry, you can paste it back in, and it will all come back! You’ve just learned the second rule of Web Development. Cut code out and paste it back in, unless you’re sure you know what it’s going to do :)
But where are the words on the screen? You’ll notice they are a bit different. So head into your src -> app folder and you’ll notice some other files.
The first file I want you to open is app.component.html. This is a template file. Essentially, this is some html that Angular will use to display some information from your component. A component is basically a little chunk of code that you want to use somewhere. Components are pretty cool, because they are reusable, and you can change the data in them without needing to change the template code.
Ok, so if you’ve opened that file, you should see some code that looks something like this:
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>Take a look back at your browser window still at http://localhost:4200 with ng serve running in the terminal (yes, you have to leave that open) — does this look familiar? Yes! It’s the template being displayed. But you’ll notice something here — your browser probably doesn’t say Welcome to {{ title }}. It probably says something like Welcome to app! What you’re encountering is the first type of data-binding that Angular gives us, the ability to pass some data from the component into the template.
But where does that app word come from?
Open up app.component.ts. There, you’ll see some code that looks like this:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}Ok, so here’s what this does. The first line says “Hey Angular, this little snippet of code is a component — when you run it, use all of your component methods to make sure this works”. Then we have what is called the @Component decorator — this is the information about the component itself.
Notice app-root listed as the selector there? That matches up with the <app-root> tags in the index.html file that I showed you earlier. It says, “hey angular, this is the code that is going to displayed wherever the <app-root> tag is used”.
Then you have the templateUrl — and that matches up with the file we just took a look at. That is telling angular — “hey angular, for this component, show all the data using this html template”.
Then styleUrls. I’m not going to explain this now, but basically in Angular 5 each component can have it’s own css styles. Cool!
Then you see the code that says export class AppComponent {} . That tells Angular, “hey, anything inside these curly braces powers this component”.
Inside THOSE curly braces is a little snippet that says title=`app`.
SO do me a favor now, and change that to title= `my first app`.
Save the file and go back to your browser. After it re-renders, you’ll see something that looks like this:
And voila! You’ve now used some basic data-binding to change data on the screen.
Right now you’re probably thinking “Bevin, why would I want to do that if I could just type the words on the screen”. I hear you, oh practical one, and I like the way you think — but you can do so many more things than just put a few words on a screen with this data-binding concept.
In Part 3, I’ve created a further exposé on Gettin’ Data from your Users!
