在本章中,让我们研究 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.
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="/attachments/tuploads/angular2/es6-shim.min.js"></script> <script src="/attachments/tuploads/angular2/system-polyfills.js"></script> <script src="/attachments/tuploads/angular2/angular2-polyfills.js"></script> <script src="/attachments/tuploads/angular2/system.js"></script> <script src="/attachments/tuploads/angular2/typescript.js"></script> <script src="/attachments/tuploads/angular2/Rx.js"></script> <script src="/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(静态服务器)在浏览器中加载,并在应用程序文件更改时刷新浏览器。
稍后,浏览器选项卡将打开,并显示以下输出: