Angular2學習筆記.3、通過模板呼叫Controller事件實現使用者輸入和顯示，UserInput
通過模板呼叫Controller事件實現使用者輸入和顯示
本篇的內容會比較少，但是遵循著官方教程的步驟，還是單獨發出來吧。這個工程實現了將使用者在<input>中的輸入傳入到Controller的相應事件，並把它在也變其他地方顯示出來。
參考官方文件
工程結構
關於對工程結構的相關約定在前兩篇筆記已有詳細約定，以後也不再贅述。
/
|-package.json
|-index.html
|-node_modules/
|-libraries
|-...
|-UserInput/
|-index.html
|-app/
|-main.js 為了精簡，這個工程沒有使用之前介紹的模板分離和Model注入，僅僅對所要涉及的內容進行展示，以後也是如此。
工程示例
正文
Angular中的使用者輸入依賴DOM event(事件)驅動。你可以使用原生事件，例如click,mouseover和keyup。Angular使用一種特殊的syntax(語法)來對DOM元素註冊事件。
事件語法開始於被圓括號包裹的事件名稱，一個控制器的函式assign(分配)給這個事件名稱。
<input #myname (keyup)="foo">
<p>{{myname.value}}</p>#myname
<p>中引用這個變數。當或可以keyup事件時，(keyup)通知Angular去trigger(觸發)更新。{{myname.value}}將<p>的text node(節點)和輸入值繫結。當你修改<input>中的資料時，它會同步的顯示在下面的<p>中。 此時（2016-2-20），官方文件中使用的是
(keyup)而不是(keyup)="foo"，這不能正常執行。 (keyup)可以改為(mouseover)或其他事件，如果為(mouseover)，那麼Angular會在滑鼠經過時更新內容，而不是在按鍵擡起時。 foo構建工程
下面實現這次的UserInput工程，這個工程會首先顯示一個列表，接著下面有一個<input>和一個<button>，當輸入內容後，點選按鈕會將輸入的內容插入到上方列表。也可以在輸入內容後按回車鍵，同樣會將內容插入到列表，還會將輸入框清空。
建立/UserInput/index.html：
<html>
<head>
<title>User Input</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- IE required polyfill -->
<script src="/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="/node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="/node_modules/angular2/bundles/angular2-all.umd.js"></script>
<!-- 2. Load our 'modules' -->
<script src='/UserInput/app/main.js'></script>
</head>
<!-- 3. Display the application -->
<body>
<todo-list>Loading...</todo-list>
</body>
</html>建立/UserInput/app/main.js:
(function(app){
app.UserInputComponent =
ng.core.Component({
selector:'todo-list',
template:'<ul>' +
'<li *ngFor="#todo of todos">' +
'{{ todo }}' +
'</li>' +
'</ul>' +
'<input #textbox (keyup)="doneTyping($event)">' +
'<button (click)="addTodo(textbox.value)">Add Todo</button>'
})
.Class({
constructor:function(){
this.todos = ["Eat Breakfast", "Walk Dog", "Breathe"];
this.addTodo = function(todo) {
this.todos.push(todo);
};
this.doneTyping = function($event) {
if($event.which === 13) {
this.addTodo($event.target.value);
$event.target.value = null;
}
}
}
});
})(window.app || (window.app = {}));
(function(app){
document.addEventListener('DOMContentLoaded',function(){
ng.platform.browser.bootstrap(app.UserInputComponent);
});
})(window.app || (window.app = {}));在/下執行”npm start”。
相關推薦
Angular2學習筆記.3、通過模板呼叫Controller事件實現使用者輸入和顯示，UserInput
通過模板呼叫Controller事件實現使用者輸入和顯示 本篇的內容會比較少，但是遵循著官方教程的步驟，還是單獨發出來吧。這個工程實現了將使用者在<input>中的輸入傳入到Controller的相應事件，並把它在也變其他地方顯示出來。 參考官方
學習筆記一、UITableView上下滾動導航欄漸變隱藏和顯示效果
大體思路：定義一個UINavigationBar的Category,在NavigationBar頂層增加一個檢視overlay。滾動時通過設定overlay檢視的背景色和透明度來達到隱藏和顯示導航欄效果。程式碼如下： #import <UIKit/UIKit.h&g
Git學習筆記3：通過git log 檢視版本演變歷史
1.檢視git commit 的列表 使用命令： git log --online 2.指定最近的4個commit 檢視演變列表 使用命令： git log -n4 --online 3.檢視本地的分支 使用命令： git branch -v 4.建立一個臨時的分支，這個分支
Angular2學習筆記.4、表單相關，雙向資料繫結，HeroForm
開始 本次我們將會學會如何用Angular建立表單、two-way data binding(雙向資料繫結)、change tracking(檢測變化)、validation(驗證) 和 error handling(錯誤處理)等功能以及ngModel、ngC
Python學習筆記--3、高階特性-切片、迭代、列表生成式、生成器、迭代器
廖老師在這個地方提到了，在Python 中，並不是寫的程式碼越多越好，而是寫的程式碼越少越好，月簡單越好。 1、切片 什麼是切片，簡單來說就是對list或者tuple中的部分元素進行取出操作。例子如下： 應注意的是，python的首位的元素的編號是0，所以，要確定好[
Angular2學習筆記.1、環境部署，基本概念，HelloAngular2
前言 作為本系列筆記的第一篇文章，在開頭要說一些閒言碎語。 首先我是一個Angular2的初學者，這個系列文章不是教程或其他一切厲害的東西，僅僅是作為我學習過程的一個記錄，我在編輯和排版後將它作為資料儲存並分享給其他人。也希望大家和我共同以學習的態度探討技術
Angular2學習筆記.2、繫結、ngFor和ngIf指令、MVVM分離、DisplayingData
本篇概述 本片為Anguar2學習筆記的第二篇文章，將會講述Angular2的資料繫結功能（僅涉及單向），ngFor、ngIf指令的使用以及如果分離MVVM。 本片內容參照官方文件DisplayingData。 工程演示 工程結構 這次我們來建
Mongodb學習筆記三、使用asp.net在Mongodb中儲存和讀取圖片檔案
今天練習瞭如何使用c# driver儲存和讀取圖片。 廢話不多說，直接上程式碼。 一、儲存圖片（檔案應該也一樣）： private void SaveImgBJSON(string id, byte[] byteImg) {
【極客學院】－python學習筆記-3-單執行緒爬蟲 (request安裝遇到問題及解決，應用requests提取資訊)
極客學院課程網址：http://www.jikexueyuan.com/course/821_2.html?ss=1 任務： 爬取極客學院官方網站的課程庫，並儲存 Requests介紹與安裝： HTTP for Humans Python的第三方庫，實現網頁連結，更自動
spring cloud學習筆記3(同步呼叫、非同步呼叫、響應式呼叫)
1.同步呼叫 同步呼叫，在學習筆記2就是同步呼叫 2.非同步呼叫 修改service package com.study.cloud.consumer.services; import com.netflix.hystrix.contrib.javanica.annot
keras學習筆記3——Merge、GPU呼叫、快速開始及常見問題
1. Merge層 Merge層主要是用來合併多個model的，例子如下： from keras.layers import Merge,Dense from keras.models import Sequential first_model=Sequ
37、我的C#學習筆記3
c#變量本身被用來存儲特定類型的數據，可以根據需要隨時改變變量中所存儲的數據值。變量具有名稱、類型和值。變量名是變量在程序源代碼中的標識。變量類型確定它所代表的內存的大小和類型。變量值是指它所代表的內存塊中的數據。在程序的執行過程中，變量的值可以發生變化。使用變量之前必須先聲明變量，即指定變量的類型和名稱。變
python自動化學習筆記3-集合、函數、模塊
內容 rem alt 進程 操作 字典類 修改 指定 img 文件操作 上次學習到文件的讀寫，為了高效的讀寫文件，我們可以用循環的方式，一行一行的進行讀寫操作，打開文件的方法是open的方法，打開文件執行完後還要進行關閉操作。 一般的文件流操作都包含緩沖機制，write
linux學習筆記3-文件鏈接、shutdown命令、幫助文件man
lin down 51cto ges shu RoCE watermark 圖片 mark linux學習筆記3-文件鏈接、shutdown命令、幫助文件man
誰說菜鳥不會資料分析（工具篇）----- 學習筆記3（資料準備、處理）
1、資料準備： 一維表的列標籤是欄位，二維表的列標籤是資料 資料表的設計要求 資料表由標題行和資料部分組成 第一行是標的列標題（欄位名），列標題不能重複 第二行是資料部分，資料部分的每一行資料稱為一個記錄，並且資料部分不允許出現空白行和空白列
Git學習筆記3——修改檔案、檢視修改、提交修改
修改檔案 我們已經成功地新增並提交了一個readme.txt檔案，現在，是時候繼續工作了，於是，我們繼續修改readme.txt檔案，改成如下內容： Git is a distributed version control system. Git is a fr
Hadoop學習筆記一（通過Java API 操作HDFS,檔案上傳、下載）
package demo.hdfs; import java.util.Arrays; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.BlockLocation; impor
python學習筆記3--輸入輸出、eval函式
1. python中的變數： python中的變數宣告不需要像C++、Java那樣指定變數資料型別（int、float等），因為python會自動地根據賦給變數的值確定其型別。如 radius = 20，area = radius * radius * 3.14159 ，p
spring學習筆記(3)Bean命名、定義與配置
基於xml的配置 基礎配置 <bean id="id" name="name" class="full_name"> <property name="pname" value="pvalue" lazy-init="defalu
OpenGl學習筆記3之模型變換、檢視變換、投影變換、視口變換介紹
模型變換、檢視變換、投影變換、視口變換介紹 opengl中存在四種變換，分別是模型變換，檢視變換，投影變換，視口變換。這四種變換是圖形渲染的基本操作，實質上這四種變換都是由矩陣乘法表示（這些操作都是由一個4*4的矩陣來完成的），通過變換，我們可以看到各種通的顯示效果，最簡單