angular5实现简单的SPA页面

1.首先你的确保你的MAC上已经安装angular5

2.在终端通过命令 ng g angular --routing创建一个新的项目工程

3.打开这个工程的src/app,你会惊奇的发现比正常创建的工程多了个app-routing.model.ts;不要惊讶,每个带有路由的angular应用都有一个Router服务的单例对象.当浏览器的url变化时,路由会查找对应的Route(路由),并决定显示那个组件.所以,最终我们要实现的SPA页面是对过对app-routing.model.ts中routes数组的操作

4.angular5的路由导航有下面的5个关键核心

1.routes:所有的路由信息都在这里进行配置(在routing模块中)
2.router-outlet:插座标识,所有需要切换的组件,都会被显示在<router-outlet></router-outlet>下面
3.router:导航对象,通过调用该对象的方法,实现路由切换
4.routerLink :结合a标签使用,进行路由切换

5.ActivatedRoute,利用这个对象可以获取信息和穿过去的参数

开始我们的表演:

在WebStorm中在命令行中依次输入ng g compontent home/myHeader/myFooter/product/code404 分别创建5个组件

angular5实现简单的SPA页面

5.打开app.conponent.html 创建以下3个标签

<app-my-header></app-my-header>
<!--路由切换位置
将来通过路由显示的组件都会在该标签下方
-->
<router-outlet></router-outlet>
<app-my-footer></app-my-footer>

在这里我们要创建一个头部和尾部不发生变化的SPA页面,<router-outlet></router-outlet>是关键

6.打开my-header.component.html 在这里将通过2中方式来进行路由跳转,一种是通过routerLink,第二种是通过router:导航对象,通过调用该对象的方法,实现路由的切换;其中其他的几个组件html样式自己可以进行简单的设置

<div class="wrapper">
  <h1>我是头部</h1>
  <!--路由跳转-->
  <a [routerLink]="['/']">展示首页</a>
  <a [routerLink]="['/product']">展示商品</a>
  <!---->
  <input type="button" value="显示商品" (click)="doClick()">
</div>

7.打开app-routing.model.ts,我们进行第一种方法的实现,在这里顺便讲下网页的重定向

const routes: Routes = [
  //重定向路由
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  //设置home组件的路由
  {
    path: 'home',
    component: HomeComponent
  },
  //设置product组件的路由
  {
    path: 'product',
    component: ProductComponent
  },
  {
    //通配路由是"**'
    path: '**',
    component: Code404Component
  }
];

8.第二种方法的实现,打开my-header.component.ts

export class MyHeaderComponent implements OnInit {
  //依赖注入
  constructor(private router: Router) { }

  ngOnInit() {
  }
  //点击跳转
  doClick() {
    //使用router进行路径的跳转
    this.router.navigate(['/product']);
  }
}

9.在命令行输入 npm start

angular5实现简单的SPA页面

相关推荐