Angular2.js——数据显示

【Angular2.js——数据显示】的更多相关文章

Angular2.js——数据显示

显示数据,即属性绑定机制把数据显示到用户界面上. 在Angular中最典型的数据显示方式,就是把HTML模板中的控件绑定到Angular组件的属性. 接下来介绍几种数据显示的语法和代码片段. 使用插值表达式显示组件属性要显示组件的属性,最简单的方式就是通过插值表达式来绑定属性名.要使用插值表达式,就把属性名包裹在双花括号里放进视图模板. app.component.ts import { Component } from '@angular/core'; @Component({ select…

js数据显示在文本框中(页面加载显示和按钮触动显示)

web代码如下: <!DOCTYPE html> <html> <head> <title>jsTest02.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is…

Angular2.js——多个组件

目前我们的英雄列表和英雄详情位于同一个文件的同一个组件中,我们将来可能会受到新的需求,修改这个组件又不能影响另外一个.然而每一次更改都会给这两个组件带来风险和双倍的测试负担,没有任何好处.如果我们需要在其他地方复用英雄详情组件,英雄列表组件也会跟着混进去. 我们当前的组件违反了单一职责原则,我们需要把英雄详情拆分成一个独立的组件. 1.拆分英雄详情组件在app目录下创建一个名叫hero-detail-component.ts的文件,并且创建HeroDetailComponent组件,代码如下:…

Angular2.js——主从结构

学习这一篇的内容,还回到我们快速起步的应用上来. 主从结构,我们想要做一个英雄的列表,我们希望用户在列表中选中一个英雄,然后这个被选中的英雄出现在详情视图中.主视图是英雄列表,从视图则是被选中英雄的详细信息. 1.创建英雄我们先创建一个由视为英雄组成的数组: 修改app.component.ts文件: import { Component } from '@angular/core'; //创建Hero类 export class Hero{ id:number; name:string; }…

Angular2.js——表单（下）

这部分是接表单上部分的内容,主要内容有: 1.添加自定义的CSS来提供视觉反馈: 2.显示和隐藏有效性验证的错误信息: 3.使用ngSubmit处理表单提交: 4.禁用表单提交按钮. 添加自定义的CSS来提供视觉反馈通过ngModel跟踪修改状态与有效性验证.在表单中使用ngModel会告诉我们很多信息:用户碰过此控件吗?他的值变化了吗?数据变得无效了吗? 它使用特定的类来更新控件,以反映当前状态.可以利用这些css类来修改控件的外观,显示或隐藏消息. 状态为真时(CSS类) 为假时(CSS…

Angular2.js——表单（上）

表单创建一个有效.引人注目的数据输入体验.Angular表单协调一组数据绑定控件,跟踪变更.验证输入的有效性,并且显示错误信息. 接下来,主要内容有: 1.使用组件和模板构建Angular表单: 2.用ngModel创建数据绑定,以读取和写入输入控件的值. 构建Angular表单我们想构建包含姓名,电话,特长三个字段的表单 1.我们可以参照快速启动那篇,创建一个名为forms的新项目,也可以使用之前的项目进行修改: 2.创建Person类: 3.创建控制此表单的组件: 4.创建具有初始表单布局…

angular2环境搭建

Angular2.x与Angular1.x完全不同,Angular2.x是不兼容Angular1.x的,所在在框架的构造上,它们是完全不同的.在Angular2.x中,因为其是基于ES6来开发的,所以会有很多第三方依赖.由于很多浏览器还不支持ES6,所以Angular2引入了很多polyfill或者shim, 导致我们引入了第三方依赖. 官方的说法,它是基于数据流的构建系统(streaming build system),主要用来让自动化和增强你的工作流程(Automate and enhanc…