ASP.NET 内核:web AngularJS 2入门

分享于 

22分钟阅读

Web开发

  繁體

介绍

去年我写了一篇关于 ASP.NET 5的文章: Jump MVC Web API Jump AngularJS AngularJS AngularJS。 本文将介绍如何在 ASP.NET 内核( a.k.a ASP.NET 5 ) 中开始使用 AngularJS 2.

在本文中,你将学习如何设置必要的工具,以便在 ASP.NET 内核中运行一个简单的Angular 2应用程序。 简单地说,我的意思是没有数据库或者数据模型,因为我试图让这篇文章尽可以能简单。 在我的下一篇文章中,我将演示如何构建使用 ASP.NET 核心 Web API的应用程序,但在这一点上我们只开始。

在深入挖掘之前,先了解 Angular 2.

Angular 1相比,Angular 2有一些基本的变化,它完全是用TypeScript。 Angular 2是一个世界著名的开发框架,以编码工具箱为基础设施构建React性。跨平台的应用程序: 它具有丰富的模板化方法,它基于自然的。easy-to-write的和可以读的语法。

如果想了解更多信息,或者想贡献更多信息,可以在这里访问Github的官方版本。

让我们开始吧 !

启动 Visual Studio 2015并选择文件> 新项目。 在对话框中,在模板> Visual C#> Web下,选择如下图所示的ASP.NET Web应用程序:

图1: 新项目对话框( )

你可以把你的项目 NAME 你喜欢的东西,但对于这个演示我只是把它命名为" AngularJS2Demo",简单。 单击 弹出下面的对话框:


图:新 ASP.NET 项目对话框( )。

在 5预览模板下选择" Web API",然后单击 ok ok让 Visual Studio 为你创建项目。

我们,我们可能会选择 ASP.NET,most,Bower,,,,,,sounds,choose,choose,choose,choose,choose等。 如果你从没听说过他们不用担心,我们会很快到达他们的。

图 below 显示新创建的项目。

图:新的默认 ASP.NET 核心空项目结构( )

如果你已经知道 ASP.NET 核心核心重大变化,那么你可以跳过这部分,但对于那些对 ASP.NET 核心来说是新的,我想突出一些这些改变。 如果你以前曾使用过 ASP.NET的早期版本,那么你将会注意到新的项目结构是完全不同的。 项目现在包括以下文件:

  • src: 包含包含构成应用程序的源代码的所有项目。
  • global.json: 这是你放置解决方案级别设置的地方,允许你执行project-to-project引用。
  • wwwroot: 是一个文件夹,所有文件都将放置在其中。 这些是网络应用将直接为客户服务的资产,包括 HTML。CSS。图像和JavaScript文件。
  • project.json: 包含项目设置。
  • startup.cs: 这是你放置启动和配置代码的地方。

有关 ASP.NET 核心中的新功能的详细信息,请参见本文: ASP.NET 5: 城镇新 ASP.NET

添加脚本文件夹

接下来要做的是创建一个名为"脚本"的新文件夹。 为这里,只需右击项目并选择添加> 新文件夹。 这个文件夹将包含应用程序中需要的所有JavaScript文件,然后使用一个JavaScript任务 runner 来组合和缩小这些文件,如 Grunt: 这样,我们将确保生成的文件在每次生成后自动添加到wwwroot文件夹。 图 below 显示了新添加的文件夹的项目结构:

图 4: 脚本文件夹。

获取所需软件包

ASP.NET 内核支持三个( 3 ) 主要软件包管理器: NuGet,NPM和 Bower。

包管理器

包管理器使你能够轻松收集构建应用程序所需的所有资源。 换句话说,可以使用包管理器自动下载所有资源及其依赖项,而不是手动下载来自 web/internet的项目依赖项。Bootstrap 和AngularJS等项目依赖项。

NuGet: NuGet管理。 NET包,如 Entity Framework,ASP.NET MVC等。 你通常在" project.json"文件中指定应用程序需要的NuGet软件包。

:NPM是核心最新支持的软件包管理器之一。 这个软件包管理器最初是为管理开放源码NodeJS框架的软件包而创建的。 package.json 是管理项目包的NPM的文件。

