ASP.NET Core：AngularJS 2 入门

• 下载 ASPNETCoreAngular2.zip - 372.9 KB

引言

去年我写了一篇关于“ASP.NET 5：用 MVC 6 Web API 快速入门 AngularJS”的文章。本文将引导您完成在 ASP.NET Core（也称为 ASP.NET 5）中入门 AngularJS 2 的过程。

在本文中，您将主要学习如何设置运行简单 Angular 2 应用所需的工具。所谓的简单，指的是没有数据库或数据模型，因为我尽量让本文尽可能简单，以便初学者能够轻松理解。在下一篇文章中，我将演示如何构建一个使用 ASP.NET Core Web API 处理数据的应用，但目前我们只从基础开始。

在深入之前，让我们先了解一下 Angular 2。

Angular 2 与 Angular 1 相比有一些基本的变化，并且完全用 TypeScript 编写。Angular 2 是 AngularJS 的第二个主要版本，它是一个世界知名的开发框架，其理念是为开发者提供构建响应式、跨平台、针对桌面和移动优化的 Web 应用所需的工具箱：它提供了一种结构丰富的模板方法，该方法基于自然、易于编写和阅读的语法。

如果您想了解更多信息或想贡献，请随时访问官方 Github 仓库 这里。

开始吧！

启动 Visual Studio 2015，然后选择“文件”>“新建项目”。在对话框中，在“模板”>“Visual C#”>“Web”下，选择“ASP.NET Web 应用程序”，如下图所示。

图 1：新建项目对话框

您可以随意为项目命名，但在本次演示中，为了简单起见，我将其命名为“AngularJS2Demo”。单击确定，将出现以下对话框。

图 2：新建 ASP.NET 项目对话框

在“ASP.NET 5 预览模板”下选择“Web API”，然后单击确定，让 Visual Studio 为您创建项目。

您可能会想，为什么我们没有选择 ASP.NET 4.5 模板之一——尤其是单页应用程序选项，它听起来似乎是我们正在做的事情的完美选择。您应该了解 ASP.NET Core 引入的全新功能，最重要的是对现代客户端实用工具的内置支持，例如 NPM 和 Bower。如果您从未听说过它们，请不要担心，因为很快就会接触到它们。

下图显示了新创建的项目。

图 3：新的默认 ASP.NET Core 空项目结构

如果您已经了解 ASP.NET Core 的核心重要更改，那么您可以跳过此部分，但对于 ASP.NET Core 的新手，我想强调其中一些更改。如果您之前使用过 ASP.NET 的旧版本，您会注意到新的项目结构完全不同。项目现在包含以下文件：

• src 文件夹：包含构成应用程序的所有源代码项目。
• global.json：在此处放置解决方案级别的设置，并允许您进行项目到项目的引用。
• wwwroot：这是一个文件夹，所有静态文件都将放置在此处。这些是 Web 应用程序将直接提供给客户端的资源，包括 HTML、CSS、图像和 JavaScript 文件。
• project.json：包含项目设置。
• startup.cs：在此处放置您的启动和配置代码。

有关 ASP.NET Core 中新功能的详细信息，请查看本文：ASP.NET 5 简介：新的 ASP.NET！

添加 Scripts 文件夹

接下来要做的就是创建一个名为“Scripts”的新文件夹。为此，只需右键单击项目，然后选择“添加”>“新建文件夹”。此文件夹将包含我们应用程序所需的所有 JavaScript 文件，然后我们将使用 Grunt 等 JavaScript 任务运行程序来组合和压缩这些文件：这样，我们就可以确保生成的文件在每次构建后自动添加到 wwwroot 文件夹中。下图显示了包含新添加文件夹的项目结构。

图 4：Scripts 文件夹

获取所需包

ASP.NET Core 支持三种（3）主要包管理器：NuGet、NPM 和 Bower。

包管理器

包管理器使您可以轻松地收集构建应用程序所需的所有资源。换句话说，您可以使用包管理器自动下载所有资源及其依赖项，而不是手动从 Web/Internet 下载 jQuery、Bootstrap 和 AngularJS 等项目依赖项。

NuGet：NuGet 管理 .NET 包，例如 Entity Framework、ASP.NET MVC 等。您通常在“project.json”文件中指定应用程序所需的 NuGet 包。

NPM：NPM 是 ASP.NET Core 中新支持的包管理器之一。此包管理器最初是为了管理开源 NodeJS 框架的包而创建的。package.json 文件用于管理项目的 NPM 包。

Bower：Bower 是 ASP.NET Core 中另一个支持的包管理器。它由 Twitter 创建，旨在支持前端开发。您可以使用 Bower 来管理客户端资源，例如 jQuery、Angular 和 Bootstrap。

