Angular2 初体验
Angular2 初体验
Angular2 已经发布 beta9 , 是时候折腾一下了。 Angular2 和 AngularJS 1.x 相比, 可以说是全新的框架, 除了名字有延续性之外, 能延续的真的不多。
准备开发环境
Angular2 通过 npm 发布, 因此推荐使用 node/npm 环境, 要开始使用 Angular2 , 先准备一个目录 learning-angular
, 在这个目录中初始化项目:
mkdir learning-angular
cd learning-angular
npm init
编辑生成的 package.json
文件, 添加 angular2 的 npm 包及其依赖项:
{
"angular2": "^2.0.0-beta.9",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
}
保存 package.json
文件, 在命令行中输入 npm install
下载这些包, 下载完成之后, 开发环境就准备好了。
npm install
使用 es5 开发 Angular2 应用
Angular2 是个客户端框架, 在浏览器中运行, 因此使用 Javascript (es5) 来做开发也是完全可行的。
首先在 HTML 页面中添加 Angular2 的 UMD 版本 js 文件的引用, 代码如下:
<script src="node_modules/rxjs/bundles/Rx.umd.min.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.min.js"></script>
<script src="node_modules/angular2/bundles/angular2-all.umd.min.js"></script>
UMD 的全称是 Universal Module Definition, 符合 UMD 定义的 Javascript 模块可以在任意的 Javascript 环境中执行。
下面就是一个最简单的 Angular2 的组件示例, 代码如下:
(function () {
var myApp = ng.core.Component({
template: '<h2>Hello, Angular 2</h2>' +
'<button (click)="doTest()">Click me.</button>',
selector: 'my-app'
})
.Class({
constructor: function () {
},
doTest: function () {
alert('You have clicked a button');
}
});
//ng.core.enableProdMode();
ng.platform.browser.bootstrap(myApp);
})();
上面完整的 html 源代码请在 github 上的项目中查看。
使用 TypeScript 开发 Angular2 应用
虽然完全能够使用 Javascript es5 来开发, 但是这并不是官方推荐的做法, 官方推荐的是 TypeScript , 默认的教程也都是使用 TypeScript 的。
TypeScript 最终会被编译成 JavaScript 的模块 (commonjs/amd/system) , 因此需要一个模块加载器, 官方使用的是 SystemJS, 因此我们要安装 SystemJS 模块:
npm install systemjs --save
还需要 TypeScript 编译器, gulp、 gulp-typescript 来实现 ts 文件的自动编译:
npm install typescript gulp gulp-typescript --save-dev
完整的 package.json
可以在我的 github 项目中查看。
安装完需要的包之后, 我们需要一个 TypeScript 的配置文件 tsconfig.json
来配置 TypeScript 的编译, 这个文件的代码如下:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules", ".idea"
]
}
现在, 在 HTML 页面中引入 Angular 的 SystemJS 模块版本, 代码如下:
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/rxjs/bundles/Rx.min.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.min.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
现在用 TypeScript 来重写上面 es5 版本的组件:
import { Component } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
@Component({
selector: 'my-app',
template: `
<h2>Hello, Angular2</h2>
<button (click)="doTest()">Click me.</button>
`
})
export class AppComponent {
constructor() {
}
doTest() {
alert('You have clicked a button');
}
}
bootstrap(AppComponent);
最后, 我们使用 gulp 来实现 TypeScript 的自动编译, 添加文件 gulpfile.js , 内容如下:
var gulp = require('gulp'),
tsc = require('gulp-typescript'),
sourcemaps = require('gulp-sourcemaps');
gulp.task('ts:app', function () {
var tsResult = gulp.src('app/**/*.ts')
.pipe(sourcemaps.init())
.pipe(tsc({
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}));
return tsResult.js.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist'));
});
gulp.task('dev', function () {
gulp.watch('app/**/*.ts', function () {
gulp.start('ts:app');
});
});
打开命令窗口, 输入:
gulp dev
然后可以开始愉快的使用 TypeScript 编写 Angular2 应用了。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 从 1 到 0 构建博客项目(1) -- 操作系统篇(1)
- Spring JPA 定义查询方法
- 代理工厂的简单应用
- iOS逆向之文件系统
- Kettle构建Hadoop ETL实践(四):建立ETL示例模型
- Java并发总篇
- 逻辑漏洞之密码找回漏洞(semcms)
- 逻辑漏洞之越权、支付漏洞
- 多线程基础(二): Thread源码分析
- JeecgBoot环境搭建及前后端项目启动
- Windows下MySQL 8.x和8.x以前版本的安装步骤
- Confluence 6 移动应用 app 管理员需要考虑什么
- leetcode链表之反转链表
- Prometheus监控神器-Kubernetes篇(一)
- Elastic:Elasticsearch 的分片管理策略