让我们从零开始，使用Typescript构建一个超级简单的 AngularJs 2应用。
先跑一个DEMO
下面是这个应用的文件结构
总结来说就是一个 index.html 文件和两个在 app 文件下的 Typescript 文件， 我们可以hold住！
下面我们将一步一步的构建这样的一个程序：
开发环境搭建
建立文件夹
配置TYPESCRIPT
需要通过一些特殊的设置来指导Typesript进行编译。 新建一个 tsconfig.json 文件，放于项目根目录下，并输入一下配置
我们稍后在附录中会详细讲解这个 tsconfig.json
TYPESCRIPT TYPINGS
有很多Javascript的库，继承了一些 Javascript的环境变量以及语法， Typescript编译器并不能原生的支持这些。 所以我们使用 Typescript 类型定义文件 – d.ts 文件 （即 typings.json） 来解决这些兼容性问题。
创建 typings.json 文件，放于项目根目录下
同样的，在附录中会有更详细点的解释
添加我们需要的库
我们推荐使用npm来管理我们的依赖库。 在项目根目录下创建package.json文件
在附录中，会有更详细的解释
安装这些依赖包只需要运行
这样我们就完成了我们的开发环境的搭建。
第一个ANGULAR 组件
组件是Angular中最基本的一个概念。 一个组件包含一个视图 – 我们用来展示信息或者完成用户交互的页面。 技术上来讲， 一个组件就是一个控制模板试图的类， 在开发应用中会写很多组件。 这是我们第一次尝试写一个组件，所以我们保证他尽可能的简单。
创建一个应用源码的子目录
我们习惯上将我们的程序放在项目根目录下的 app 子目录下，所以首先创建一个 app 文件夹
创建组件文件
在 app 文件夹下创建一个 app.component.ts 文件，然后输入以下内容
@Component({
selector: 'my-app',template: '
My First Angular 2 App
'})
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 才可以使用。
在Typescript中，我们在类上面添加注解， 注解的方式很简单，使用 @ 作为前缀进行注解。
My First Angular 2 App
' })@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); 我们需要做两个东西来启动这个应用
我们刚刚写好的启动组件
把这个两个统统 import进来，然后将组件传递给 bootstrap 方法。
附录中会详细讲解 为什么我们从 angular2/platform/browser中引入bootstrap 方法，还有为什么会创建一个main.ts文件
现在万事俱备，只差东风啦！
添加 INDEX.HTML 文件
首先回到项目的根目录，在根目录中创建index.html
<script src="node_modules/es6-shim/es6-shim.min.js">
<script src="node_modules/systemjs/dist/system-polyfills.js">
<script src="node_modules/angular2/bundles/angular2-polyfills.js">
<script src="node_modules/systemjs/dist/system.src.js">
<script src="node_modules/rxjs/bundles/Rx.js">
<script src="node_modules/angular2/bundles/angular2.dev.js">
HMTL中三个部分需要说明一下：
加载我们需要的 javascript库， 附录中会有详细的介绍
配置了 System 并让他import 引入 main 文件
添加 my-app 这个HTML元素，这里才是加载我们Angular实例的地方！
我们需要一些东西来加载应用的模块，这里我们使用 SystemJs。 这里有很多选择，SystemJS不一定是最好的选择，但是这个挺好用。
SystemJs的具体使用不在我们的快速入门教程里，在附录中会有一个剪短的说明。
当Angular调用main.ts文件中的 bootstrap方法， 它读取 AppComponent 的注解，找到 my-app 这个HTML元素， 并将template 渲染进去。
编译然后运行
只需要在终端中输入
程序将会将Typescript编译成 Javascript ，同事启动一个 lite-server， 加载我们编写的index.html。 显示 My First Angular 2 App.
最终的结构
原文地址：https://www.jb51.cc/js/49880.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
