Angular4学习笔记(六):解耦

原创 2017年04月18日 00:43:47

代码已提交至GitHub
就目前为止,demo的结构已经被拆的很细很细。组件、服务、model之间已经分割开来,下一步的目标就是把界面做的好看一点。

目前界面看上去还是太简单,在这个看脸的世界里,完全活不下去。
太简单了!

至少做成这个样子:

这里写图片描述

在这之前,还可以做一些细微的拆分。

分离V和C

这是目前的主页组件gundam-host.component.ts,通过注解Component里的template导出的的GundamHostComponent共同组成了MVC里的V和C。
这里写图片描述

在目前的写法里是没问题的,因为界面比较简单。

但是如果界面很复杂,VC挤在一起就又会变的很臃肿。所以在调整界面之前,先把V和C分开。

注解@Component里除了提供了template属性外,还提供了temlateUrl属性。前者通过`(反单引号)包裹html代码来标示View,后者直接将指向的html文件导入进来成为View。

修改主页组件步骤

  1. 在host包下,新建html文件夹,文件夹内新建gundam-host.component.html文件。
    这里写图片描述
  2. 将gundam-host.component.ts中component属性里的html代码整个剪切进来。
    这里写图片描述
  3. 修改template属性为templateUrl,使其指向刚才新建的文件:
@Component({
  templateUrl: './html/gundam-host.component.html',
})

同理,分离detail页面和app.component.ts组件。
这里写图片描述

这里写图片描述

把V和C彻底的分离,以后在V上搞事情就方便多了。

组件嵌套

gundam-host.component.html文件中的代码,看起来有点不妥。虽然就目前而言只是简单的用一个div包裹了span标签进行数据展示,但是保不齐就span标签就会被其他复杂的界面所替代。而主页本身如果再复杂化(事实上 后期确实变的更复杂了),那么页面还是会变的臃肿不堪。

安全起见,先趁着界面简单的时候把功能单一重复的界面抽提出来,形成另一个组件。这样host组件最终会被拆分为大大小小的组件,而每一个组件之间相互独立,以打倒更大程度上的解耦。

angular有自己的一套方法,来解决组件嵌套组件和组件抽提的问题。

这个方法就是Compoent注解中的selector属性。

其实有关selector,在app.component.ts里也是有的。

这里写图片描述

通过在app.component.ts里声明selector属性,在public/index.html里进行使用,把整个angular的界面给装了进去。

这里写图片描述

所以现在觉得angular真的好省心啊,给了一堆积木想怎么拼就怎么拼。

下面开始抽提主页中的列表项,使其成为一个独立的组件。

新建host-item文件夹,在其下新建gundam-host-item.component.ts文件,用单独的html文件和templateUrl属性进行VC分离。

import { Component } from '@angular/core';

@Component({
    templateUrl: './html/gundam-host-item.component.html'
})

export class GundamHostItemComponent {

}

将原本gundam-host-item.component.ts中的html代码块复制到gundam-host-item.component.html中去。

新建的类需要在在app.module.ts文件里注册才能使用。(说起来angular也是Googler写的,我说写起来怎么和Android的节奏那么像似….)

这里写图片描述

修改gundam-host-item.component.ts中的@Component,增加selector属性,属性值设定为my-host-item

@Component({
    selector: 'my-host-item',
    templateUrl: './html/gundam-host-item.component.html'
})

在html中用

<my-host-item></my-host-item>

代替

    <div *ngFor="let gundam of gundams"  [routerLink]="['/detail', gundam.id]">
      <span>
        {{gundam.name}}
      </span>
    </div>

但是是这样又带来一个问题,如何把数据传进去呢?

还是绑定

angular数据倒来倒去,都是通过绑定的方式。既然host-item里没有值,那就传一个进去。

<my-host-item *ngFor="let gundam of gundams"  [routerLink]="['/detail', gundam.id]" [gundam]="gundam"></my-host-item>

[gundam]=”gundam”即是绑定声明,声明该组件中有一个名为gundam的属性,然后将拆解gundams数组得到的gundam作为值传递给my-host-item中的gundam属性。

现在值已经从页面里传进去了,但是在组件中还是要接收一下,否则会报错。

具体来说,要把外界的值传递给Controller。

gundam-host-item.component.ts中的inport里增加input 类,用来进行数据的接收。

import { Component, Input } from '@angular/core';
定义一个Gundam类的gundam属性(定义之前先导入gundam类),表示用此属性接收传递进来的值(与之前[gundam]=对应)。
gundam: Gundam;

定义完毕后,在旁边增加上@input的注解。

import { Component, Input } from '@angular/core';
import { Gundam } from './../../model/gundam';

@Component({
    selector: 'my-host-item',
    templateUrl: './html/gundam-host-item.component.html'
})

export class GundamHostItemComponent {
    @Input() gundam: Gundam;
}

再进入item的html页面,删去多余*ngfor

<div>
  <span>
    {{gundam.name}}
  </span>
</div>

刷新页面,可以正常显示咯。

这里写图片描述

又是一顿神拆,先把v和c分离,又进一步把主页拆成2个组件。这样就不怕产品经理跳出来说,“我觉得这个主页的item需要换一下了。”~(当然,其实拿把菜刀放在旁边是更好的选择)~

现在,可以使用bootstrap了。

版权声明:本文为博主原创文章,未经博主允许不得转载。

angular4中父组件如何调用子组件的方法

一、新建一个子组件ng g component child二、子组件中添加要被调用的方法child.component.tsexport class ChildComponent implements...
  • u012396955
  • u012396955
  • 2017年12月20日 13:27
  • 711

AngularJS Component详解

现在比较火的前段JS框架像 VUE,REACK,ANGULAR,这三种框架都有共同的特点那就是,双向数据绑定,组件化开发。而在angular1.5的版本之前,都是以directive作为组件化的形式...
  • u011068996
  • u011068996
  • 2017年02月06日 15:11
  • 11309

Angular4学习笔记(三):router

router:一条大路呦,通呀通我家
  • catwindboy
  • catwindboy
  • 2017年04月17日 13:07
  • 12113

Angular4学习笔记(七):界面优化

美美容,做个拉皮,拍个黄瓜
  • catwindboy
  • catwindboy
  • 2017年04月18日 17:05
  • 6959

AngularJS Demo 项目

本项目是一个基于AngularJS 1.x版本 构建的示例项目,旨在帮助初学者能够快速了解AngularJS各功能特性的使用方法,及综合运用它们开始一个CRUD项目。...
  • hwhsong
  • hwhsong
  • 2017年01月11日 17:36
  • 13421

Angular快速入门4---组件化入门篇1

组件化入门 网页结构和组件化 常规网页开发时,网页的结构大概是什么样的? 上中下、左中右、上下、左右 上中下结构:上、下结构保持不变,中间部分内容发生变化 组件化:将网页中可以重复使用的标签封装成一个...
  • songchuncao
  • songchuncao
  • 2017年04月27日 17:55
  • 442

Angular4-在线竞拍应用-组件的生命周期

红色的被调用一次,绿色的会被调用多次。这里分为了三个阶段,组件初始化阶段,变化检测,组件销毁。会在组件初始化后看到组件,在变化检测阶段让属性值和页面展示保持一致。变化检测中的四个方法和组件初始化中的四...
  • zsx157326
  • zsx157326
  • 2017年11月01日 08:39
  • 371

Angular4学习笔记(六)- Input和Output

概述Angular中的输入输出是通过注解@Input和@Output来标识,它位于组件控制器的属性上方。 输入输出针对的对象是父子组件。演示Input 新建项目connInComponents:ng...
  • Young4Dream
  • Young4Dream
  • 2017年11月01日 22:43
  • 626

[AngularJS面面观] 17. 依赖注入 --- 注解的定义与实现

本篇文章继续介绍angular用以实现依赖注入的关键元素之一 - 注解(Annotation)。 在前几篇文章中,我们已经分析和讨论了有关angular依赖注入的几个方面: angular如何处...
  • dm_vincent
  • dm_vincent
  • 2016年08月07日 00:22
  • 4444

Angular4学习笔记(四):service

一个service引发的解耦
  • catwindboy
  • catwindboy
  • 2017年04月17日 14:01
  • 7811
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Angular4学习笔记(六):解耦
举报原因:
原因补充:

(最多只允许输入30个字)