今天我们要讲的是angular2系列教程的第一篇,主要是学习angular2的运行,以及感受angular2的components以及模板语法。
例子
这个例子非常简单,是个双向数据绑定。我使用了官网上最简单的方法来启动这个程序,并且去除cdn使用本地加载,保证长期可以运行(因为文件都在本地,我们不用担心版本更新的问题。)
运行方法:
全局安装http-server
npm install -g http-server
在根目录(hellowold)运行服务
http-server
根据提示打开相应的端口(一般是8080)。
也可以直接看我的github pages
http://lewis617.github.io/angular2-tutorial/hellowold/
公共部分
公共部分就是你可以直接复制粘贴拿去用的部分,包括
- index.html
- lib(文件夹以及里面所有的js文件)
- app/main.ts
这些文件都是完全不用修改的,还有一个文件需要部分修改:
- app/app.ts
这个文件必须导出App组件。其他文件都是需要自己编写的。
lib简介
-
<script src="lib/es6-shim.min.js"></script>
<script src="lib/system-polyfills.js"></script>
<script src="lib/shims_for_IE.js"></script>
前三个文件是ie的polyfill,其他浏览器是不需要的 -
<script src="lib/angular2-polyfills.js"></script>包含了zone和reflect-metadata
- zone告诉angular2何时更新视图?还记的ng1的脏检查以及$apply吧,zone就是用来取代这些恶心的东西的!
- reflect-metadata也是为了使用 ES7风格的装饰器准备的,就像
@Component
和@View
。这在ng2里面重度使用! -
<script src="lib/system.js"></script>
<script src="lib/typescript.js"></script>
<script src="lib/Rx.js"></script>
这三个文件分别用于模块系统、ts编译、响应式编程(增强处理异步的能力) -
<script src="lib/angular2.dev.js"></script>是ng2的库文件
组件
其实这个程序就一个ts文件,还特别短!
app/app.ts
import {Component} from 'angular2/core';
@Component({
selector: 'app',
template: `
<h1>Hello, {{name}}!</h1>
Say hello to: <input [value]="name" (input)="name = $event.target.value">
`
})
export class App {
name: string = 'World';
}
定义一个类,给它装饰一个组件,组件是什么?就是ng1里面的指令,react中的组件,就是样子,看得见摸得着的东西。
这里我不得不夸一下ng2,实在改进太多了,所有的东西包括组件、服务、过滤器等都是一个类,然后用各自相关的@装饰器,装饰一下就可以了,非常简单明了!
模板语法
我们先来感受下ng2的模板语法,后面我会单独拿出来讲这个知识点。
值得高兴的是{{}}依然存在
<h1>Hello, {{name}}!</h1>
ng-model变成了[value],属性绑定用了[value]
<input [value]="name" (input)="name = $event.target.value">
事件绑定变成了(),里面是所有html5的事件比如,click,hover,input等等。ng2终于拥抱html5原生方法了!
教程源代码及目录
如果您觉得本博客教程帮到了您,就赏颗星吧!