angular2使用简单介绍

让咱们从零开始，使用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住！

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

1. 配置咱们的开发环境
2. 编写 Angular 初始化组件
3. 引导它控制咱们主要的 index.html 页面
4. 编写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