Single Page Application Data Binding Form HTTP Request

Single Page Application


Angular is a framework designed for single page application by Google Corp, first released at September 14, 2016 (Angular 2.0). But what does Single Page Application mean? In short, every component is on the same page and shares the same template. From technical aspect, it's a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server (from wikipedia). I'll explain it by code in the following content.

Page Entrance -- index.html

For every website, we need to set an entrance. In most of the cases, there is a file called index.html, which is the most upper level HTML entry point.

In the 'body', the 'app-root' is the source 'router-outlet' (will explain it below), which can embed the 'app.component' into the index page. 'app-root' will be replaced by 'app.component.html' while the page is rendered. As you can see in decorator @component, the selector equals 'app-root' and the templateUrl is app.component.html. This function maps 'app-root' to 'app.component.html'. This is how it works. Then we can also embed multiple components into 'app.component'. The 'app.component.html' will show different content based on the routing. This is the charm of Single Page Application.

Routing and Navigation -- router-outlet

Based on Angular's official definition, router-outlet acts as a placeholder that Angular dynamically fills based on the current router state. I'll explain it by the following example.

This is the app.component.html file. As I talked before, it's the root of the whole application. If I run the server, the page is like this. The title - h1 is reflected in the webpage, however, there is nothing reflected by router outlet.

At this time, I'll create the routing module to specify some routings. You can create your angular project with command. --routing means activating the routing module

ng new yourAppName --routing

At the same time, I create a component called 'content' to serve as a sub page. The command is:

ng generate component content

Or shortly

ng g c content

The file hierarchy now looks like this

I define the routing rule. When you access by url - '/content', the page will navigate to Content Component. More specifically, the router outlet in the app.component.html will be replaced by content.component.html under content folder.

Now when I visit the page by sub url - '/content', it's like this this.


Now I've talked about the most basic aspect about Angular Single Page Application. For other topics, I'll keep update in my angular tutorial.