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 相关文章推荐
Javascript 模式实例 观察者模式
Oct 24 Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
jquery用data方法获取某个元素上的事件
Jun 23 Javascript
javascript操作ul中li的方法
May 14 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
详解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一个找二层目录的小东东
2012/08/02 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
使用Promise解决多层异步调用的简单学习心得
2016/05/17 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
JS实现的透明度渐变动画效果示例
2018/04/28 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
Python列表推导式的使用方法
2013/11/21 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
Python换行与不换行的输出实例
2020/02/19 Python
用python制作个音乐下载器
2021/01/30 Python
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
公司市场部岗位职责
2015/04/15 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电
tomcat下部署jenkins的方法
2022/05/06 Servers
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技