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. Junit 源码剖析（二）

    junit4 下的所有的testcase都是在Runner下执行的, 可以将Runner理解为junit运行的容器, 默认情况下junit会使用JUnit4ClassRunner作为所有testcas ...

  2. webserver<1>

    1. 实现基础的信号处理 sigaction使用前一定内存清零 2. 实现基础的进程模型 wait 等待子进程结束 #include <stdio.h> #include <unis ...

  3. [UOJ 25] [IOI 2014] Wall 【线段树】

    题目链接:UOJ - 25 题目分析 每个操作就是将被操作的数限制在一个区间,比如 Set_Max(5) 就是将被操作的数限定在了 [5, INF] 的区间里. 这些操作是可加的,但是必须按照顺序,不 ...

  4. 在CENTOS6上安装MONGODB

    为接下来的工作热一下手.. 以前看过一本书,了解了,但好像有三四年,又忘了..:( 参考URL: http://www.centoscn.com/image-text/install/2014/112 ...

  5. 查看SQL Server数据库中各个表和视图的索引所占的空间大小

    ;with cte as ( (select t.name as TableName,i.name as IndexName, sum(row_count)as row_count, SUM (s.u ...

  6. poj 2431 Expedition 贪心

    简单的说说思路,如果一开始能够去到目的地那么当然不需要加油,否则肯定选择能够够着的油量最大的加油站加油,,不断重复这个贪心的策略即可. #include <iostream> #inclu ...

  7. PuTTY 私钥'putty/sshdss.c' 多个信息泄露漏洞

    漏洞版本: PuTTY 0.52 - 0.63 漏洞描述: BUGTRAQ ID: 61644 CVE(CAN) ID: CVE-2013-4208 PuTTY是Windows和Unix平台上的PuT ...

  8. 【转】vc中使用SendMessage正确发送自定义消息的方法--不错

    原文网址:http://zhoumf1214.blog.163.com/blog/static/5241940200910265532959/ 最近在用VC2008做开发,后来由于要用到消息的发送,而 ...

  9. js或者cs代码拼接html

    一:使用到的jQuery 文档操作方法 html() 设置或返回匹配的元素集合中的 HTML 内容. append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容. empty() 删除匹配的 ...

  10. [Exchange]2个不同域之间互发邮件

    1.互相添加DNS. 不多说,构建信任域也需要这样的 2.DNS中添加Exchange的地址解析. 3.配置Exchange. 在exchange里面添加对方的exchange信息 在Receiver ...