Bower: Bower 是 ASP.NET 内核中另一个支持的软件包管理器。 它是由 Twitter 创建的,它旨在支持前端开发。 你可以使用 Bower 来管理客户端资源,如 jQuery。Angular 和 Bootstrap。

添加StaticFiles依赖项

我们需要添加对 Microsoft.AspNetCore.StaticFiles的引用,这样你就不会在浏览器中找到 404个文件。 如果arleady具有这里引用,则忽略这里步骤。 现在打开你的project.json 文件和下面的软件包:

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

你可能需要根据所使用的ASP.NET 核心版本来更改版本。

现在,在 Startup.cs file:的Configure() 函数中调用 UseStaticFiles 方法

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

介绍 TypeScript

由documentation-开发的免费开源编程语言,由微软开发和维护。 它是JavaScript的严格超集,并将可选的static 类型和基于类的面向对象编程添加到语言中。 查看官方网站了解详情。

在这个特定的演示中,我们将使用一些很好的原因,它的中最重要的是:

  • app在JavaScript上具有许多特性,例如: static 类型,类和接口。 在 Visual Studio 中使用它可以让我们有机会从内建的,中获益,同时也能够节省大量的编程错误。

  • 对于大型客户端项目,打印机将允许我们生成更加健壮的代码。 事实上,由于without是JavaScript的一个超集,因这里它可以与任何JavaScript代码一起使用。

配置应用程序

让我们添加一个名为" tsconfig.json"的新文件。 右键单击项目,然后从左侧窗格选择 Add> new选项,然后选择,如下面图所示:


图 5: 添加 tsconfig.json 文件

单击添加 to为你生成默认配置。 现在,用以下方法替换默认设置:

<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>

这些配置设置将影响智能感知和我们外部应用程序编译器的工作方式,这将有助于我们节省大量时间。

对于这个例子,我们需要使用NPM来安装我们在应用程序中需要的资源,比如Grunt和Grunt插件。 只需右键单击项目并选择 Add> useful items Item。 在对话框中选择"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 of,你可以检查最近的构建,并且可以在这里执行每个最新的包生成。
请注意,你并不强制输入精确的构建编号,因为还可以使用标准npmjs语法指定使用支持的前缀的自动更新规则:

  • tilde ( ~ )。 ~1.0.1 将 MATCH 所有 1.1个. x 版本,包括 1.2.0个,1.0. x 等等。
  • Caret ( ^ )。 ^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文件。 我们将配置 voiceover,以便它将从前面创建的脚本文件夹中获取所有JavaScript文件。

现在右击你的项目并选择添加> 新项目。 从对话框中选择"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负责将app文件编译为 JavaScript。Uglify 插件进行配置,以便将来自脚本文件夹的所有文件合并并缩小,并在wwwroot文件夹中生成结果。 复制基本上将所有JS文件从外部库移动,并需要NPM软件包到 wwwroot/JS。 最后一节包含你的任务的定义。 在这种情况下,我们定义一个"默认值为 "任务,它运行"ts"。"uglify"。"副本",然后为我们的JavaScript文件中的更改定义"表"。

要了解更多关于Grunt及其配置文件语法的信息,你可以在这里访问官方网站

集成 AngularJS 2

获取 Angular 2有两种方法,它们的优点和缺点如下: 它使用NPM来获取AngularJS最新版本并在项目中托管代码,或者使用CDN来引用所需脚本。

在这个例子中,我们将使用NPM在我们的应用程序中安装 AngularJS 2. 首先打开 package.json 文件,并在"依赖项"部分下面添加以下软件包:

<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>

现在将保存文件以获取和安装所需的包。 安装之后,你应该能够看到如下内容:

图1: AngularJS和其他依赖项

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

AngilarJS2Demo/node_modules/angular2/

现在我们需要将这些文件从 上面 提到的位置移到iframe文件夹。 我们可以通过将一个专用任务添加到:配置,特别是在下面突出显示的代码中。

<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>

设置客户端代码

接下来我们要做的是在"脚本"文件夹下创建一个名为"应用"的文件夹。 你的项目结构现在应该如下所示:

图 10: 添加"应用"文件夹插件。

现在是我们把应用程序的客户端代码放下来,作为起始点的工作骨架的时候了。 它包括:

  • 一个 Angular 2组件文件
  • Angular 2 Bootstrap 文件
  • 要打包的HTML文件

