Angular 2 开发环境
在本章中，让我们研究 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
Error messages in red may appear while installing npm, just ignore them.创建我们的第一个Angular组件A component is the fundamental concept of Angular. A component is a class that controls a view template - a part of a web page where information to the user is displayed and user feedback is responded. Components are required to build Angular apps.步骤(6):在项目文件夹中的Angular应用程序组件的位置创建一个名为 app / 的子文件夹。 您可以使用以下命令创建文件夹:mkdir app
cd app
步骤(7):您创建的文件需要以 .ts 扩展名保存。 使用以下代码在您的 app / 文件夹中创建一个名为 environment_app.component.ts 的文件:environment_app.component.tsimport {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.tsimport {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(静态服务器)在浏览器中加载，并在应用程序文件更改时刷新浏览器。稍后，浏览器选项卡将打开，并显示以下输出: