angular2使用简单介绍

让我们从零开始，使用Typescript构建一个超级简单的 AngularJs 2应用。

先跑一个DEMO

运行这个 DEMO先来感受一下 AngularJS2 的应用。

下面是这个应用的文件结构

angular2-app|_ app| |_ app.component.ts| |_ main.ts|_ index.html|_ license.md

总结来说就是一个 index.html 文件和两个在 app 文件下的 Typescript 文件， 我们可以hold住！

下面我们将一步一步的构建这样的一个程序：

配置我们的开发环境 编写 Angular 初始化组件 引导它控制我们主要的 index.html 页面 编写index.html 页面

开发环境搭建

建立文件夹

mkdir angular2-appcd  angular2-app

配置TYPESCRIPT

需要通过一些特殊的设置来指导Typesript进行编译。
新建一个 tsconfig.json 文件，放于项目根目录下，并输入一下配置

{ "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 文件，放于项目根目录下

{ "ambientDependencies": {  "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2" }}

同样的，在附录中会有更详细点的解释

添加我们需要的库

我们推荐使用npm来管理我们的依赖库。
在项目根目录下创建package.json文件

{ "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" }}

在附录中，会有更详细的解释

安装这些依赖包只需要运行

npm install

这样我们就完成了我们的开发环境的搭建。

第一个ANGULAR 组件

组件是Angular中最基本的一个概念。 一个组件包含一个视图 – 我们用来展示信息或者完成用户交互的页面。 技术上来讲， 一个组件就是一个控制模板试图的类， 在开发应用中会写很多组件。 这是我们第一次尝试写一个组件，所以我们保证他尽可能的简单。