angular2使用简单介绍
让我们从零开始，使用Typescript构建一个超级简单的AngularJs2应用。
先跑一个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页面
开发环境搭建
建立文件夹
mkdirangular2-app cdangular2-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
TYPESCRIPTTYPINGS
有很多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/"npmruntsc:w/"/"npmrunlite/"",
"tsc":"tsc",
"tsc:w":"tsc-w",
"lite":"lite-server",
"typings":"typings",
"postinstall":"typingsinstall"
},
"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"
}
}
在附录中，会有更详细的解释
安装这些依赖包只需要运行
npminstall
这样我们就完成了我们的开发环境的搭建。
第一个ANGULAR组件
组件是Angular中最基本的一个概念。一个组件包含一个视图–我们用来展示信息或者完成用户交互的页面。技术上来讲，一个组件就是一个控制模板试图的类，在开发应用中会写很多组件。这是我们第一次尝试写一个组件，所以我们保证他尽可能的简单。
创建一个应用源码的子目录
我们习惯上将我们的程序放在项目根目录下的app子目录下，所以首先创建一个app文件夹
mkdirapp cdapp
创建组件文件
在app文件夹下创建一个app.component.ts文件，然后输入以下内容
import{Component}from'angular2/core';
@Component({
selector:'my-app',
template:'<h1>MyFirstAngular2App</h1>'
})
exportclassAppComponent{}
让我们来详细的看一下这个文件，在文件的最后一行，我们定义了一个类。
组件类
在这个文件地步，我们创建了一个啥都不做的空组件类AppComponent。当我们真正开发应用的时候，我们可以扩展这个类，比如添加一些属性和方法逻辑。这个AppComponent类之所以为空是因为我们在入门程序中他不用做任何事情。
模块
Angular应用是模块化的。他们包含很多完成某项功能的模块文件。
大多数程序文件会export出一个东西比如一个组件。我们的app.component.ts文件exports出了AppComponent
exportclassAppComponent{}
exports使一个文件转变成一个模块。文件名（不包含扩展名）通常就是这个模块的名称。所以，app.component就是我们的第一个模块的名称。
一些更复杂的应用会有继承于AppComponent的子组件，而且会有很多文件和模块。但是我们的快速入门程序不需要这么多，一个组件就够了。
如果一个组件依赖其他的组件，在Typescript应用中，当我们需要引入其他模块的时候，直接import进来就可以使用。例如：
import{AppComponent}from'./app.component'
Angular同样是一个模块，他是一系列模块的集合。所以当我们需要angular的一些功能时，同样的把Angular引入进来。
组件注解
当我们给一个类加上注解的时候，一个类就变成了Angular的组件。Angular需要通过注解来搞明白怎么去构建视图，还有组件是怎么与应用的其他部分进行整合的。
我们用Componet方法来定义一个组件的注解，这个方法需要引入angular2/core才可以使用。
import{Component}from'angular2/core';
在Typescript中，我们在类上面添加注解，注解的方式很简单，使用@作为前缀进行注解。
@Component({
selector:'my-app',
template:'<h1>MyFirstAngular2App</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
<html>
<head>
<title>Angular2QuickStart</title>
<metaname="viewport"content="width=device-width,initial-scale=1">
<!--1.Loadlibraries-->
<!--IErequiredpolyfills,inthisexactorder-->
<scriptsrc="node_modules/es6-shim/es6-shim.min.js"></script>
<scriptsrc="node_modules/systemjs/dist/system-polyfills.js"></script>
<scriptsrc="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<scriptsrc="node_modules/systemjs/dist/system.src.js"></script>
<scriptsrc="node_modules/rxjs/bundles/Rx.js"></script>
<scriptsrc="node_modules/angular2/bundles/angular2.dev.js"></script>
<!--2.ConfigureSystemJS-->
<script>
System.config({
packages:{
app:{
format:'register',
defaultExtension:'js'
}
}
});
System.import('app/main')
.then(null,console.error.bind(console));
</script>
</head>
<!--3.Displaytheapplication-->
<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渲染进去。
编译然后运行
只需要在终端中输入
npmstart
程序将会将Typescript编译成Javascript，同事启动一个lite-server，加载我们编写的index.html。显示MyFirstAngular2App.
最终的结构
|_angular2-quickstart |_app ||_app.component.ts ||_main.ts |_node_modules… |_typings… |_index.html |_package.json |_tsconfig.json |_typings.json