公司现在采用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. boost强分类器的实现

    boost.cpp文件下: bool CvCascadeBoost::train( const CvFeatureEvaluator* _featureEvaluator, int _numSampl ...

  2. ExtJS 4.2 组件介绍

    目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...

  3. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  4. iOS逆向工程之Reveal工具的安装、配置与使用

    今天博客内容比较简单,不过还是蛮重要的.经常有小伙伴在QQ上私下问我,说博客中是如何使用Reveal查看AppStore中下载应用的UI层级的,那么就在今天这篇博客中作为一个主题来统一的介绍一下吧.虽 ...

  5. Mysql存储引擎比较

    Mysql作为一个开源的免费数据库,在平时项目当中会经常使用到,而在项目当中我们的着重点一般在设计使用数据库上而非mysql本身上,所以在提到mysql的存储引擎时,一般都不曾知道,这里经过网上相关文 ...

  6. ubuntu安装mysql

    好记性不如烂笔头,记录一下,ubuntu安装mysql的指令. 安装MySQL: sudo apt-get install mysql-server sudo apt-get install mysq ...

  7. maven常见异常以及解决方法

    本文写的是我在整合ssm框架时遇到的一些问题,我估计很多人也会遇到,所以,这里作为一个总结,希望能够帮助大家解决问题 一,加入shiro组件时抛出的异常 加入步骤(略) 问题 1,保存后,无法导入sh ...

  8. HTML5- Canvas入门（五）

    今天要介绍的是canvas对图形对象的操作,包括图像.视频绘制,和操作像素对象的方法. 图片/视频的绘制 在canvas中,我们可以通过 drawImage() 的方法来绘制图片或视频文件,其语法为: ...

  9. EasyPR--开发详解（4）形态学操作、尺寸验证、旋转等操作

    在上一篇深度分析与调优讨论中,我们介绍了高斯模糊,灰度化和Sobel算子.在本文中,会分析剩余的定位步骤. 根据前文的内容,车牌定位的功能还剩下如下的步骤,见下图中未涂灰的部分. 图1 车牌定位步骤 ...

  10. [Intel Edison开发板] 01、Edison开发板性能简述

    Integrated Wi-Fi certified in 68 countries, Bluetooth® 4.0 support, 1GB DDR and 4GB flash memory sim ...