Visual Studio Update 3 中的 Angular 2 分步实现

ganesh16

4.09/5 (9投票s)

2017 年 3 月 31 日

CPOL

5分钟阅读

17407

211

我们将详细介绍在 Visual Studio 中实现 Angular 2 所涉及的步骤。

引言

作为一个初学者，我在实现 Angular 2 并清晰了解其生命周期方面遇到了很多困难。本文将详细介绍如何配置 Angular 2 项目以及如何编写 Angular 2 应用程序。我们将超越“Hello World!”，实现双向绑定。那么，让我们开始吧。

必备组件

是的，有一些重要的安装过程您必须完成。

注意：先决条件中的内容摘自 - https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html

先决条件：安装 Node.js
如果您的计算机上还没有安装 Node.js® 和 npm，请进行安装。通过在终端/控制台窗口中运行 node -v 和 npm -v 来验证您正在运行 node 版本 4.6.x 或更高版本，以及 npm 3.x.x 或更高版本。
先决条件：安装 Visual Studio 2015 Update 3
先决条件：配置外部 Web 工具
配置 Visual Studio 以使用全局外部 Web 工具，而不是 Visual Studio 自带的工具。
使用 工具 | 选项 打开选项对话框。
在左侧的树中，选择 项目和解决方案 | 外部 Web 工具。
在右侧，将 $(PATH) 条目移到 $(DevEnvDir) 条目之上。这会告诉 Visual Studio 在使用其自己的外部工具版本之前，先使用全局路径中找到的外部工具（例如 npm）。
单击“确定”关闭对话框。
重新启动 Visual Studio 以使此更改生效。
Visual Studio 现在将首先在当前工作区中查找外部工具，如果找不到，则查找全局路径，如果仍然找不到，Visual Studio 将使用其自己的工具版本。
先决条件：为 Visual Studio 2015 安装 Typescript 2
虽然 Visual Studio Update 3 开箱即用地提供了 Typescript 支持，但它目前不提供开发 Angular 应用程序所需的 Typescript 2。

安装 Typescript 2

下载并安装 适用于 Visual Studio 2015 的 Typescript 2.0
或者使用 npm 安装：npm install -g typescript@2.0。

您可以在此处了解有关 Visual Studio 中 Typescript 2 支持的更多信息：这里。

此时，Visual Studio 已准备就绪。最好关闭 Visual Studio 并重新启动它，以确保一切都已干净启动。

开始吧

注意：需要基本的 Typescript 知识。

在 VS2015 中创建一个新的 ASP.NET 空 Web 应用程序项目 => 同时，请确保取消选中 Application Insights 复选框。
添加一个 NPM 配置文件 => 右键单击解决方案 => 添加新项 => Npm 配置文件，即 package.json 文件

将以下代码复制并粘贴到 package.json 中并保存。现在，作为初学者，在熟悉 npm 结构及其工作原理后，您将有一个清晰的认识，并且我也会在本文中尽可能地解释。

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" 
           --kill-others --success first",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",
    "pree2e": "webdriver-manager update",
    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "angular-in-memory-web-api": "~0.2.1",
    "systemjs": "0.19.40",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.1",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "concurrently": "^3.1.0",
    "lite-server": "^2.2.2",
    "typescript": "~2.0.10",
    "canonical-path": "0.0.2",
    "http-server": "^0.9.0",
    "tslint": "^3.15.1",
    "lodash": "^4.16.4",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~4.0.13",
    "rimraf": "^2.5.4",
    "@types/node": "^6.0.46",
    "@types/jasmine": "^2.5.36",
    "@types/selenium-webdriver": "2.53.33"
  },
  "repository": {}
}

当您保存此文件时，Visual Studio 会根据 package.json 中的配置自动尝试通过 npm 命令获取重要文件。您会注意到底部的消息栏，几分钟后，它会显示消息 - “安装包完成”。

添加一个 Typescript JSON 配置文件 => 右键单击解决方案 => 添加新项 => Typescript JSON 配置文件，即 tsconfig.json 文件，并将以下代码添加到其中并保存。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

现在转到文件资源管理器中的项目位置，删除 node_module 文件夹。
在 Visual Studio 中，右键单击 package.json 文件，然后点击“还原包”。