组件文件

Angular 2是完全基于组件的。 不再使用控制器和 $scope。 它们已经被组件和指令所取代。 组件是 Angular 2中最基本和最基本的概念。 想象一下它是一个类,控制一个特定的网页,我们可以向每个用户显示一些数据和响应。 我们可以说,Angular 2应用程序几乎完全建立在多个组件的基础上,服务于特定用途: 其中大部分都是可以重用的;其他的只能使用一次。 它们也可以少于几行,也可能会导致一段非常长的代码。

现在,通过右键单击"应用"文件夹,然后选择 Add> new添加一个新的app文件。 在对话框左侧窗格的"客户端"选项下,选择"typescript文件",如下图所示:

图 11: 添加 app.component.ts

将文件命名为" app.component.ts",然后将下列代码 below 复制到 file: 中

<codeclass="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 下面的代码 block 是组件的创建。 @Component 表示一个说明书指令,该指令告诉 Angular 这里类是 Angular 组件。 注意作为配置对象传递的选择器和模板字段。 最后一行代码定义了的AppComponent 类: 注意导出关键字,它将允许我们从其他组件中导入它。 导出的行为使我们的app.components.js 文件成为一个 MODULE

Bootstrap 文件

现在我们有了主组件,让我们添加另一个app文件来创建一个 Bootstrap 来运行应用程序。 右键单击"应用"文件夹,然后选择添加> 新项目> app文件。 将文件 NAME 作为" 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"的引用,以确保任务 runner ( Grunt ) 将编译并执行。 下一行将从另一个 Angular 核心 MODULE 导入 Bootstrap 函数: 这是在浏览器中引导我们的应用程序所必需的。 接下来的代码行导入我们刚刚编写的应用程序 root 组件。 finally,最后一行调用 Bootstrap 函数,引用 root 组件类,因这里我们的应用程序将引导。

现在,我们只是缺少一个使用浏览器加载的入口点: 我们现在就添加。

HTML 文件

让我们通过右键单击"wwwroot"文件夹,然后选择添加> 新项目> HTML页面来添加一个新的HTML文件。 NAME 文件作为" index.html",如下图所示:

图 12: 添加 Index.HTML

HTML文件有两个主要用途: 作为浏览器的入口点,可以加载客户端脚本文件并执行应用程序,并显示 Angular 2使用的DOM结构。
点击添加以创建文件,然后用下面的标记替换生成的标记:

<codeclass="language-markup"><html><head> 
 <title>ASP.NET Core: AngularJS 2 Demo</title><metaname="viewport"content="width=device-width, initial-scale=1"><!-- 1. Load libraries --><!-- IE required polyfills --><scriptsrc="/js/es6-shim.min.js"></script><scriptsrc="/js/system-polyfills.js"></script><!-- Angular2 libraries --><scriptsrc="/js/angular2-polyfills.js"></script><scriptsrc="/js/system.src.js"></script><scriptsrc="/js/Rx.js"></script><scriptsrc="/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>

最后,我们需要将它设置为在调试模式下执行应用程序时的主入口点。 在解决方案资源管理器中,右键单击项目节点并选择属性,然后将 switch 更改为"index.html",如图 below 所示:

图1: 更改默认的启动 URL。

运行应用程序

现在我们已经设置了一切,是时候看看我们在做什么了。 我们应该做的第一件事情是打开我们的任务 runner:

  • 右键单击" gruntfile.js",然后选择"任务 runner"
  • 确保单击"刷新"按钮以加载任务,如图 below 所示: 图 14: 刷新任务 runner

  • 展开"别名任务",然后右击默认任务并按 当成功的时候你应该能看到这样的东西。 图 15: 运行任务 runner。

成功运行任务 runner 之后,你还应该看到在你的 wwwroot文件夹中生成了收费的app app folders folders文件夹,如下图所示:


图1: 应用程序和js文件夹生成。

现在点击 ,或者点击 IIS button按钮运行应用程序,你应该能够在浏览器中看到下面的输出 below。


图1: 输出结果。

就是这样我希望有人能找到这篇文章。 查看我的下一篇关于 Angular 2的文章: ASP.NET 核心和 Angular 2代码风险投资。


STA  asp  asp-net  angular  CORE  angularjs-2