Angular4学习笔记之实现绑定和分包


Posted in Javascript onAugust 01, 2017

本文介绍了Angular4学习笔记之实现绑定和分包,分享给大家,希望对大家有帮助

src目录下的app/app.component.ts文件是一个标准的angular4组件的结构。

Angular4学习笔记之实现绑定和分包

上面@component()括号内template属性里用`(这个符号不是单引号,而是键盘1左边、tab键上面的那个符号)包裹的是View,下面export的class部分是Controller。

希望实现的效果长这个样子:

Angular4学习笔记之实现绑定和分包

万里长征第一步,先从修改View开始。

修改temlate里的HTML文件,改成下面的样子:

<h1>Hello,World</h1>
<p>你好,gundam meister</p>
<span>海牛高达</span>
<div>
  <span>海牛高达</span>
  <span>NewType</span>
</div>

上面部分先充当项目简介。

中间的span假装是高达列表。

下面的div包裹的两个span假装是高达详情。

刷新页面,现在是这个样子的:
Angular4学习笔记之实现绑定和分包

好吧我承认和效果图比起来是挫了一点,但是现在先专注于功能实现。

需要实现的功能是:点击高达列表,可以显示高达详情

正常的情况下,当然不会用常量去渲染页面。而如何沟通Controller和View就是Angular用Model干的事情:绑定

绑定:你有我有全都有。

在同一个组件(component)内,在class(Controller)里定义的变量名,可以直接在template(View)里使用。

@Component({
  selector: 'my-app',
  template: `
  <h1>Hello,World</h1>
  <p>你好,gundam meister</p>
  <span>{{name}}</span>
  <div>
    <span>{{name}}</span>
    <span>{{type}}</span>
  </div>
  `
})
export class AppComponent {
  name = '海牛高达';
  type = 'NewType';
}

刷新页面,依然可以显示:

Angular4学习笔记之实现绑定和分包

当然,gundam其实是一个类,所以现在是model上场的时候了。

定义一个类 gundam:

class Gundam {
  name: string;
  type: string;
}

改写name和type,让他们成为属性值而不是string常量:

gundam: Gundam = {
  name: '海牛',
  type: 'NewType'
};

typescript 的语法有点奇怪,定义某个变量是某种类型的写法,是变量名在前变量类型在后。

改变temple里的引用:

<h1>Hello,World</h1>
<p>你好,gundam meister</p>
<span>{{gundam.name}}</span>
<div>
  <span>{{gundam.name}}</span>
  <span>{{gundam.type}}</span>
</div>

刷新页面:

Angular4学习笔记之实现绑定和分包

继续review代码。

主页展示的是一个gundam列表而不是某一个gundam,所以用一个gundam数组去冒充数据。

const gundams: Gundam[] = [
  {name: '海牛高达', type: 'NewType'},
  {name: '巴巴托斯', type: '近战'},
  {name: '力天使', type: '射击'}
];

之前的angular提供了ng-repeat的标签来循环列表,不过现在4.0以上的时代变成了标签里一个特殊的修饰:*ngFor

修改class里的代码,定义一个变量gundams接受数组:

gundams = GUNDAMS;

修改template,用*ngFor循环解析数组,进行数据渲染:

<h1>Hello,World</h1>
<p>你好,gundam meister</p>
<div *ngFor="let gundam of gundams">
  <span>
    {{gundam.name}}
  </span>
</div>
<div>
  <span>{{gundam.name}}</span>
  <span>{{gundam.type}}</span>
</div>

刷新页面:

Angular4学习笔记之实现绑定和分包

列表已经根据数据来变化了(当然数据流还是有待商榷),下面来修改使得详情能根据点击的列表项变化。

每一个html标签都有事件(click hover 等等),而angular也继续调用了这些事件,只是写法不太一样。

<div *ngFor="let gundam of gundams" (click)="onSelected(gundam)">

解释:点击触发class中的onSelected方法,同时把gundam作为参数传递进去。

因为View里用到的onSected函数来自controller,也就是class,所以需要补充:

selectedGundam: Gundam; // 定义一个selectedGudam作为接收详情的变量
onSelected (gundam: Gundam) : void{
  this.selectedGundam = gundam; // 通过参数赋值
}

修改template中的html显示:

<div>
  <span>{{selectedGundam.name}}</span>
  <span>{{selectedGundam.type}}</span>
</div>

此时刷新页面会报错,因为虽然通过点击div可以给selectedGudam赋值,但是当selectedGundam被初始化的时候是没有值的。

有两种解决办法:

第一就是给selected设定初始值并设定初始被选择的div。

另一种就是根据selected有没有被初始化,决定显示不显示详情的div。

因为angular提供了ngIf修饰,用第二种方法会比较省事一点。

<div *ngIf="selectedGundam">
  <span>{{selectedGundam.name}}</span>
  <span>{{selectedGundam.type}}</span>
</div>

刷新页面

Angular4学习笔记之实现绑定和分包 

点击巴巴托斯

Angular4学习笔记之实现绑定和分包

总的来说,写到这里业务逻辑已经完成了一半,甚至更多。因为本身项目就是一个点击查看的单页面应用,并不太复杂。但是所有的代码都挤在一个类里,可读性和扩展性都会变的很差。
所以是时候开始下一步了。

分包的精髓:

import {
Component
} from '@angular/core';
class Gundam {
  name: string;
  type: string;
}
const GUNDAMS: Gundam[] = [
  {name: '海牛高达', type: 'NewType'},
  {name: '巴巴托斯', type: '近战'},
  {name: '力天使', type: '射击'}
];
@Component({
  selector: 'my-app',
  template: `
    <h1>Hello,World</h1>
    <p>你好,gundam meister</p>
    <div *ngFor="let gundam of gundams" (click)="onSelected(gundam)">
      <span>
      {{gundam.name}}
      </span>
    </div>
    <div *ngIf="selectedGundam">
      <span>{{selectedGundam.name}}</span>
      <span>{{selectedGundam.type}}</span>
    </div>
  `
})
export class AppComponent {
  gundam: Gundam = {
  name: '海牛',
  type: 'NewType'
  };
  gundams = GUNDAMS;
  selectedGundam: Gundam; // 定义一个selectedGudam作为展示详情的变量
  onSelected (gundam: Gundam): void {
  this.selectedGundam = gundam; // 通过参数赋值
  }
}

现在一个component挤了太多的东西,有数据、有常量、有template和class。如果项目很小的话(比如这个demo)还可以接受,但是一旦业务逻辑繁琐起来就是totally disaster

就算不介意坑别人,也别给隔了很久再去维护的自己找麻烦。

先把gundam这个class给摘出来,既然是model就好好呆在model的地方。

在src下新建model的包,新建一个gundam.ts的文件,把gundam class给ctrl+x过去。

Angular4学习笔记之实现绑定和分包

在原本的地方导入:

import { Gundam } from '../../model/gundam';

再把数组常量给挪走,理论上数据是需要从服务端取,但是我不写服务端好多年,所以还是继续使用假数据。

在src新建包service,新建data.ts文件,导入gundam类以后导出数组:

import { Gundam } from './../model/gundam';
export const GUNDAMS: Gundam[] = [
  {name: '海牛高达', type: 'NewType'},
  {name: '巴巴托斯', type: '近战'},
  {name: '力天使', type: '射击'}
];

在原位置引入使用:

import { GUNDAMS } from './../../service/data';

ps:不要忘记在每个文件后空一行.虽然不空可以正常运行,但是会有错误提示.总的来说就是这么一个格式要求.

此时可以正常显示,而app.component.ts里已经整洁多了。

但是还不够,现在要把详情分离出去。让上帝的归上帝,凯撒的归凯撒。主页就处理主页数据,详情就处理详情数据。

换句话说,把首页分成两个页面:首页 + 详情。

需要用到的就是route

PS,有关绑定:

Angular的绑定很有意思,有双向的也有单向的,有在class里声明一个变量在template里使用的,也有在template里暴露一个class里的变量给外界赋值的。目前我见到的是如下三种写法(指在view里):

1){{变量名}},单项绑定,class中的值会显示到view里。

2)[变量名],单项绑定,一般后面还会跟个“=”,用来给class里的变量或者属性赋值。

3)*ngModel=[(变量名)],双向绑定。有关双向绑定其实我还是有点不理解,官方文档上也只是在表单处理时应用。大体上说双向绑定就是绑定值后在页面修改值可以影响class内的值,而class内的值改变后view的值也会改变。

比如可以双向绑定一个input,初始化的时候从服务端读取一个值放进去,同时这个值是可以修改的。修改完毕class里的值也变了,可以直接提交而不用多写拿value的步骤。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype1.6 JS 官方下载地址
Nov 30 Javascript
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
即将发布的jQuery 3 有哪些新特性
Apr 14 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
Javascript Promise用法详解
May 10 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
JS常见内存泄漏及解决方案解析
May 30 Javascript
详解js静态资源文件请求的处理
Aug 01 #Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 #Javascript
jQuery上传插件webupload使用方法
Aug 01 #jQuery
js实现鼠标拖拽多选功能示例
Aug 01 #Javascript
使用Node.js实现RESTful API的示例
Aug 01 #Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 #jQuery
js下拉菜单生成器dropMenu使用方法详解
Aug 01 #Javascript
You might like
PHP内核探索:变量概述
2014/01/30 PHP
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
php页面函数设置超时限制的方法
2014/12/01 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
PDO::setAttribute讲解
2019/01/29 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
python操作kafka实践的示例代码
2019/06/19 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
Python如何定义有默认参数的函数
2020/08/10 Python
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
会计自我鉴定
2014/02/04 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
三好学生竞选稿范文
2019/08/21 职场文书