Popularizing science in knowledge blind areas

Website VS. Webpage:

• Website: A collection of web pages which are grouped together and usually connected together in various ways. Often called a “web site” or a “site.”

• Webpage: A document which can be displayed in a web browser such as Firefox, Google Chrome, Opera, Microsoft Internet Explorer or Edge, or Apple’s Safari. These are also often called just “pages.”

Webpage is a collection of web pages, which usually refers to the.html file.

Antecedents feed

In the Angular framework, a web page is composed of many components.

Take Up the Mainpage of my favorite website B as an example. At present, this page is called the Mainpage of the personal website of the boss. The Mainpage consists of many parts, including the background and personal information at the top, the navigation Dashboard in the middle, the content area and some small areas at the bottom. Together, these sections make up the page.

At this time, if we click the maximum playback of TA’s video, we will find that the following video content has changed dynamically, but when we go back to the address bar, we find that the web address has not changed, which is the dynamic interaction between the web page and the user realized by Javascript. Web pages are no longer static and immutable, but can change to some extent with the user’s actions.

But there are limits to this change! Because the frame of the web page is written in the HTML file, that is to say, the big frame can not move, only the content can move, such as the most played here and the latest release, and such as the number of fans played these numbers, are dynamic change.

Then we click on the contribution in the navigation board

You can obviously see that the layout of the page has changed,But not all!Smart friends at this time have gone to click on the address bar, found that the page address has changed! After the home page more “/video”, that is to say at this time we see is already another page!!

This function is called Routing.

The body of the

Routes

ng generate module app-routing --flat --module=app

Creating a RoutingModule in Angular is as simple as typing the above directives in the corresponding Web app folder. –flat and –module=app are optional.

The app will then generate the app-routing.module.ts file

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
Copy the code

(Note: the above code is not software native code, it is modified)

{routes in {path: ‘heroes’, component: “HeroesComponent”}, meaning that after adding ‘heroes’ to the home page address, the site dynamically generates a “HeroesComponent” that contains the corresponding content to be displayed to the user under the new url.

RouterOutlet

After arranging what should happen when the url is suffixed with ‘heroes’, we should also tell our web page how the new content should be laid out. As in the above example, after clicking “Contribute”, we found that the personal homepage information and navigation bar were not changed, only the content area below was changed. In other words, the HTML template for the page might look like this:

< personal home page information ></ Personal home page information >< Dashboard></Dashboard> <router-outlet></router-outlet>Copy the code

Router-outlet defines the layout of the new components of the web page generated after the route.

OK, this is actually the end of the page, now as long as we add “/video” after the address of the personal home page, the page will be directed to the “contribution” page. But can we expect users to know how to suffix their addresses? Internet products should always be designed with the principle that users are fools! (not

routerLink

So here’s the code:

<a routerLink="/heroes">Heroes</a>
Copy the code

After clicking on the Heroes link, the page is automatically directed to the “/ Heroes” page, and the corresponding component is generated and added to the corresponding location. Now you have navigation!

expand

redirect

Most of the time the user only knows the site address, that is, the address without the suffix, but sometimes that address does not correspond to a navigation page (although most of the time it does), and we want the user to enter the address to open the corresponding navigation page, which can look something like this:

{ path: '', redirectTo: '/dashboard', pathMatch: 'full' }
Copy the code

Add the redirection address to routes.

Return to the previous level

The function to return to the previous level is very simple, using the Location service, which calls location.back() to return to the previous level of the history page.