在第 5 步中，我们删除 node_module 文件夹是因为在创建时，该文件夹没有关于 tsconfig.json 文件的文件，而在第 6 步中，我们重新创建 node_module 文件夹，它会根据 package.json 配置以及 tsconfig.json 的文件恢复所有文件。现在我们准备迈出实现 Angular 应用程序的第一步，到目前为止，我们只配置了 Angular 2 项目。

在项目下添加一个名为 systemjs.config.js 的 JavaScript 文件，并添加以下代码

/**
 * 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',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // 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'
      }
    }
  });
})(this);

这也是一个配置文件。请注意代码中的注释，有两件重要的事情：

我们的代码所在的位置，即文件夹名称，我在这里第 14 行提到了“app”
以及我们的起始文件，运行 Angular 2 应用程序，我在这里第 33 行提到了“main.js”

正如我们在上一步中配置的那样，添加一个名为“app”的文件夹，并在其中添加“main.ts”，即 TypeScript 文件。
Typescript 是 JavaScript 的严格超集，即代码将转换为 JavaScript。Angular 2 强制要求使用 Typescript。这意味着我们的 main.ts 文件将根据我们在 systemjs.config.js 文件中的设置转换为 main.js 文件。
将以下代码添加到 main.ts 文件中
```
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
import { AppModule } from "./app.module"
platformBrowserDynamic().bootstrapModule(AppModule);
```
请注意代码，这里我们正在创建我们的模块，在这里我们将其命名为“AppModule”。

platformBrowserDynamic - 只是一个从 @angular/platform-browser-dynamic 文件导出的类。

我们通过将模块传递给第 3 行的 bootstrapModule 函数来引导我们的模块进入 Angular 2。
在上一步中，我们只定义了我们的模块，所以我们在 app 文件夹中一个名为“app.module.ts”的另一个文件中创建/声明我们的模块，并添加以下代码
```
import { NgModule } from "@angular/core"
import { BrowserModule } from "@angular/platform-browser"
import { FormsModule } from '@angular/forms';
import { AppComponent } from "./app.component"

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }
```
在此文件中，我们使用 Angular 2 的语法方式声明了我们的 AppModule。请注意第 4 行，我们使用 AppComponent 导出我们的 AppModule，它也是一个类，该类本身就声明了 UI 设计。
如第 10 步所述，我们必须创建/声明 AppComponent。所以添加一个名为“app.component.ts”的 TypeScript 文件，并将以下代码添加到其中
```
import { Component } from '@angular/core';

import { Customer } from "./Customer"

@Component({
    selector: 'my-app',
    moduleId: module.id,
    templateUrl: './st.html'
})
export class AppComponent {
    customerobj: Customer = new Customer();
}
```
在此文件中，我们提到当在 HTML 中找到 my-app 属性时，将在该位置渲染 st.html 文件，而 st.html 需要模型，因此我们从 AppComponent 类传递该模型。在这里，我们尝试传递具有对象名称 customerobj 的 Customer 模型（用于双向绑定）。

在 app 文件夹中的一个新 TypeScript 文件 Customer.ts 中添加 Customer 模型，并将以下代码添加到其中

export class Customer {

    public CustomerName: string = "asdsad";
    public Code: string = "asdsa";
    public Amount: string = "asdasd";

}

并按照我们提到的，在 app 文件夹中添加 ts.html 文件，并将以下代码添加到其中

<div>
    Customer Name :- <input [(ngModel)]="customerobj.CustomerName"  /> <br />
    Customer Code :- <input [(ngModel)]="customerobj.Code"  /><br />
    Amount :- <input [(ngModel)]="customerobj.Amount"  /><br />
    <br />
    <br />
    <br />
    {{customerobj.CustomerName}} <br />
    {{customerobj.Code}} <br />
    {{customerobj.Amount}}
</div>

添加一个 HTML 页面，将其设为启动页面，并添加以下代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
    <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>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>
<body>
    <my-app>Loading...</my-app>
</body>
</html>

这是我们的第一个登陆页面，我们在 Head 部分声明了所需文件和起点，并在 body 部分添加
<my-aap> 标签。

保存并运行应用程序。

本文适合希望学习 Angular 2 并清晰了解其工作原理的初学者。