Angular 2 TypeScript 环境配置

TypeScript 是由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法

在我们继续学习之前，你需要确保已经安装了 npm

由于 npm 官网镜像国内访问太慢，这里我使用了淘宝的 npm 镜像

安装方法如下

运行成功后我们就可以使用 cnpm 命令来安装模块

创建与配置项目

创建目录

创建配置文件

Angular 项目需要以下几个配置文件

package.json
标记本项目所需的 npm 依赖包

tsconfig.json
定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码

typings.json
为那些 TypeScript 编译器无法识别的库提供了额外的定义文件

systemjs.config.js
为模块加载器提供了该到哪里查找应用模块的信息， 并注册了所有必备的依赖包

它还包括文档中后面的例子需要用到的包

现在，我们来创建刚刚提到的几个文件

1. angular2-typescript-quickstart/package.json

2. angular2-typescript-quickstart/tsconfig.json

3. angular2-typescript-quickstart/typings.json

4. angular2-typescript-quickstart/systemjs.config.js

安装依赖

现在，我们使用 cnpm 命令来安装依赖包

命名运行成功后，angular-quickstart 目录下就会生成一个 node_modules 目录

这里包含了我们这个实例需要的模块，我们可以看下项目的目录结构：

创建应用

用 NgModules 把 Angular 应用组织成了一些功能相关的代码块

Angular 本身是被拆成一些独立的 Angular 模块，这样我们在应用中只需要导入需要的 Angular 部分

每个 Angular 应用至少需要一个 root module(根模块) ，范例中为 AppModule

现在，我们在 angular2-typescript-quickstart 目录下创建 app 目录

然后在 app 目录下创建 app.module.ts 文件，复制以下代码

由于我们这个应用是一个运行在浏览器中的 Web 应用，所以根模块需要从 @angular/platform-browser 中导入 BrowserModule 并添加到 imports 数组中

创建组件并添加到应用中

每个 Angular 应用都至少有一个 根组件 ， 范例中为 AppComponent

新建文件 app.component.ts ，并复制以下内容

在上面的代码中，

从 angular2/core 引入了 Component 包

@Component 是 Angular 2 的 装饰器 ，它会把一份元数据关联到 AppComponent 组件类上

my-app 是一个 css 选择器，可用在 html 标签中，作为一个组件使用

@view 包含了一个 template ，告诉 Angular 如何渲染该组件的视图

export 指定了组件可以再文件外使用

然后重新打开 app.module.ts 文件，导入新的 AppComponent ，并把它添加到 NgModule 装饰器的 declarations 和 bootstrap 字段中

app.module.ts

启动应用

好了，现在我们来告诉 Angular 如何启动应用

在 angular2-typescript-quickstart/app 目录下创建 main.ts 文件，复制以下代码

上面的代码初始化了终端(浏览器)，让我们的代码可以运行，然后在该终端上启动 AppModule

定义该应用的入口 HTML 页面

在 angular2-typescript-quickstart 目录下 ( app 同一级目录) 创建文件 index.html 并复制以下内容

在这个 HTML 文件中

JavaScript 库

SystemJS 的配置文件和脚本，可以导入并运行了我们刚刚在 main 文件中写的 app 模块

<my-app> 标签是应用载入的地方

添加一些样式

在 index.html 同级的目录下创建一个 style.css 文件，并复制以下内容

编译并运行应用程序

打开终端窗口，输入以下命令：

访问 http://localhost:3000/完成了

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！