公司现在采用angualrjs开发一些web应用，采用的是angular1，现在angular2已经差不多了，听说最近rc6已经出来了……其实感觉好慢啊！之前也做过一些anglar2的例子，但是没有记录下来，现在重新拾起来还费了半天劲儿！弄了半天总是报错，按着文件对比了半天也没有找打是哪里写错了……哎！最后发现是版本的问题，这次想把它记录下来，方便之后查看。

环境：Visual Studio 2015 Update 3+Asp.net core templates

　  一、创建一个 Asp.net core空项目

　　至此，一个空的项目就创建成功了。可以直接按F5调试，如下图：

　 页面的输出的“Hello World！”是下面这段代码起的作用，

 app.Run(async (context) =>

 {

        await context.Response.WriteAsync("Hello World!");

 });

　　现在我们要将上面代码换掉(如果不换掉，在浏览器查看网页时总是显示“Hello World!”)，代码如下（添加静态文件处理）：

 app.UseStaticFiles();

　　二、添加“NPM 配置文件”至项目根目录下，并添加angular2以及依赖包（程序会自动下载），如下：

 {

   "version": "1.0.0",

   "name": "asp.net",

   "private": true,

   "dependencies": {

     "angular2": "2.0.0-beta.14",

     "systemjs": "0.19.24",

     "rxjs": "5.0.0-beta.3",

     "zone.js": "0.6.6"

   },

   "devDependencies": {

     "gulp": "3.9.1"

   }

 }

　　三、添加“Gulp 配置文件”至项目根目录下，用于移动angular2以及依赖包到指定的目录下，代码如下：

 var gulp = require('gulp');

 gulp.task("angular2:moveLibs", function () {

     return gulp.src([

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

     ]).pipe(gulp.dest('./wwwroot/libs/'));

 });

　　添加完成之后，右键“gulpfile.js”选择“任务运行程序资源管理器”，如下图：

　　如上图会发现一个任务：“angular2:moveLibs”，然后右键该任务点击“运行”，如下图：

　　此时便会将gulp任务中指定的js文件拷贝到指定的路径下，这里是“./wwwroot/libs/”。

　　四、在项目更目录下添加目录“typescripts”（用来存放typescript脚本文件，也是我们编写的angular2代码）以及在该目录下添加“TypeScript JSON 配置文件”，并在配置文件中添加如下代码：

 {

   "compilerOptions": {

     "target": "es6",

     "module": "system",

     "moduleResolution": "node",

     "sourceMap": true,

     "emitDecoratorMetadata": true,

     "experimentalDecorators": true,

     "removeComments": false,

     "noImplicitAny": false,

     "outDir": "../wwwroot/typescripts"

   },

   "exclude": [

     "node_modules",

     "wwwroot"

   ]

 }

　　说明："outDir": "../wwwroot/typescripts" 该配置会将“typescripts”目录中的*.ts文件编译为对应的*.js文件放到wwwroot/typescripts目录中。

　　在该目录下新建两个“TypeScript 文件”，这里分别命名：“app.ts”，“boot.ts”。前者是demo主程序，后者为启动使用（不知道说的对不对），代码如下：

 import {Component} from 'angular2/core';

 @Component({

     selector: 'my-app',

     template: '<h1>My First Angular 2 App</h1>'

 })

 export class AppComponent { }

app.ts

 import {bootstrap}    from 'angular2/platform/browser';

 import {AppComponent} from './app';

 bootstrap(AppComponent);

boot.ts

　　五、在“wwwroot”目录下新建“index.html”文件，代码如下：

 <html>

 <head>

     <base href="/">

     <title>Angular 2 QuickStart</title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <!-- 1. Load libraries -->

     <script src="libs/angular2-polyfills.js"></script>

     <script src="libs/system.src.js"></script>

     <script src="libs/rx.js"></script>

     <script src="libs/angular2.dev.js"></script>

     <!-- 2. Configure SystemJS -->

     <script>

       System.config({

         packages: {

             typescripts: {

             format: 'register',

             defaultExtension: 'js'

           }

         }

       });

         System.import('typescripts/boot')

             .then(null, console.error.bind(console));

     </script>

 </head>

 <!-- 3. Display the application -->

 <body>

     <my-app>Loading...</my-app>

 </body>

 </html>

　　至此，所有的新建工作已经完成，然后生成一下解决方案。你会发现在“wwwroot”目录下生成了“typescripts”文件夹，其中是“app.ts”，“boot.ts”对应的js文件。最后让我们看一下我们的劳动成果，在浏览器查看index.html页面，如下图：

　　到此，此文已经结束了。再说一下为什么没有使用最新的angular2版本，而是使用了2.0.0-beta.14。我有个毛病，喜欢使用最新版的。开始是使用最新版的，但是报错了，所以就采用之前使用的版本，最新版本的angular2 Demo下次接着写。

