Angular2 Hello World 之 2.0.0-beta.14
公司现在采用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的更多相关文章
- FineUI v4.0.3 (beta) 和 FineUI v3.3.3 发布了！
关于FineUI基于 ExtJS 的开源 ASP.NET 控件库 FineUI的使命创建 No JavaScript,No CSS,No UpdatePanel,No ViewState,No Web ...
- FineUI v4.0.2 (beta) 发布了！
FineUI v4.0.2 (beta) 已经于 2013-12-15 发布! ================================== 关于FineUI基于 ExtJS 的开源 ASP. ...
- Mockito 中文文档 ( 2.0.26 beta )
Mockito 中文文档 ( 2.0.26 beta ) 由于缺乏校对,难免有谬误之处,如果发现任何语句不通顺.翻译错误,都可以在github中的项目提出issue.谢谢~ Mockito框架官方地址 ...
- Magicodes.NET框架之路——V0.0.0.5 Beta版发布
最近写代码的时间实在不多,而且今年又打算业余学习下Unity3D以及NodeJs(用于开发游戏后台),因此完善框架的时间更不多了.不过我会一直坚持下去的,同时我也希望有兴趣的同学可以加入Push你的代 ...
- 未能加载文件或程序集“System.Web.Helpers, Version=2.0.0.0（转）
在本地终于用上了ASP.NET MVC4自带的认证功能,但放到生产服务器上就出问题了:打开注册页面没问题,但一点下注册按钮就报错了: 未能加载文件或程序集“System.Web.Helpers, Ve ...
- Angular4.0.0正式版发布
来源于angular4.0.0发布时的公告,译者:niithub 原文发布时间:Thursday, March 23, 2017 翻译时间:2017年3月24日 angular4.0.0正式版现在可以 ...
- 颤振错误：当前Flutter SDK版本为2.1.0-dev.0.0.flutter-be6309690f？
我刚刚升级了我的扑动,升级后我无法在Android Studio上运行任何扑动项目.我收到此错误消息. The current Dart SDK version -dev.0.0.flutter-be ...
- 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 ...
- 未能加载文件或程序集“System.Web.Helpers, Version=2.0.0.0
在本地终于用上了ASP.NET MVC4自带的认证功能,但放到生产服务器上就出问题了:打开注册页面没问题,但一点下注册按钮就报错了: 未能加载文件或程序集"System.Web.Helper ...
- 还学的动吗？ 盘点下Vue.js 3.0.0 那些让人激动的功能
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/vuejs-3-0-0-beta-features- ...
随机推荐
- redux-amrc：用更少的代码发起异步 action
很多人说 Redux 代码多,开发效率低.其实 Redux 是可以灵活使用以及拓展的,经过充分定制的 Redux 其实写不了几行代码.今天先介绍一个很好用的 Redux 拓展-- redux-amrc ...
- 深入浅出Redis-redis底层数据结构（上）
1.概述 相信使用过Redis 的各位同学都很清楚,Redis 是一个基于键值对(key-value)的分布式存储系统,与Memcached类似,却优于Memcached的一个高性能的key-valu ...
- ASP.NET Core的路由[1]：注册URL模式与HttpHandler的映射关系
ASP.NET Core的路由是通过一个类型为RouterMiddleware的中间件来实现的.如果我们将最终处理HTTP请求的组件称为HttpHandler,那么RouterMiddleware中间 ...
- Ajax实现原理，代码封装
都知道实现页面的异步操作需要使用Ajax,那么Ajax到是怎么实现异步操作的呢? 首先需要认识一个对象 --> XMLHttpRequest 对象 --> Ajax的核心.它有许多的属性和 ...
- canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...
- 用django创建一个项目
首先你得安装好python和django,然后配置好环境变量,安装python就不说了,从配置环境变量开始 1.配置环境变量 在我的电脑处点击右键,或者打开 控制面板\系统和安全\系统 -> 左 ...
- 不要着急改代码，先想想--centos 6.8下编译安装tmux
诸位读者新年好,2017开年第一篇博客,请允许我先问候一下看到这篇博客的诸位.写博客是我2017年定下的目标之一,希望我会坚持下去. 最近打算尝试一下tmux这个神器,于是有了这一篇关于思维方式的Bl ...
- 按照Enterprise Integration Pattern搭建服务系统
在前一篇文章中,我们已经对Enterprise Integration Pattern中所包含的各个组成进行了简单地介绍.限于篇幅(20页Word以内),我并没有深入地讨论各个组成.但是如果要真正地按 ...
- UML类图（下）：关联、聚合、组合、依赖
前言 上一篇文章UML类图(上):类.继承.实现,讲了UML类图中类.继承.实现三种关系及其在UML类图中的画法,本文将接着上文的内容,继续讲讲对象之间的其他几种关系,主要就是关联.聚合.组合.依赖, ...
- 我们公司的ASP.NET 笔试题，你觉得难度如何
本套试题共8个题,主要考察C#面向对象基础,SQL和ASP.NET MVC基础知识. 第1-3题会使用到一个枚举类,其定义如下: public enum QuestionType { Text = , ...