Websites with Angular and Less CSS tutorials
5. Single Page Applications explained
av_timer2 minute read

So I'm guessing the people who write the code for you are a tad late, aren't they?

  1. Topics of discussion
  2. Single page applications explained

1. Topics of discussion

In this tutorial, we are going to discuss what a single page app is and how it works. So, let's have some fun.

2. Single page applications explained

In the previous tutorial, we talked about how in our project we only have a single place where we define the necessary html tags for a page. And that place is our index.html page.

Some of you may be wondering: "But what about our components? Don't they have like an html template which is sort of like their page? And what about those routes you may or may not have mentioned in detail?". And the explanation for that is the following.

An html file is defined as a text file that contains contains html language written in it. However, in order for the file to be considered a page, it must contain the <html></html> tags in it and also be marked as an html document with the doctype tag. Let's look at our index.html file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>RecipeSite</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>

As you can see, the first line of the file contains an instruction that sets the type of the file to html. Afterwards, we have an opening <html> tag and inside of it, we have some meta tags, a tag with which we set the title of the website,  a base tag which is used for Angular routing and a link tag which, contrary to its name, isn't used to insert a URL in the page. Rather, it's used to set the icon next to the site name that we talked about earlier.

However, what actually gets displayed in your page goes into the body tag. As you can see, we have the app-root element, which tells Angular to look for the component with that selector name and insert the html from its template inside that element.

Let's compare the index.html page to our app.component.html page:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</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://angular.io/cli">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>
<router-outlet></router-outlet>

As you can see, it's still html code, but the beginning tags from the index.html file are absent.

So the next question to answer is this: "If we have only one page, how are we supposed to show different content when one decides to navigate through our website?". And the answer is simple: we replace the content inside the body tag. Yeah, your heard that right. For each route we will define in future tutorials, we will have a separate component and when we navigate to that root, the content inside the body tag will be changed.

And this is where the name single page application appeared from. The idea behind SPAs is to allow navigating a website without the need to constantly refresh the browser page and to constantly load up all the scripts and styles, which is a very costly process, time wise.

That about covers it for this tutorial. In the next one, we are starting our coding by creating a navigation component and also adding a few plugins to our app. See you then.

COMMENTS
No comments yet...