让我们从零开始,使用Typescript构建一个超级简单的 AngularJs 2应用。
先跑一个DEMO
运行这个 DEMO先来感受一下 AngularJS2 的应用。
下面是这个应用的文件结构
1
2
3
4
5
6
|
angular2-app |_ app | |_ app.component.ts | |_ main.ts |_ index.html |_ license.md |
总结来说就是一个 index.html 文件和两个在 app 文件下的 Typescript 文件, 我们可以hold住!
下面我们将一步一步的构建这样的一个程序:
- 配置我们的开发环境
- 编写 Angular 初始化组件
- 引导它控制我们主要的 index.html 页面
- 编写index.html 页面
开发环境搭建
建立文件夹
1
2
|
mkdir angular2-app cd angular2-app |
配置TYPESCRIPT
需要通过一些特殊的设置来指导Typesript进行编译。
新建一个 tsconfig.json 文件,放于项目根目录下,并输入一下配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
{ "compilerOptions" : { "target" : "es5" , "module" : "system" , "moduleResolution" : "node" , "sourceMap" : true , "emitDecoratorMetadata" : true , "experimentalDecorators" : true , "removeComments" : false , "noImplicitAny" : false }, "exclude" : [ "node_modules" , "typings/main" , "typings/main.d.ts" ] } |
我们稍后在附录中会详细讲解这个 tsconfig.json
TYPESCRIPT TYPINGS
有很多Javascript的库,继承了一些 Javascript的环境变量以及语法, Typescript编译器并不能原生的支持这些。 所以我们使用 Typescript 类型定义文件 – d.ts 文件 (即 typings.json) 来解决这些兼容性问题。
创建 typings.json 文件,放于项目根目录下
1
2
3
4
5
|
{ "ambientDependencies" : { "es6-shim" : "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2" } } |
同样的,在附录中会有更详细点的解释
添加我们需要的库
我们推荐使用npm来管理我们的依赖库。
在项目根目录下创建package.json文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
{ "name" : "angular2-quickstart" , "version" : "1.0.0" , "scripts" : { "start" : "concurrent /" npm run tsc:w/ " /" npm run lite/ " " , "tsc" : "tsc" , "tsc:w" : "tsc -w" , "lite" : "lite-server" , "typings" : "typings" , "postinstall" : "typings install" }, "license" : "ISC" , "dependencies" : { "angular2" : "2.0.0-beta.7" , "systemjs" : "0.19.22" , "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" }, "devDependencies" : { "concurrently" : "^2.0.0" , "lite-server" : "^2.1.0" , "typescript" : "^1.7.5" , "typings" : "^0.6.8" } } |
在附录中,会有更详细的解释
安装这些依赖包只需要运行
1
|
npm install |
这样我们就完成了我们的开发环境的搭建。
第一个ANGULAR 组件
组件是Angular中最基本的一个概念。 一个组件包含一个视图 – 我们用来展示信息或者完成用户交互的页面。 技术上来讲, 一个组件就是一个控制模板试图的类, 在开发应用中会写很多组件。 这是我们第一次尝试写一个组件,所以我们保证他尽可能的简单。
创建一个应用源码的子目录
我们习惯上将我们的程序放在项目根目录下的 app 子目录下,所以首先创建一个 app 文件夹
1
2
|
mkdir app cd app |
创建组件文件
在 app 文件夹下创建一个 app.component.ts 文件,然后输入以下内容
1
2
3
4
5
6
7
|
import {Component} from 'angular2/core' ; @Component({ selector: 'my-app' , template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { } |
让我们来详细的看一下这个文件, 在文件的最后一行,我们定义了一个 类。
组件类
在这个文件地步,我们创建了一个啥都不做的空组件类 AppComponent。 当我们真正开发应用的时候, 我们可以扩展这个类,比如添加一些属性和方法逻辑。 这个 AppComponent 类之所以为空是因为我们在入门程序中他不用做任何事情。
模块
Angular应用是模块化的。 他们包含很多完成某项功能的模块文件。
大多数程序文件会 export出一个东西比如一个组件。 我们的 app.component.ts 文件 exports出了 AppComponent
export class AppComponent { }
exports使一个文件转变成一个模块。 文件名(不包含扩展名)通常就是这个模块的名称。 所以, app.component 就是我们的第一个模块的名称。
一些更复杂的应用会有继承于 AppComponent 的子组件, 而且会有很多文件和模块。但是我们的快速入门程序不需要这么多, 一个组件就够了。
如果一个组件依赖其他的组件, 在Typescript应用中, 当我们需要引入其他模块的时候,直接import进来就可以使用。 例如:
import {AppComponent} from './app.component'
Angular 同样是一个模块, 他是一系列模块的集合。 所以当我们需要angular的一些功能时,同样的把Angular引入进来。
组件注解
当我们给一个类加上注解的时候, 一个类就变成了 Angular的组件。 Angular 需要通过注解来搞明白怎么去构建视图, 还有组件是怎么与应用的其他部分进行整合的。
我们用 Componet 方法来定义一个组件的注解, 这个方法需要引入 angular2/core 才可以使用。
1
|
import {Component} from 'angular2/core' ; |
在Typescript中,我们在类上面添加注解, 注解的方式很简单,使用 @ 作为前缀进行注解。
1
2
3
4
|
@Component({ selector: 'my-app' , template: '<h1>My First Angular 2 App</h1>' }) |
@Component 告诉Angular这个类是一个组件。 里面的参数有两个, selector 和 template.
selector参数是一个 css 选择器, 这里表示选择 html 标签为 my-app的元素。 Angular 将会在这个元素里面展示AppComponent 组件。
记住这个 my-app 元素,我们会在 index.html 中用到
template控制这个组件的视图, 告诉Angular怎么去渲染这个视图。 现在我们需要让 Angular去加载这个组件
初始化引导
在 app 文件夹下创建 main.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
我们需要做两个东西来启动这个应用
Angular自带的 bootstrap 方法
我们刚刚写好的启动组件
把这个两个统统 import进来,然后将组件传递给 bootstrap 方法。
附录中会详细讲解 为什么我们从 angular2/platform/browser中引入bootstrap 方法,还有为什么会创建一个main.ts文件
现在万事俱备,只差东风啦!
添加 INDEX.HTML 文件
首先回到项目的根目录,在根目录中创建index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
< html > < head > < title >Angular 2 QuickStart</ title > < meta name = "viewport" content = "width=device-width, initial-scale=1" > <!-- 1. Load libraries --> <!-- IE required polyfills, in this exact order --> < script src = "node_modules/es6-shim/es6-shim.min.js" ></ script > < script src = "node_modules/systemjs/dist/system-polyfills.js" ></ script > < script src = "node_modules/angular2/bundles/angular2-polyfills.js" ></ script > < script src = "node_modules/systemjs/dist/system.src.js" ></ script > < script src = "node_modules/rxjs/bundles/Rx.js" ></ script > < script src = "node_modules/angular2/bundles/angular2.dev.js" ></ script > <!-- 2. Configure SystemJS --> < script > System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/main') .then(null, console.error.bind(console)); </ script > </ head > <!-- 3. Display the application --> < body > < my-app >Loading...</ my-app > </ body > </ html > |
HMTL中三个部分需要说明一下:
加载我们需要的 javascript库, 附录中会有详细的介绍
配置了 System 并让他import 引入 main 文件
添加 my-app 这个HTML元素,这里才是加载我们Angular实例的地方!
我们需要一些东西来加载应用的模块,这里我们使用 SystemJs。 这里有很多选择,SystemJS不一定是最好的选择,但是这个挺好用。
SystemJs的具体使用不在我们的快速入门教程里,在附录中会有一个剪短的说明。
当Angular调用main.ts文件中的 bootstrap方法, 它读取 AppComponent 的注解,找到 my-app 这个HTML元素, 并将template 渲染进去。
编译然后运行
只需要在终端中输入
1
|
npm start |
程序将会将Typescript编译成 Javascript ,同事启动一个 lite-server, 加载我们编写的index.html。 显示 My First Angular 2 App.
最终的结构
1
2
3
4
5
6
7
8
9
10
|
|_ angular2-quickstart |_ app | |_ app.component.ts | |_ main.ts |_ node_modules … |_ typings … |_ index.html |_ package.json |_ tsconfig.json |_ typings.json |