黑马程序员技术交流社区

标题: 【广州前端首发】Angular5语法核心课程（五） [打印本页]

作者: AreYouGlad 时间: 2018-1-20 19:53
标题: 【广州前端首发】Angular5语法核心课程（五）
本帖最后由 AreYouGlad 于 2018-1-20 19:53 编辑

商品管理综合案例

接口获取商品列表

地址：http://vue.studyit.io/api/getprodlist
请求方式：GET
请求参数：无
返回数据格式

[JavaScript] 纯文本查看 复制代码

{

        // 0代表正常，其他则异常

        status: 0,

        // 商品列表

        message: [

                {

                        id: 1,

                        name: '奔驰',

                        ctime: '2017-08-26T08:37:18.000Z'

                },

                {

                        id: 2,

                        name: '宝马',

                        ctime: '2017-08-25T06:32:14.000Z'

                },

                ...

        ]

}

删除商品

地址：http://vue.studyit.io/api/delproduct/:id
请求方式：GET
请求参数：id
返回数据格式

[JavaScript] 纯文本查看 复制代码

{

        // 0代表正常，其他则异常

        status: 0,

        // 删除结果

        message: "删除品牌数据ok"

}

添加商品

地址：http://vue.studyit.io/api/addproduct
请求方式：POST
请求参数：name
参数格式 : FormData
返回数据格式

[JavaScript] 纯文本查看 复制代码

{

        // 0代表正常，其他则异常

        status: 0,

        // 添加结果

        message: "添加成功"

}

实现

创建项目
公共header组件布局
公共footer组件布局

Angular4.x中的路由

单页应用程序（SPA Single Page Application）

单页应用，指的是在一个页面上集成多种功能，甚至整个系统就只有一个页面，所有的业务功能都是它的子模块，通过特定的方式挂接到主界面上。
它是AJAX技术的进一步升华，把AJAX的无刷新机制发挥到极致，因此能造就与桌面程序媲美的流畅用户体验。
例如: 网易云音乐，切换页面音乐依然继续播放，典型的单页应用程序

什么是路由

在web开发中，路由是指根据URL找到能处理这个URL的程序或模块。
比如在www.http：//baidu.com/login中，/login就是当前url的路由

Angula4.x在项目中配置路由

新建home、news、newscontent三个组件
[JavaScript] 纯文本查看 复制代码
```
ng g component home

ng g component news

ng g component newscontent
```
新建app-routing.module.ts ,并在app-routing.module.ts中引入模块
[JavaScript] 纯文本查看 复制代码
```
import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';
```

app-routing.module.ts中引入刚刚创建的三个组件

[JavaScript] 纯文本查看 复制代码

import { HomeComponent } from './home/home.component';import { NewsComponent } from './news/news.component';

import { NewscontentComponent } from './newscontent/newscontent.component';

app-routing.module.ts中配置组件

[JavaScript] 纯文本查看 复制代码

const routes: Routes = [ //路由组件是一个数组，每一个配置项为一个对象，分别有path(路径)，compontent(组件)等属性    {path: 'home', component: HomeComponent},

    {path: 'news', component: NewsComponent},

    {path: 'newscontent/:id', component: NewscontentComponent},

    { path: '', redirectTo: '/home', pathMatch: 'full' } //重定向，如果用户打开路径为''的时候自动重定向到home组件下；

    ];

app-routing.module.ts中配置模块暴露模块

[JavaScript] 纯文本查看 复制代码

@NgModule({     imports: [RouterModule.forRoot(routes)],

    exports: [RouterModule]

})

export class AppRoutingModule { }

在app.module.ts 引入刚才定义的路由
[JavaScript] 纯文本查看 复制代码
```
import { AppRoutingModule } from './app-routing.module';
```
app.module.ts里面的import注册这个路由模块
[JavaScript] 纯文本查看 复制代码
```
imports: [    BrowserModule,

    AppRoutingModule

    ]
```

找到app.component.html根组件模板，配置router-outlet显示动态加载的路由

[HTML] 纯文本查看 复制代码

<h1>    <a routerLink="/home">首页</a>

    <a routerLink="/news">新闻</a>

</h1>

<router-outlet></router-outlet>

Angular 默认跳转路由

[JavaScript] 纯文本查看 复制代码

//匹配不到路由的时候加载的组件 或者跳转的路由

{ path: '**', /*任意的路由*/

  redirectTo:'home'

}

任意路由加载不到时都跳转到/home下

Angular routerLinkActive设置routerLink默认选中路由

使用angular来做单页应用程序肯定有一个被激活的路由。在这里，angular给我们当前激活路由提供了一个class类，我们可以通过设置这个class的样式来显示

[HTML] 纯文本查看 复制代码

<h1>

    <a routerLink="/home" routerLinkActive="active">首页</a>

    <a routerLink="/news" routerLinkActive="active">新闻</a>

</h1>





.active{

    color:red;

    }

路由的动态传值

配置动态路由

[JavaScript] 纯文本查看 复制代码

const routes: Routes = [    {path: 'home', component: HomeComponent},

    {path: 'news', component: NewsComponent},

    {path: 'newscontent/:id', component: NewscontentComponent}, // id是不固定的，所以当一个参数传过去

    { path: '', redirectTo: '/home', pathMatch: 'full' }

];

获取动态路由的值

[JavaScript] 纯文本查看 复制代码

import { Router, ActivatedRoute, Params } from '@angular/router'; //引入路由模块constructor( private route: ActivatedRoute) {}

ngOnInit() {

    console.log(this.route.params);

    this.route.params.subscribe(data=>this.id=data.id); //通过subscribe方法订阅路由参数

    }

路由的js跳转

引入路由模块
[JavaScript] 纯文本查看 复制代码
```
import { Router } from '@angular/router';
```

初始化

[JavaScript] 纯文本查看 复制代码

export class HomeComponent implements OnInit {    constructor(private router: Router) { }

    ngOnInit() { } goNews(){

     this.router.navigate(['/news']); }//页面初始化的时候跳转到/news路由对应的页面下

}

路由跳转
[JavaScript] 纯文本查看 复制代码
```
this.router.navigate(['/news', hero.id]);
```

父子路由

路由下面还有衍生的路由

[JavaScript] 纯文本查看 复制代码

//父子路由配置如下{ path: 'news', component:NewsComponent,

    children: [

        { path:'newslist', component:NewslistComponent },

        { path:'newsadd', component:NewsaddComponent }

    ]

}



> 父子路由要在父路由组件中定义`router-outlet`

作者: AreYouGlad 时间: 2018-1-20 19:53

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2