(此文章同时发表在本人微信公众号“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之类)。

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

  1. 学习ABP ASP.NET Core with Angular 环境问题

    1. 前言 最近学习ABP架构 搭建ASP.NET Core with Angular遇到了些问题,折腾了一个礼拜最终在今天解决了,想想这个过程的痛苦就想利用博客记录下来.其实一直想写博客,但因为 时 ...

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

    这是一个个人叙述自己建设博客的帖子,既然是第一篇那肯定是不牵扯代码了,主要讲一下大体的东西,微软最新的web框架应该就数asp.net core 3.1了这是一个长期支持版,而且是跨平台又开源版本,所 ...

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

    这是第三篇了,第一篇只是介绍,第二篇介绍了api项目的运行和启动,如果api项目没什么问题了,调试都正常了,那基本上就没什么事了,由于这一篇是讲前端项目的,所以需要运行angular项目了,由于前端项 ...

  4. 主厨(第4部分)- ASP. netNET Core和Angular 2 CRUD SPA

    下载source - 79.7 KB 介绍 在Master Chef(第1部分)和Master Chef(第2部分)中,我介绍了如何使用ASP.Net Core和Angular JS.在Master ...

  5. 52ABP模板 ASP.Net Core 与 Angular的开源实例项目

    阅读文本大概需要 5 分钟. 开始之前 自从上一篇文章".NET:持续进化的统一开发平台"发布后,已经有三个月的时间没有写过文章了. 这段时间,做了两场线下活动,一场在上海,一场在 ...

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

    上一篇帖子讲了用了哪些技术,这个帖子就先介绍介绍api项目吧,项目就是一个普通的webapi项目,账户系统用的identity ,什么是identity呢? 其实就是官方封装好的一系列的可以用来操作数 ...

  7. ASP.NET Core文章汇总

    现有Asp.Net Core 文章资料,2016 3-20月汇总如下 ASP.NET Core 1.0 与 .NET Core 1.0 基础概述 http://www.cnblogs.com/Irvi ...

  8. Angular 5和ASP.NET Core入门

    我希望你们都知道Angular 5已经发布了.在本文中,我们将看到如何使用Angular5TemplateCore开始使用Angular 5和ASP.NET Core. 使用Angular5Templ ...

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

    前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1.1的地表最强IDE工具,越来越受.NET系的开发人员追捧. 随着Google Angular4的发布 ...

随机推荐

  1. Servlet和JSP学习指导与实践(一):Servlet API初探

    前言: JavaSE如何跨度到JavaEE?原本java语言只是专门用于application桌面小应用程序的开发,但自从其追随CGI进入服务器端的开发之后便一发不可收拾.先是Servlet1.0,再 ...

  2. Spring AOP动态切换数据源

    现在稍微复杂一点的项目,一个数据库也可能搞不定,可能还涉及分布式事务什么的,不过由于现在我只是做一个接口集成的项目,所以分布式就先不用了,用Spring AOP来达到切换数据源,查询不同的数据库就可以 ...

  3. xpth 字符串截取

    <xsl:value-of select="substring(//div[@class='infos'],1,27)"/>

  4. 介绍DSA数字签名,非对称加密的另一种实现

    接下来我们介绍DSA数字签名,非对称加密的另一种实现. DSA DSA-Digital Signature Algorithm 是Schnorr和ElGamal签名算法的变种,被美国NIST作为DSS ...

  5. 移动端框架篇-控制子容器的滑屏框架-fullPage.js

    控制子容器法 方法是只显示其中一个子元素,其它隐藏,滑屏时隐藏当前元素,并显示当前元素的下一个同辈元素~ 这里采用fullPage框架,库大小7.69K~ fullPage框架的页面样式无需自定义,已 ...

  6. IntersectionObserver API

    温馨提示:本文目前仅适用于在 Chrome 51 及以上中浏览. 2016.11.1 追加,Firefox 52 也已经实现. 2016.11.29 追加,Firefox 的人担心目前规范不够稳定,未 ...

  7. phpcms v9图片生成缩略图变成黑色解决方法

    今天客户反映,上传的图片生成缩略图有的图片变成黑色,出现问题就百度了一下,有不少网友也遇到这样的问题,但是官方论坛也没有给出解决办法,那还得靠自己解决了,于是就研究phpcms v9 图片压缩代码.打 ...

  8. 配置SQL server远程连接(局域网)

    具体步骤: 1) 2) 3) 4) 5) 6) 7) 最后为了防火墙有影响,直接把防火关了,测试连接通过在来设置防火墙.

  9. MongoDB系列一:CentOS7.2下安装mongoDB3.2.8

    最近在又在倒腾MongoDB,把安装配置的相关命令贴出来 1.下载 wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70- ...

  10. 【Android学习】《Android开发视频教程》第一季笔记

    视频地址: http://study.163.com/course/courseMain.htm?courseId=207001 课时5    Activity基础概念 1.Android开发技术结构 ...