今天跟随官网中的快速入门,开始我的第一个Angular2程序.
目录结构是这样的
angular2-quickstart
|__app
| |__app.component.ts
| |__boot.ts
|__index.html
|__license.md
因为是入门示例里我不需要过多的了解其中的细节。只要跟随它的步骤跑通这个例子即可。
1. 配置运行环境。
2. 用TypeScript写Angular2组件。
3. 引导程序。
4. 写主页面(index.html)。
配置运行环境
延用之前学习TypeScript时的工程目录在D:\workspace\vs文件夹下建一个angular2-quickstart文件夹,
使用VS打开这个文件夹,新建一个package.json文件,我们需要在这里配置我们需要的库文件。
package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}
在命令行下定位到当前文件位置,运行
npm install
配置typescript环境
在跟目录下在新建一个 tsconfig.json文件并粘贴下面的代码
tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
这样我们就完成了我们的环境配置。
开始写我们的Angular组件
组件管理视图-通过这个视图可以向用户展示信息以及响应用户的反馈。
组件同样是一个类,一个控制视图模板的类。
在跟目录下建一个app文件夹
在app下增加一个组件文件 app.component.ts
app/app.component.ts
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
在真实的应用中我们会在AppComponent
中写许多和业务有关的逻辑,但在入门程序中我们什么也不做,让他足够简单。
模块
Angular程序是模块化的,它是由许多专职于不同角色的模块组成的,并且使用export
暴露以供外部调用。
export class AppComponent { }
引入一个外部模块的语法我们在之前的TS学习中使用过。
app/boot.ts
import {AppComponent} from './app.component'
注解
入门示例中把它叫做Component Metadata但我觉得称为注解更好理解吧(迷糊)。
一个类想要成为Anglar的组件,需要我们为它加上特定的注解,Anglar需要这些注解来构造视图以及与应用的其它组件交互。
定义一个组件使用@Component
注解,为此我们需要引入Angular的核心库。
import {Component} from 'angular2/core';
写注解是与其它语言如Java相类似的,都是在这个类上进行标识
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
selector
是一个简单的HTML选择器,会选择以my-app
命名的HTML标签<my-app></my-app>
,Angular将会在此处创建,显示一个实例。
template
是这个组件对应的模板,它是一段HTML,指导Anglar如何呈现一个视图。
引导程序
在app文件夹下新建一个boot.ts文件
app/boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
主页面(index.html)
在跟目录下新建一个index.html文件
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. 载入 libraries -->
<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. 配置 SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. 显示结果 -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
值得注意的
1. AngularJS运行依赖于 angular2-polyfills.js
和 Rx.js
.
2. 配置SystemJS
并且由它启动boot引导程序.
3. 我们程序运行的结果将显示在<my-app></my-app>
中.
程序的流程大概是,我们通过SystemJS加载我们的boot.ts,在boot.ts中执行bootstrap
函数,它会读取AppComponent
组件中的注解,查找my-app
选择器,定位<my-app>
标签,并在这个标签之间用我们定义的模板渲染它.
运行
在程序的跟目录下执行
npm start
执行这个命令会完成两件事件.
1. 进行编译并在观查模式(所有对程序的改动会立即反应到浏览器中)
2. 启动一个lite-server服务器,载入index.html,并在程序改动时刷新浏览器
过一会儿在浏览器中会看到
My First Angular 2 App
完成了我们的第一个例子…
ps.哎英语不好是硬伤啊.