Angular creating a to-do app

Establish a route

After the previous section, remove the login component from the src/app/app.component.html

The first step:

Specify a datum path in src/index.html

The browser will download CSS, images, JS files according to this path, so the statement should be placed at the top of the header

<base href= "/" >

Step Two:

Introduction of Routermodule in Src/app/app.module.ts

Import {Routermodule} from "@angular/router";

Step Three:

Defining and Configuring routing arrays

Forroot is a static factory method

Routing sockets

Routed socket Load Logincomponent

Add a routed socket (outlet) to the app.component.html

Ok

After saving, the login component is missing.

Browser input Required: Http://localhost:4200/login

/login This is the routing

Another way is to use Redirectto route redirection to direct the home page to the login route

In the route definition array, add a route definition, as follows

Then the browser input: http://localhost:4200/, enter, browser address into: Http://localhost:4200/login

PS: Note that ANGULAR2 uses the "first match priority" principle, if a path can match multiple routes, the first matching rule will prevail, so the order of routing configuration is very important.

Detach route

If all the routes are maintained in app.module.ts, bad management, preferably alone

New File Src/app/app.routes.ts

Import {Routes,routermodule} from "@angular/router", import {logincomponent} from "./login/login.component"; import {Mo Dulewithproviders} from "@angular/core"; export const routes:routes=[    {        path: ' Login ',        component: Logincomponent    },    {        path: ',        redirectto: ' Login ',        pathmatch: ' Full '    }];export const Routing:modulewithproviders=routermodule.forroot (routes);

　　

and introduce routing in app.module.ts.

Save, open Browser, view, effect and the same as before, just in the background we will separate the route separately out, the separation succeeds!

OK, here's the route section.

Angular creating a to-do app