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

    ;
       3:  
    function () {
    '/systemjs/dist/' })
    '/systemjs/'));
       7: });
       8:  
    function () {
    '/angular2/bundles/' })
    '/angular2/'));
      12: });
      13:  
    function () {
    '/es6-shim/' })
    '/es6-shim/'));
      17: });
      18:  
    function () {
    '/rxjs/bundles/' })
    '/rxjs/'));
      22: });
      23:  
    'copy-deps:es6-shim']);