添加 StaticFiles 依赖项

我们需要添加对 Microsoft.AspNetCore.StaticFiles 的引用，这样您就不会在浏览器中遇到 404 文件未找到错误。如果您已经有了这个引用，则可以忽略此步骤。现在打开您的 project.json 文件并添加以下包。

"Microsoft.AspNetCore.StaticFiles": "1.0.0-rc2-final"

您可能需要根据您使用的 ASP.NET Core 版本更改版本。 

现在，在 Startup.cs 文件的 Configure() 函数中调用 UseStaticFiles 方法。

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory){  
      app.UseStaticFiles();
}

介绍 TypeScript

摘自文档-TypeScript 是由 Microsoft 开发和维护的免费开源编程语言。它是 JavaScript 的严格超集，并为该语言添加了可选的静态类型和面向对象的类编程。有关更多详细信息，请访问 TypeScript 的官方网站。

在本次演示中，我们将出于多种原因使用 TypeScript，其中最重要的是：

• TypeScript 相对于 JavaScript 具有许多功能，例如：静态类型、类和接口。在 Visual Studio 中使用它还可以实现强大的 IntelliSense，使我们能够受益于内置的 IntelliSense，结合其独特的优势，可以在键入代码时发现大多数编程错误，从而节省大量时间。

• 对于大型客户端项目，TypeScript 将使我们能够生成更健壮的代码，并且这些代码可以完全部署到任何可以运行普通 JavaScript 文件的位置。事实上，由于 TypeScript 是 JavaScript 的超集，它可以与任何 JavaScript 代码无缝协同工作。

配置 TypeScript

让我们添加一个名为“tsconfig.json”的新文件。右键单击项目，然后选择“添加”>“新建项”；从左侧窗格切换到“客户端脚本”选项，然后选择“TypeScript JSON 配置文​​件”，如下图所示。

图 5：添加 tsconfig.json 文件

单击添加以生成默认配置。现在，用以下内容替换默认设置。

<code class="language-javascript">{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}
</code>

这些配置设置将影响 IntelliSense 和我们的外部 TypeScript 编译器的工作方式，这两者将极大地帮助我们。

在此示例中，我们需要使用 NPM 来安装应用程序所需的资源，例如 Grunt 和 Grunt 插件。为此，只需右键单击项目并选择“添加”>“新建项”。在对话框中，选择“NPM 配置文​​件”，如下图所示。

图 6：添加 package.json 文件

单击添加以生成具有默认设置的文件。修改“package.json”文件，添加以下依赖项。

<code class="language-javascript">{
  "version": "1.0.0",
  "name": "AngularJS2Demo",
  "private": true,
  "dependencies": {
  },

  "devDependencies": {
    "grunt": "1.0.1",
    "grunt-contrib-copy": "1.0.0",
    "grunt-contrib-uglify": "1.0.1",
    "grunt-contrib-watch": "1.0.0",
    "grunt-ts": "5.5.1"
  }
}
</code>

请记住，在撰写本文时，Grunt 1.0.1 是最新版本。您可以通过检查 Visual Studio IntelliSense 来检查最新的构建，它恰好在这里工作，并且甚至能够在每个包的最新构建上执行令人印象深刻的实时更新检查。
请注意，您不必输入精确的构建号，因为您也可以使用标准的 npmjs 语法来指定绑定到自定义版本范围的自动更新规则，使用支持的前缀，例如：

• 波浪号 (~)。 ~1.0.1 将匹配所有 1.1.x 版本，不包括 1.2.0、1.0.x 等。
• 插入符号 (^)。 ^1.0.1 将匹配 1.0.1 以上的所有版本，但不包括 2.0.0 及更高版本。

现在保存 package.json 文件以获取并安装所需的包。您应该能够在“依赖项”下看到一个名为 NPM 的新文件夹，如下图所示。

图 7：安装 Grunt 依赖项

配置 Grunt

Grunt 是一个开源工具，可让您为项目构建客户端资源。例如，您可以使用 Grunt 将 LESS 或 Saas 文件编译成 CSS。此外，Grunt 还可以用于压缩 CSS 和 JavaScript 文件。

在此示例中，我们将使用 Grunt 来组合和压缩 JavaScript 文件。我们将配置 Grunt，使其从我们之前创建的 Scripts 文件夹中获取所有 JavaScript 文件，并在 wwwroot 文件夹中组合和压缩这些文件。

现在右键单击您的项目，然后选择“添加”>“新建项”。在对话框中选择“Grunt 配置文​​件”，如下图所示。

图 8：添加 Grunt 配置文​​件

然后单击添加以生成文件，然后修改 gruntfile.js 文件中的代码，使其看起来像这样。

