Angular 2 开发环境 | Angular2 教程

在本章中，让我们研究 Angular 2的开发环境。

Angular使用 TypeScript 它是开发Angular应用程序的主要语言。
TypeScript是一个超级JavaScript集合，它被迁移到TypeScript，用TypeScript编写的代码不太容易出现运行时错误。

要设置开发环境，请按照以下步骤操作:

步骤(1):通过在命令提示符下键入以下命令，在本地驱动器中创建项目文件夹。

mkdir angular2-demo
cd angular2-demo

创建配置文件

步骤(2):您需要创建 tsconfig.json ，这是TypeScript编译器配置文件。它指导编译器生成JavaScript文件。

{
  "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"
  ]
}

步骤(3):在项目文件夹 angular2-demo 中创建 typings.json 文件，如下所示:

typings.json

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

大量的JavaScript库扩展了具有特征和语法的JavaScript环境，而这些特性和语法本身不能被TypeScript编译器识别。 typings.json 文件用于在Angular应用程序中标识TypeScript定义文件。

在上面的代码中，有三种类型的文件，如下所示:

core-js :它为我们的ES5浏览器带来ES2015 / ES6功能。
jasmine :这是Jasmine测试框架的类型。
node :它用于引用nodejs环境中的对象的代码。

这些类型用于开发更大的Angular应用。

步骤(4):使用以下代码将 package.json 文件添加到您的 angular2-demo 项目文件夹:

package.json

{
  "name": "angular2-demo",
  "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"
  }
}

package.json 将包含我们的应用所需的包。这些包使用npm(节点程序包管理器)进行安装和维护。要安装 npm 请点击此处。

步骤(5):要安装软件包，请在命令提示符下运行以下npm命令。

npm install

创建我们的第一个Angular组件

步骤(6):在项目文件夹中的Angular应用程序组件的位置创建一个名为 app / 的子文件夹。您可以使用以下命令创建文件夹:

mkdir app
cd app

步骤(7):您创建的文件需要以 .ts 扩展名保存。使用以下代码在您的 app / 文件夹中创建一个名为 environment_app.component.ts 的文件:

environment_app.component.ts

import {Component, View} from "angular2/core";

@Component({
   selector: 'my-app'
})

@View({
  template: '<h2>My First Angular 2 App</h2>'
})

export class AppComponent {

}

上述代码将从 angular2 / core 导入组件和 View
@Component 是一个Angular 2装饰器，允许您将元数据与组件类相关联。
my-app 可以用作HTML标记来注入，并且可以用作组件。
@view 包含一个模板，用于告诉Angular如何渲染视图。
export 指定，此组件将在文件外部可用。

步骤(8):接下来，使用以下代码创建 environment_main.ts 文件:

environment_main.ts

import {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./environment_app.component"

bootstrap(AppComponent);

environment_main.ts 文件告诉Angular加载组件。
要启动应用程序，我们需要导入Angular的浏览器引导函数和应用程序的根组件。
导入后，通过传递根组件类型(即 AppComponent )来调用 bootstrap 。

步骤(9):现在使用以下代码在您的项目文件夹 angular2-demo / 中创建 index.html

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/es6-shim.min.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/system-polyfills.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/angular2-polyfills.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/system.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/typescript.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/Rx.js"></script>
    <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/angular2.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'app': {defaultExtension: 'ts'}}
      });
      System.import('/app/environment_main')
            .then(null, console.error.bind(console));
    </script>
  </head>
<body>
   <my-app>Loading...</my-app>
</body>
</html>

Angular将使用我们的组件在浏览器中启动该应用，并将其放置在 index.html 上的特定位置。

编译并运行

步骤(10):要运行应用程序，请在终端窗口中键入以下命令:

npm start

上述命令运行两个并行节点进程，如下所示:

TypeScript编译器在watch模式下
lite-server(静态服务器)在浏览器中加载，并在应用程序文件更改时刷新浏览器。

稍后，浏览器选项卡将打开，并显示以下输出: