angular2系列教程(二)模板语法

今天我们要讲的是angualr2的模板语法,官网写的很清楚,但我也用通俗易懂的讲法再罗列一下吧!

例子

源代码

运行方法:

npm install
npm run play

打开8080端口。这个例子是我写的小demo,介绍了常用的几种模板语法。

属性绑定

不需要特别的指令,只需要用[value]就可以了,并不只有value,[]里面可以是任何常用的html元素的属性!

src/app.html

<input [value]="firstName" [placeholder]="firstNamePlaceholder" />

也可以用双花括号:

src/app.html

<input value="{{firstName}}" placeholder="{{firstNamePlaceholder}}" />

绑定的属性从何而来?从我们定义的类中:

src/app.ts

firstName: string = ‘lewis‘;

事件

你可以在angular2中监听任何html5原生的元素事件,只需要使用这个语法: (eventName)

src/app.html

<button (click)="doSomething($event)" >点击</button>

doSomething从何而来?跟属性firstName一样,在类中定义:

src/app.ts

doSomething($event){
        console.log(‘点击了这个按钮:‘,$event.target);
    }

双向数据绑定

刚才讲的是单向数据绑定,不信你可以改变input的值看看,别的绑定会不会变动。答案是不会!这次我们来做双向数据绑定:

src/app.html

<input type="text" [value]="firstName" (input)="firstName=$event.target.value" />
    <input type="text" [(ngModel)]="firstName" />

使用单向绑定加事绑定可以,使用[(ngModel)]也可以!这样你再改变input的值,所有绑定firstName的值都会跟着变化!

angular2的双向数据绑定没有用“脏检查”,而是用了zone.js。这是个什么库呢?

A zone is an execution context that persists across async tasks.

用来维持切换上下文的库。用来替代$apply()的一个库。告诉你何时更新视图!

局部变量

局部变量 # 是一个对象或者dom元素的指针,什么意思?看代码:

src/app.html

<!-- phone refers to the input element; pass its `value` to an event handler -->
    <input #phone placeholder="phone number">
    <button (click)="callPhone(phone.value)">Call</button>

    <!-- fax refers to the input element; pass its `value` to an event handler -->
    <input var-fax placeholder="fax number">
    <button (click)="callFax(fax.value)">Fax</button>

一切尽在不言中!

*语法与template标签

先看一个*语法与template标签的应用:

<p *ngIf="isActive">我是段落</p>

相当于

<template [ngIf]="isActive"><p>我是段落</p></template>

这段代码的意思是,如果isActive为true则渲染p元素。

template标签声明了一段 DOM ,这段DOM在runtime后会被实例化。

使用template我们可以将一段DOM包裹起来,声明它,然后决定要不要渲染他们。不渲染的话,里面的元素就不会加载,可以节省运算。如果你用div和隐藏效果的话,里面的元素还得加载,浪费了运算。

我们也使用*语法替代template标签。起到同样的作用。

用*装饰的自带指令还有:NgForNgIf, 和NgSwitch。都是控制是否渲染的指令。我们用*来装饰后,就可以产生类似template的效果!

更多语法

以上只是介绍了常用的语法,还有更多的语法参考可以直接去官网


教程源代码及目录

如果您觉得本博客教程帮到了您,就赏颗星吧!

https://github.com/lewis617/angular2-tutorial

时间: 2024-11-05 12:14:31

angular2系列教程(二)模板语法的相关文章

angular2系列教程(六)升级装备、pipe

