【广州前端首发】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 · AreYouGlad

帐号		自动登录	找回密码
密码			加入黑马

【广州前端首发】Angular5语法核心课程（五）

1 个回复