Angular 2 TypeScript 环境配置

现在我们来学习如何使用 TypeScript 创建 AngularJS 2 应用

这也是官方推荐使用的,本教程接下来的范例也采用 TypeScript 来编写

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

如果你不了解TypeScript,可以查阅以下资料

  1. TypeScript 基础教程
  2. TypeScript 中文手册

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

如果你还没安装 npm 或者不了解 npm 可以查看我们 NPM 使用介绍

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

安装方法如下

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

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

$ cnpm install

创建与配置项目

创建目录

$ mkdir angular2-typescript-quickstart
$ cd angular2-typescript-quickstart

创建配置文件

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

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

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

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

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

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

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

1. angular2-typescript-quickstart/package.json

{
  "name": "angular2-typescript-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.3.4",
    "typings":"^1.3.2"
  }
}

2. angular2-typescript-quickstart/tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noStrictGenericChecks": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

3. angular2-typescript-quickstart/typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  }
}

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

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                       'npm:rxjs',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

安装依赖

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

npm install --registry=https://registry.npm.taobao.org

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

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

创建应用

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

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

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

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

$ mkdir app
$ cd app

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

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports:      [ BrowserModule ]
})
export class AppModule { }

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

创建组件并添加到应用中

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

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

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>我的第一个 AngularJS 2 TypeScript  应用</h1>'
})
export class AppComponent { }

在上面的代码中,

  1. angular2/core 引入了 Component

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

  3. my-app 是一个 CSS 选择器,可用在 HTML 标签中,作为一个组件使用

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

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

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

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

启动应用

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

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

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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

定义该应用的入口 HTML 页面

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

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <title>Angular 2 TypeScript 范例 - 简单教程(twle.cn)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <!-- 1. 载入库 -->
    <!-- IE 需要 polyfill -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. 配置 SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <!-- 3. 显示应用 -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

在这个 HTML 文件中

  1. JavaScript 库

    • core-js 是为老式浏览器提供的填充库
    • zone.jsreflect-metadata 库是 Angular 需要的
    • SystemJS 库是用来做模块加载的
  2. SystemJS 的配置文件和脚本,可以导入并运行了我们刚刚在 main 文件中写的 app 模块

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

添加一些样式

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

/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}

编译并运行应用程序

打开终端窗口,输入以下命令:

npm start

访问 http://localhost:3000/,浏览器显示结果为:

这样我们的第一个 Angular2 TypeScript 的应用就算创建完成了,最终的目录结构为

范例源码

这个章节所用的源码可以通过点击以下链接下载( 不包含 node_modules )

源代码下载

需要使用下面的命令查看结果

$ npm install --registry=https://registry.npm.taobao.org
$ npm start
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.