今天,我们要讲的是angualr2的pipe这个知识点,但是在这之前我们需要升级一下我们的装备,因为之前的装备太“寒酸”了. 例子 这个例子包含两个pipe,一个是stateful,一个是stateless,是直接复制官方的例子.本例子还包含了我对AngularClass/angular2-webpack-starter这个牛逼starter的改写,我会详细讲解配置. 源代码 没有测试 AngularClass/angular2-webpack-starter 这里面包含了Angular 2 (

angular2系列教程(一)hello world

今天我们要讲的是angular2系列教程的第一篇,主要是学习angular2的运行,以及感受conponents以及模板语法. http://lewis617.github.io/angular2-tutorial/hellowold/ 例子 这个例子非常简单,是个双向数据绑定. 运行方法: 全局安装http-server npm install -g http-server 公共部分 公共部分就是你直接复制粘贴拿去用的部分,包括: 1.index.html 2.lib 3.app/main.t

CRL快速开发框架系列教程二(基于Lambda表达式查询)

本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框架系列教程四(删除数据) CRL快速开发框架系列教程五(使用缓存) CRL快速开发框架系列教程六(分布式缓存解决方案) CRL快速开发框架系列教程七(使用事务) CRL快速开发框架系列教程八(使用CRL.Package) CRL快速开发框架系列教程九(导入/导出数据) CRL快速开发框架系列教程十(

Shell脚本系列教程二: 开始Shell编程

Shell脚本系列教程二: 开始Shell编程 2.1 如何写shell script? (1) 最常用的是使用vi或者mcedit来编写shell脚本, 但是你也可以使用任何你喜欢的编辑器; (2) 脚本写好之后, 要给脚本设置可执行权限: 语法为: chmod  [option]  mode  script-name $ chmod +x script-name # 对所有用户(a, 默认) $ chmod 775 script-name 这里, 775这3个数字分别表示此文件对于用户(u)

kettle系列教程二

 kettle系列教程二 1.Hello World 示例 通过这个例子,介绍kettle的一些基础知识及应用: n 使用Spoon工具 n 转换的创建 n 步骤及连线 n 预定义变量 n 在Spoon中预览和执行 n 使用pan工具在终端窗口执行转换 概述 我们要实现的目标是:通过一个包含人名称的CSV文件,创建一个XML文件,内容是针对每个人添加上问候. 如果csv文件内容如下: last_name, name Suarez,Maria Guimaraes,Joao Rush,Jenni

C#微信公众号开发系列教程二(新手接入指南)

http://www.cnblogs.com/zskbll/p/4093954.html 此系列前面已经更新了两篇博文了,都是微信开发的前期准备工作,现在切入正题,本篇讲解新手接入的步骤与方法,大神可直接跳过,也欢迎大神吐槽. 目录 C#微信公众号开发系列教程一(调试环境部署) C#微信公众号开发系列教程一(调试环境部署续:vs远程调试) C#微信公众号开发系列教程二(新手接入指南) 微信公众平台消息接口的工作原理大概可以这样理解:从用户端到公众号端一个流程是这样的,用户发送消息到微信服务器,微

jQuery 入门教程(二): 基本语法

学习jQuery之前需要你有下面几个方面的基本知识 HTML CSS JavaScript jQuery 的基本语法 $(selector).action() $ 符合定义这是一个jQuery语句 (selector) 用来选择某个HTML元素,其语法和CSS的selector语法一样. action() 定义操作该HTML元素的方法. 比如: $(this).hide() – 隐藏当前元素. $("p").hide() – 隐藏所以 <p> 元素. $(".te

angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用

今天我们要讲的是ng2的路由系统. 例子 例子是官网的例子,包含一个“危机中心”和“英雄列表”,都在一个app中,通过路由来控制切换视图.还包含了promise的用法,服务的用法等多个知识点. 源代码: https://github.com/lewis617/angular2-tutorial/tree/gh-pages/router 运行方法: 在根目录下运行: http-server 引入库文件设置base href 路由并不在ng2中,需要我们额外引入,另外我们需要设置base href,

Influx Sql系列教程二:retention policy 保存策略

retention policy这个东西相比较于传统的关系型数据库(比如mysql)而言,是一个比较新的东西,在将表之前,有必要来看一下保存策略有什么用,以及可以怎么用 I. 基本操作 1. 创建retention policy retention policy依托于database存在,也就是说保存策略创建时,需要指定具体的数据库,语法如下 CREATE RETENTION POLICY <retention_policy_name> ON <database_name> DUR