zoukankan      html  css  js  c++  java
  • Angular建立待办事项应用

    建立路由

    接前一小节,在src/app/app.component.html把login组件去掉

    第一步:

    在src/index.html指定基准路径

    浏览器会根据这个路径下载css,图像,js文件,所以语句要放在header的最顶端

    <base href="/">

     第二步:

    在src/app/app.module.ts引入RouterModule

    import { RouterModule } from "@angular/router";

    第三步:

    定义和配置路由数组

    forRoot是一个静态工厂方法

    路由插座

    路由插座加载LoginComponent

    在app.component.html添加一个路由插座(outlet)

    ok

    保存之后发现,login组件不见了

    需要浏览器输入:http://localhost:4200/login

    /login这就是路由

     还有一个方法就是使用redirectTo路由重定向,将首页定向到login路由

    在路由定义数组中,增加一个路由定义,如下

    然后浏览器输入:http://localhost:4200/,回车,浏览器地址变成:http://localhost:4200/login

    ps:注意,angular2使用“先匹配优先”原则,如果一路径可以匹配多个路由,第一个匹配的规则为准,所以,路由配置的顺序是非常非常重要的。

     分离路由

    如果所有的路由都在app.module.ts中维护,不好管理,最好是单独出来

    新建文件src/app/app.routes.ts

    import { Routes,RouterModule } from "@angular/router";
    import { LoginComponent } from "./login/login.component";
    import { ModuleWithProviders } from "@angular/core";
    
    export const routes:Routes=[
        {
            path:'login',
            component:LoginComponent
        },
        {
            path:'',
            redirectTo:'login',
            pathMatch:'full'
        }
    ];
    
    export const routing:ModuleWithProviders=RouterModule.forRoot(routes);
    

      

    然后在app.module.ts引入routing

    保存,打开浏览器,查看,效果和之前的一样,只是在后台我们将路由单独分离出来了,分离成功!

    ok,路由部分就到这里

  • 相关阅读:
    [转]数据库优化方法(三)
    [转]根据性能监视器,分析性能瓶颈
    sqlserver获取表名,字段名
    VBA SQLServer 基本操作
    oracle常见权限分配
    oracle 里面定时执行任务,比如存储过程内容等
    cisco 路由配置
    cisco LAN
    mongodb的启动参数--quiet
    mongodb的IO测试工具 mongoperf
  • 原文地址:https://www.cnblogs.com/1906859953Lucas/p/9775777.html
Copyright © 2011-2022 走看看