ASP.NET Core和Angular 2双剑合璧

(此文章同时发表在本人微信公众号“dotNET每日精华文章”,欢迎右边二维码来关注。)

题记:两个还没有正式发布的东西一起用,是什么效果?

效果当然会很好了(我猜的),那么如何在ASP.NET Core中集成Angular 2呢?Nicolas Bello Camilletti的一篇文章就给大家分享了一些技巧。

作为微软全新的Web开发框架,ASP.NET Core项目的结构不仅和node.js有几分神似,也同样利用了大量的第三方开源工具来辅助客户端库的安装和任务执行,比如npm和bower(用于依赖管理和安装),gulp用于任务执行。

所以在ASP.NET Core项目中安装Angular 2也自然而然是通过npm来进行咯。具体步骤如下:

  1. 通过VS2015或者yeoman新建一个ASP.NET Core的Web项目
  2. 在VS2015中展开项目下的“Dependencies”,在“npm”上点击右键,选择“Open package.json”或者直接到项目文件夹里打开package.json文件
  3. 编辑package.json文件,在devDependencies下面添加“angular2”的配置(我在写这篇文章的时候,版本号是"2.0.0-beta.9")和“systemjs”(一个轻量级ES6模块加载器),保存,VS会自动调用npm install来安装angular及其依赖的包。
  4. 由于通过npm引入的包,其只会下载到node_modules里面,我们还需要通过gulp任务把所需要的文件copy到wwwroot下才能被浏览器访问到。这个时候,打开gulpfile.js这个文件,在文件末尾添加上下面的代码:
  5.    1: paths.npmSrc = "./node_modules/";
       2: paths.npmLibs = paths.webroot + "lib/npmlibs/";
       3:  
       4: gulp.task("copy-deps:systemjs", function () {
       5:     return gulp.src(paths.npmSrc + ‘/systemjs/dist/**/*.*‘, { base: paths.npmSrc + ‘/systemjs/dist/‘ })
       6:          .pipe(gulp.dest(paths.npmLibs + ‘/systemjs/‘));
       7: });
       8:  
       9: gulp.task("copy-deps:angular2", function () {
      10:     return gulp.src(paths.npmSrc + ‘/angular2/bundles/**/*.js‘, { base: paths.npmSrc + ‘/angular2/bundles/‘ })
      11:          .pipe(gulp.dest(paths.npmLibs + ‘/angular2/‘));
      12: });
      13:  
      14: gulp.task("copy-deps:es6-shim", function () {
      15:     return gulp.src(paths.npmSrc + ‘/es6-shim/es6-sh*‘, { base: paths.npmSrc + ‘/es6-shim/‘ })
      16:          .pipe(gulp.dest(paths.npmLibs + ‘/es6-shim/‘));
      17: });
      18:  
      19: gulp.task("copy-deps:rxjs", function () {
      20:     return gulp.src(paths.npmSrc + ‘/rxjs/bundles/*.*‘, { base: paths.npmSrc + ‘/rxjs/bundles/‘ })
      21:          .pipe(gulp.dest(paths.npmLibs + ‘/rxjs/‘));
      22: });
      23:  
      24: gulp.task("copy-deps", ["copy-deps:rxjs", ‘copy-deps:angular2‘, ‘copy-deps:systemjs‘, ‘copy-deps:es6-shim‘]);
  6. 你可以手动通过在gulpfile.js文件上点击右键选择Task Runner Explorer来执行“copy-deps”,也可以把这个任务添加到project.json中的scripts/prepublish里面。
  7. 不管采用什么方式,现在在wwwroot/lib/npmlibs下面已经出现了angular2相关的js文件,我们还需要把他们引用到Layout.cshtml中(放到head结束之前):
  8.    1: <environment names="Development">
       2:   <script src="~/lib/npmlibs/es6-shim/es6-shim.js"></script>
       3:   <script src="~/lib/npmlibs/systemjs/system-polyfills.src.js"></script>
       4:   <script src="~/lib/npmlibs/angular2/angular2-polyfills.js"></script>
       5:   <script src="~/lib/npmlibs/systemjs/system.src.js"></script>
       6:   <script src="~/lib/npmlibs/rxjs/Rx.js"></script>
       7:   <script src="~/lib/npmlibs/angular2/angular2.js"></script>
       8:   <script src="~/lib/npmlibs/angular2/router.js"></script>
       9: </environment>
      10:  
      11: <environment names="Staging,Production">
      12:   <script src="~/lib/npmlibs/es6-shim/es6-shim.min.js"></script>
      13:   <script src="~/lib/npmlibs/systemjs/system-polyfills.js"></script>
      14:   <script src="~/lib/npmlibs/angular2/angular2-polyfills.min.js"></script>
      15:   <script src="~/lib/npmlibs/systemjs/system.src.js"></script>
      16:   <script src="~/lib/npmlibs/rxjs/Rx.min.js"></script>
      17:   <script src="~/lib/npmlibs/angular2/angular2.min.js"></script>
      18:   <script src="~/lib/npmlibs/angular2/router.min.js"></script>
      19: </environment>
  9. 至此,Angular2就添加到ASP.NET Core项目中了。如果你打算用TypeScript来编写的Angular2代码,那么还需要额外对TypeScript进行配置:通过VS2015的添加新文件的功能添加一个tsconfig.json文件(TypeScript JSON Configuration File),额外添加修饰声明,并配置systemjs作为模块加载器。完整代码如下:
  10.    1: {
       2:   "compilerOptions": {
       3:     "noImplicitAny": false,
       4:     "noEmitOnError": true,
       5:     "removeComments": false,
       6:     "sourceMap": true,
       7:     "target": "es5",
       8:     "emitDecoratorMetadata": true,
       9:     "experimentalDecorators": true,
      10:     "module": "system",
      11:     "moduleResolution": "node"
      12:   },
      13:   "exclude": [
      14:     "node_modules",
      15:     "wwwroot/lib"
      16:   ]
      17: }
  11. 添加TypeScript支持后,你会发现编译出错,这是因为没有引入es6-shim的DefinitelyTyped定义。要引入定义,需要在项目上打开命令行,执行“npm install tsd --save-dev”来安装tsd(TypeScript Definition manager),然后再执行“tsd install es6-shim --save”来安装es6-shim的TS定义。这样就可以解决编译出错的问题了。
  12. 这样,我们就可以使用TypeScript来编写Angular2的组件,组件代码如下(放到wwwroot/app/app.component.ts):
  13.    1: import {Component} from ‘angular2/core‘;
       2:  
       3: @Component({
       4:     selector: ‘my-app‘,
       5:     template: ‘<h1>My First Angular 2 App</h1>‘
       6: })
       7: export class AppComponent { }
  14. 在wwwroot/app中添加一个boot.ts文件作为Angular2应用程序的启动点:
  15.    1: import {bootstrap}    from ‘angular2/platform/browser‘
       2: import {AppComponent} from ‘./app.component‘
       3:  
       4: bootstrap(AppComponent);
  16. 然后在视图中通过systemjs来加载这些组件了(记得先添加<my-app></my-app>这样的HTML标记,因为我们组件的选择器是my-app):
  17.    1: @section Scripts {
       2:     <script>
       3:         System.config({
       4:             packages: {
       5:                 ‘app‘: { defaultExtension: ‘js‘ },
       6:                 ‘lib‘: { defaultExtension: ‘js‘ },
       7:             },
       8:         });
       9:  
      10:         System.import(‘app/boot‘)
      11:             .then(null, console.error.bind(console));
      12:     </script>
      13: }
  18. 最后,我们就完成了在ASP.NET Core中开发Angular2应用程序的基本代码结构了(注意调试的时候不能使用IE,不然会报错,只能使用Edge或者Chrome之类)。
时间: 2024-11-08 19:00:52

ASP.NET Core和Angular 2双剑合璧的相关文章

从零开始一个个人博客 by asp.net core and angular(一)

这是一个个人叙述自己建设博客的帖子,既然是第一篇那肯定是不牵扯代码了,主要讲一下大体的东西,微软最新的web框架应该就数asp.net core 3.1了这是一个长期支持版,而且是跨平台又开源版本,所以大家可以去GitHub上找源码,也可以研究源码是怎么写的. 大过年的偏偏出现这个疫情,所以只能窝屋里搞着玩了. 我的博客项目主要是用了 asp.net core 和angular 然后部署到centos上用nginx进行了反向代理,具体的什么是nginx和angular这如果不懂的哥们自行网络搜索

从零开始一个个人博客 by asp.net core and angular(二)

上一篇帖子讲了用了哪些技术,这个帖子就先介绍介绍api项目吧,项目就是一个普通的webapi项目,账户系统用的identity ,什么是identity呢? 其实就是官方封装好的一系列的可以用来操作数据库的类,对用户信息进行增删改查.主要牵扯的类有如下几个: UserManager SignInManager RoleManager 上面列出的是我项目牵扯的大家有兴趣的可以去官方接口文档那里看看api namespace Microsoft.AspNetCore.Identity这个是命名空间

ASP.NET Core使用Angular模板

作为一名程序员,当然要时刻学习..NET Core最为微软大力发展的新技能,当然要在这个天赋树上点一点技能点啦.(第一次发文章,也不知道写点什么( ̄▽ ̄)~*) 最近因为在研究DDD,所以写下这篇文章. 如果您的VS支持.NET Core2.0,那么可以在新建项目中看到添加模板的选项 .NET Core 2.0 SDK 下载地址:https://www.microsoft.com/net/core#windowscmd 安装后重启VS2017就可以看到模板选项了 如果没有安装.NET Core2

ASP.NET Core文章汇总

现有Asp.Net Core 文章资料,2016 3-20月汇总如下 ASP.NET Core 1.0 与 .NET Core 1.0 基础概述 http://www.cnblogs.com/Irving/p/5146976.html 初识ASP.NET Core 1.0 http://www.cnblogs.com/richieyang/p/5281761.html ASP.NET Core 行军记 -----拔营启程 http://www.cnblogs.com/wupeng/p/52892

【Asp.Net Core】在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序

前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1.1的地表最强IDE工具,越来越受.NET系的开发人员追捧. 随着Google Angular4的发布.我一直在想,怎么能够用这个地表最强IDE工具编写Angular4的Asp.Net Core项目.经过不懈的研究.终于的得到了一套很好的解决方案与大家分享. 文章转载请著名出处:http://www.cnblogs.com/smallprogram 我们的目的 随着Web技术的快速发展,新的技术层出

【ASP.NET Core快速入门】(一)环境安装

下载.NET Core SDK 下载地址:https://www.microsoft.com/net/download/windows https://www.microsoft.com/net/learn/get-started/windows 安装vs2017,安装的时候选择安装core跨平台 在控制台创建ASP.NET Core应用程序 在程序安装后,可以在控制台输入dotnet进行创建core应用程序 输入dotnet  --help查看命令帮助 .NET 命令行工具 (2.1.2) 使

【转载】从头编写 asp.net core 2.0 web api 基础框架 (1)

工具: 1.Visual Studio 2017 V15.3.5+ 2.Postman (Chrome的App) 3.Chrome (最好是) 关于.net core或者.net core 2.0的相关知识就不介绍了, 这里主要是从头编写一个asp.net core 2.0 web api的基础框架. 我一直在关注asp.net core 和 angular 2/4, 并在用这对开发了一些比较小的项目. 现在我感觉是时候使用这两个技术去为企业开发大一点的项目了, 由于企业有时候需要SSO(单点登

菜鸟入门【ASP.NET Core】1:环境安装

下载.NET Core SDK 下载地址:https://www.microsoft.com/net/download/windows https://www.microsoft.com/net/learn/get-started/windows 安装vs2017,安装的时候选择安装core跨平台 在程序安装后,可以在控制台输入dotnet进行创建core应用程序 输入dotnet  --help查看命令帮助 .NET 命令行工具 (2.1.2) 使用情况: dotnet [runtime-op

从头编写 asp.net core 2.0 web api 基础框架 (1)

原文:从头编写 asp.net core 2.0 web api 基础框架 (1) 工具: 1.Visual Studio 2017 V15.3.5+ 2.Postman (Chrome的App) 3.Chrome (最好是) 关于.net core或者.net core 2.0的相关知识就不介绍了, 这里主要是从头编写一个asp.net core 2.0 web api的基础框架. 我一直在关注asp.net core 和 angular 2/4, 并在用这对开发了一些比较小的项目. 现在我感