<code class="language-javascript">module.exports = function (grunt) {  
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-ts');

    grunt.initConfig({
        ts: {
            base: {
                src: ['Scripts/app/boot.ts', 'Scripts/app/**/*.ts'],
                outDir: 'wwwroot/app',
                tsconfig: './tsconfig.json'
            }
        },

        uglify: {
            my_target: {
                files: [{
                    expand: true,
                    cwd: 'wwwroot/app',
                    src: ['**/*.js'],
                    dest: 'wwwroot/app'
                }]
            },
            options: {
                sourceMap: true
            }
        },

        // Copy all JS files from external libraries and required NPM packages to wwwroot/js
        copy: {
            main: {
                files: [{
                    expand: true,
                    flatten: true,
                    src: [
                        'Scripts/js/**/*.js'
                    ],
                    dest: 'wwwroot/js/',
                    filter: 'isFile'
                }]
            }
        },

        // Watch specified files and define what to do upon file changes
        watch: {
            scripts: {
                files: ['Scripts/**/*.js'],
                tasks: ['ts', 'uglify', 'copy']
            }
        }
    });

    // Define the default task so it will launch all other tasks
    grunt.registerTask('default', ['ts', 'uglify', 'copy', 'watch']);
};
</code>

上面的代码包含三个（3）部分。第一个负责加载我们之前配置的每个 Grunt 插件。initConfig() 负责配置任务。ts 负责将 TypeScript 文件编译成 JavaScript。Uglify 插件配置为从 Scripts 文件夹中组合和压缩所有文件，并在 wwwroot 文件夹中生成结果。copy 主要将所有 JS 文件从外部库和必需的 NPM 包复制到 wwwroot/js。最后一部分包含您的任务定义。在这种情况下，我们定义了一个名为“default”的单个任务，该任务运行“ts”、“uglify”、“copy”，然后“watches”我们的 JavaScript 文件中的更改。

要了解有关 Grunt 及其配置文​​件语法的更多信息，您可以访问官方网站 这里。

集成 AngularJS 2

获取 Angular 2 基本上有两种方法，都有其优缺点：使用 NPM，这意味着获取 AngularJS 2 的最新构建并在我们的项目中托管代码；或者使用 CDN 来引用所需的脚本。

在此示例中，我们将使用 NPM 在我们的应用中安装 AngularJS 2。首先打开 package.json 文件，然后在“dependencies”部分添加以下包，如下所示。

<code class="language-javascript">"dependencies": {
    "angular2": "^2.0.0-beta.8",
    "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",
    "tsd": "^0.6.5",
    "zone.js": "0.5.15"
  },
</code>

现在保存文件以获取并安装所需的包。安装后，您应该能看到类似这样的内容。

图 9：AngularJS 2 和其他依赖项

所有这些依赖项都将安装在您本地驱动器的以下位置：

AngilarJS2Demo/node_modules/angular2/

现在我们需要将这些文件从上面提到的位置移动到 wwwroot 文件夹。我们可以通过向 Grunt 配置添加一个专用任务来实现，特别是在 copy 任务下，如下面的突出显示的​​代码所示。

<code class="language-javascript">copy: {  
    main: {
        files: [{
            expand: true,
            flatten: true,
            src: [
                'Scripts/js/**/*.js',
                'node_modules/es6-shim/es6-shim.min.js',
                'node_modules/systemjs/dist/system-polyfills.js',
                'node_modules/angular2/bundles/angular2-polyfills.js',
                'node_modules/systemjs/dist/system.src.js',
                'node_modules/rxjs/bundles/Rx.js',
                'node_modules/angular2/bundles/angular2.dev.js'
            ],
            dest: 'wwwroot/js/',
            filter: 'isFile'
        }]
    }
},
</code>

设置客户端代码

接下来，我们将在“Scripts”文件夹下创建一个名为“app”的文件夹。您的项目结构现在应该如下所示。

图 10：添加“app”文件夹

现在是时候编写我们应用的客户端代码了，一个可用的骨架作为起点。它将包括：

• 一个 Angular 2 组件文件
• 一个 Angular 2 引导文件
• 一个 HTML 文件来收尾

组件文件

Angular 2 完全基于组件。控制器和 $scope 已不再使用。它们已被组件和指令取代。组件是 Angular 2 中最基本和最重要的概念。将其视为控制网页特定部分的类，我们可以在其中向每个用户显示一些数据和/或响应他们的反馈。我们可以说我们的 Angular 2 应用将几乎完全构建在多个具有特定用途的组件之上：其中许多将是可重用的；其他则只使用一次。它们也可以小到只有几行代码，也可以是冗长得惊人的代码。