Angular2 Hello World 之 2.0.0-beta.14的更多相关文章

  1. FineUI v4.0.3 (beta) 和 FineUI v3.3.3 发布了！

    关于FineUI基于 ExtJS 的开源 ASP.NET 控件库 FineUI的使命创建 No JavaScript,No CSS,No UpdatePanel,No ViewState,No Web ...

  2. FineUI v4.0.2 (beta) 发布了！

    FineUI v4.0.2 (beta) 已经于 2013-12-15 发布! ================================== 关于FineUI基于 ExtJS 的开源 ASP. ...

  3. Mockito 中文文档 ( 2.0.26 beta )

    Mockito 中文文档 ( 2.0.26 beta ) 由于缺乏校对,难免有谬误之处,如果发现任何语句不通顺.翻译错误,都可以在github中的项目提出issue.谢谢~ Mockito框架官方地址 ...

  4. Magicodes.NET框架之路——V0.0.0.5 Beta版发布

    最近写代码的时间实在不多,而且今年又打算业余学习下Unity3D以及NodeJs(用于开发游戏后台),因此完善框架的时间更不多了.不过我会一直坚持下去的,同时我也希望有兴趣的同学可以加入Push你的代 ...

  5. 未能加载文件或程序集“System.Web.Helpers, Version=2.0.0.0（转）

    在本地终于用上了ASP.NET MVC4自带的认证功能,但放到生产服务器上就出问题了:打开注册页面没问题,但一点下注册按钮就报错了: 未能加载文件或程序集“System.Web.Helpers, Ve ...

  6. Angular4.0.0正式版发布

    来源于angular4.0.0发布时的公告,译者:niithub 原文发布时间:Thursday, March 23, 2017 翻译时间:2017年3月24日 angular4.0.0正式版现在可以 ...

  7. 颤振错误：当前Flutter SDK版本为2.1.0-dev.0.0.flutter-be6309690f？

    我刚刚升级了我的扑动,升级后我无法在Android Studio上运行任何扑动项目.我收到此错误消息. The current Dart SDK version -dev.0.0.flutter-be ...

  8. Axure9 v9.0.0.3629 ~ v9.0.0.3633 授权密钥 【2019.02.05】

    现在提供一个支持v9.0.0.3629.v9.0.0.3630.v9.0.0.3631.v9.0.0.3632.v9.0.0.3633的授权码(后续的Beta更新版本应该能继续使用) 被授权人:zd4 ...

  9. 未能加载文件或程序集“System.Web.Helpers, Version=2.0.0.0

    在本地终于用上了ASP.NET MVC4自带的认证功能,但放到生产服务器上就出问题了:打开注册页面没问题,但一点下注册按钮就报错了: 未能加载文件或程序集"System.Web.Helper ...

  10. 还学的动吗？ 盘点下Vue.js 3.0.0 那些让人激动的功能

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/vuejs-3-0-0-beta-features- ...

随机推荐

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. [虾扯蛋] android界面框架-Window

    从纯sdk及framwork的角度看,android中界面框架相关的类型有:Window,WindowManager,View等.下面就以这几个类为出发点来概览下安卓开发的"界面架构&quo ...

  3. ABP文档 - Mvc 视图

    文档目录 本节内容: 简介 AbpWebViewPage 基类 简介 ABP通过nuget包Abp.Web.Mvc集成到Mvc视图里,你可以像往常那样创建常规的视图. AbpWebViewPage 基 ...

  4. select、poll、epoll之间的区别总结

    select.poll.epoll之间的区别总结 05/05. 2014 select,poll,epoll都是IO多路复用的机制.I/O多路复用就通过一种机制,可以监视多个描述符,一旦某个描述符就绪 ...

  5. C++ 拷贝构造函数和赋值运算符

    本文主要介绍了拷贝构造函数和赋值运算符的区别,以及在什么时候调用拷贝构造函数.什么情况下调用赋值运算符.最后,简单的分析了下深拷贝和浅拷贝的问题. 拷贝构造函数和赋值运算符 在默认情况下(用户没有定义 ...

  6. css常用hack

    原文地址:css常用hack 突然想起今天早上在CNZZ看到的统计数据,使用IE6.7的用户比例还真多,看到之后我的心都碎了.微软都放弃了为毛还有这么多人不死心? 所以说,IE下的兼容还是得做的. – ...

  7. 记录一次bug解决过程：数据迁移

    一 总结 不擅长语言表达,勤于沟通,多锻炼 调试MyBatis中SQL语法:foreach 问题:缺少关键字VALUES.很遗憾:它的错误报的让人找不着北. 二 BUG描述:MyBatis中批量插入数 ...

  8. 二叉树的递归实现(java)

    这里演示的二叉树为3层. 递归实现,先构造出一个root节点,先判断左子节点是否为空,为空则构造左子节点,否则进入下一步判断右子节点是否为空,为空则构造右子节点. 利用层数控制迭代次数. 依次递归第二 ...

  9. 认识ASP.NET 5项目结构和项目文件xproj

    ASP.NET 5 在项目结构上做了很大的改变,我们以前熟悉的目录结构与项目文件内容都不太一样了,本篇文章带大家了解 ASP.NET 5 到底跟以前有哪些不一样的地方. 我们先用 Visual Stu ...

  10. 【腾讯Bugly干货分享】基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d13a57132ff21c38110186 导语 最近这几年的前端圈子,由于 ...