Let's say you want to write a simple data bing app. when you type in a text box, somewhere in the application will show the result.

In Angular 1, you can use ng-model to finish all those stuff,  but in angular 2, the concept behind has changed.

<!-- index.html -->

<html>

<head>

    <title>Angular 2 Quickstart</title>

    <script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.87/traceur-runtime.js"></script>

    <script src="https://jspm.io/system@0.16.js"></script>

    <script src="https://code.angularjs.org/2.0.0-alpha.26/angular2.dev.js"></script>

</head>

<body>

<!-- The app component created in app.ts -->

<hello></hello>

<script>System.import('app');</script>

</body>

</html>
import {

    Component,

    View,

    bootstrap

} from 'angular2/angular2';

@Component({

    selector: 'hello'

})

@View({

    template: `

        <div>

            <label for="name">Name: </label>

            <input type="text" #ref (keyup)/>

            <hr />

            <h2>{{ref.value}}</h2>

        </div>

    `

})

export class Hello{

}

bootstrap(Hello);

We add a #ref, which you can name it anything you want after '#'. And then use 'ref.value' to the actual value from it.

But only this won't work.. you also need to watch it. In Angualr 2, this is acomplished by add even listener to the dom. Here we use '(keyup)'.

[Angular 2] 9. Replace ng-modle with #ref & events的更多相关文章

  1. angular报错：angular.min.js:118Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq

    报错代码如下: <div ng-controller="HelloAngular"> <p>{{greeting.text}},angular</p& ...

  2. Angular CLI 启动 版本ng 4

    npm install -g angular-cli ng -v ng new project_name cd project_name ng serve 浏览器打开输入 localhost:4200

  3. [Angular Directive] Build a Directive that Tracks User Events in a Service in Angular 2

    A @Directive is used to add behavior to elements and components in your application. This makes @Dir ...

  4. angular 2 - 001 ng cli的安装和使用

    angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...

  5. Angular源代码学习笔记-原创

    时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http:// ...

  6. 将地图定位封装为ng指令

    一.HTML结构<div tabindex="-1" class="modal fade in active modal-map" role=" ...

  7. Ngnice-国内ng学习网站

    今天给angular新手介绍一个国内开源的ng学习网站http://www.ngnice.com/这是由一批ng爱好者在雪狼大叔的带领下共同开发完成,致力于帮助更多的ng新人,他们分别是: ckken ...

  8. 国内ng学习网站

    Ngnice-国内ng学习网站2015-01-25 21:30 by 破狼, 534 阅读, 3 评论,收藏, 编辑 今天给angular新手介绍一个国内开源的ng学习网站http://www.ngn ...

  9. Angular 4 学习笔记 从入门到实战 打造在线竞拍网站 基础知识 快速入门 个人感悟

    最近搞到手了一部Angular4的视频教程,这几天正好有时间变学了一下,可以用来做一些前后端分离的网站,也可以直接去打包web app. 环境&版本信息声明 运行ng -v @angular/ ...

随机推荐

  1. LVS原理详解及部署之二：LVS原理详解（3种工作方式8种调度算法）

    一.集群简介 什么是集群 计算机集群简称集群是一种计算机系统,它通过一组松散集成的计算机软件和/或硬件连接起来高度紧密地协作完成计算工作.在某种意义上,他们可以被看作是一 台计算机.集群系统中的单个计 ...

  2. 【python之旅】python的基础一

    一.关于模块那些事 python的强大之处在于他有着丰富且强大的标准库和第三方库,很对功能都有相应的python库支持 例如: sys模块: # Author :GU import sys print ...

  3. VPN ,Bypass the FIrewall

    Bypass the China Firewall Methods November 16th, 2012Posted in , Tech With their assortment of techn ...

  4. [python]文本处理1.2

    1.0初步完成了文本截取需要信息的处理 1.1 修复了格式所造成的遗漏字符 1.2 去除了遗漏字符中的多余字符 bug-文本test14 有遗漏字符 bug-修复的遗漏字符中含有\n 未被识别为换行符

  5. DBA - 我的学习

    DBA - 我的学习 1. df -k 检查oracle 分区硬盘使用情况 2. 检查alert_<SID名称>.log, alert日志文件,检查是否新增错误日志 3. 检查数据文件的状 ...

  6. wget命令解析

           今天一学信息安全的同学让我编写一个软件,功能大致如下:输入网站首页,自动下载该网站所有网页并保存?拿到后感觉属于搜索引擎相关的,说实话我就感觉会用到递归,不过我不会写,百度也没找到资料, ...

  7. 监控 DNS 流量，预防安全隐患五大招！

    尽管 IT 管理员尽心尽责地监控设备.主机和网络是否存在恶意活动的迹象,却往往出力不讨好.主机入侵检测和端点保护对很多公司来说可能是"必需"的安全措施,但如果要找出 RAT.roo ...

  8. Keil_C51程序调试过程

    调试一般都是在发生错误与意外的情况下使用的.如果程序能正常执行,调试很多时候都是用不上的.所以,最高效率的程序开发还是程序员自己做好规范,而不是指望调试来解决问题. 单片机的程序调试分为两种,一种是使 ...

  9. Java实现生产者消费者

    方法1:最简单--利用LinkedBlockingQueue 队列具有先进先出的特点,成为经常应用于生产-消费者模式的数据结构. 1.将一个对象放到队列尾部,如果队列已满,就等待直到有空闲节点. —— ...

  10. bzoj1211

    prufer码水题(n-2)!/[(d1-1)!*(d2-1)!*…*(dn-1)!] ..] of longint; x,n,i,j,s:longint; ans:int64; begin read ...