现在，通过右键单击“app”文件夹，然后选择“添加”>“新建项”。在对话框的“客户端脚本”选项下，选择“TypeScript 文件”，如下图所示。

图 11：添加 app.component.ts

将文件命名为“app.component.ts”，然后将以下代码复制到该文件中。

<code class="language-javascript">import {Component} from 'angular2/core';

@Component({
    selector: 'angularjs2demo',
    template: '<h1>AngularJS 2 Demo</h1><div>Hello ASP.NET Core! Greetings from AngularJS 2.</div>'
})

export class AppComponent { }  
</code>

就是这样。让我们看看代码的内容。

第一行代码基本上从 Angular 2 库 angular2/core 导入 Component 函数。Component 函数是我们定义类组件元数据所需的。@Component 下面的代码块是组件的创建。@Component 表示一个 TypeScript 指令，它告诉 Angular 该类是一个 Angular 组件。请注意作为配置对象传递的 selector 和 template 字段。最后一行代码定义了 AppComponent 类：请注意 export 关键字，它允许我们从其他组件导入它。导出操作使我们的 app.components.js 文件成为一个模块。

引导文件

现在我们有了主组件，让我们添加另一个 TypeScript 文件来创建一个引导程序来运行应用。再次右键单击“app”文件夹，然后选择“添加”>“新建项”>“TypeScript 文件”。将文件命名为“boot.ts”，然后将以下代码复制到下面。

<code class="language-javascript">///<reference path="../../node_modules/angular2/typings/browser.d.ts" />

import {bootstrap}    from 'angular2/platform/browser'  
import {AppComponent} from './app.component'

bootstrap(AppComponent);  
</code>

再次，让我们看看我们刚刚写的内容。

第一行添加了对“browser.d.ts”的引用，以确保我们的任务运行程序（Grunt）能够编译和执行。下一行从另一个 angular core 模块导入 bootstrap 函数：这是在浏览器中引导我们的应用程序所必需的。下一行代码导入我们之前编写的应用程序根组件。最后，最后一行调用 bootstrap 函数并传入对根组件类的引用，以便我们的应用程序启动。

现在我们只需要一个入口点来在浏览器中加载：我们现在就添加它。

HTML 文件

让我们通过右键单击“wwwroot”文件夹，然后选择“添加”>“新建项”>“HTML 页”来添加一个新的 HTML 文件。将文件命名为“index.html”，如下图所示。

图 12：添加 Index.HTML

HTML 文件有两个主要目的：作为浏览器加载客户端脚本文件并执行应用程序的入口点，以及布局 Angular 2 用于显示的 DOM 结构。
现在单击添加以创建文件，然后将生成的标记替换为下面的标记。

<code class="language-markup"><html>  
<head>  
    <title>ASP.NET Core: AngularJS 2 Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 1. Load libraries -->
    <!-- IE required polyfills -->
    <script src="/js/es6-shim.min.js"></script>
    <script src="/js/system-polyfills.js"></script>

    <!-- Angular2 libraries -->
    <script src="/js/angular2-polyfills.js"></script>
    <script src="/js/system.src.js"></script>
    <script src="/js/Rx.js"></script>
    <script src="/js/angular2.dev.js"></script>

    <!-- Bootstrap via SystemJS -->
    <script>
        System.config({
            packages: {
                "app": {
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>
</head>

<body>  
    <!-- Application PlaceHolder -->
    <angularjs2demo>Please wait...</angularjs2demo>
</body>  
</html>  
</code>

最后，我们需要将其设置为在调试模式下执行我们的应用程序时的主要入口点。在解决方案资源管理器中，右键单击项目节点，选择“属性”，然后切换到“调试”选项卡，并将“启动 URL”参数更改为“index.html”，如下图所示。

图 13：更改默认启动 URL

运行应用程序

现在我们已经设置好了一切，是时候看看我们在做什么了。我们应该做的第一件事是打开我们的任务运行程序。

• 右键单击“gruntfile.js”，然后选择“任务运行程序资源管理器”。

• 请务必单击“刷新”按钮以加载任务，如下图所示： 图 14：刷新任务运行程序

• 展开“别名任务”，然后右键单击默认任务并单击运行。成功时，您应该能看到类似这样的内容。 图 15：运行任务运行程序

成功运行任务运行程序后，您还应该会看到 app 和 js 文件夹已在您的 wwwroot 文件夹中生成，如下图所示。

图 16：app 和 js 文件夹正在生成

现在按 F5 或单击 IIS Express 按钮运行应用程序，您应该能在浏览器中看到以下输出。

图 17：输出

就是这样！我希望有人觉得这篇文章有用。在此查看我的下一篇关于 Angular 2 的文章：ASP.NET Core 和 Angular 2 代码冒险

CodeProject