如何在ASP.NET 5上搭建基于TypeScript的Angular2项目
一、前言
就在上月,公司的一个同事建议当前的前端全面改用AngularJs进行开发,而我们采用的就是ASP.NET 5项目,原本我的计划是采用TypeScript直接进行Angular2开发。所以借用这段时间来写下如何在ASP.NET 5下搭建基于TypeScript的Angualr2的项目,下面我们就进入正题。
二、环境配置
如果读者直接按照Angular.io上的方式搭建是无法通过的,所以下面我们的教程基本跟Angular.io上的类似,只是其中的配置会有所不同,并且也会多出一些步骤。
1.创建一个空的ASP.NET 5项目
读者必须安装有VS2015,通过“文件”-》“新建”-》“项目”,然后选中如下图中的项目:
其中项目名称读者可以随意取一个,如果读者不想考虑可以命名为“AngularWeb”。接着我们点击确定,继续选中这个:
这样一个空的ASP.NET 5项目就搭建完成了。
2.加载Angular2
因为默认的空项目是没有npm的配置文件,所以我们要新建一个,首先我们右击项目添加一个项,如下图所示(不需要修改文件名):
新建好了之后我们可以看到依赖项下就有npm了,这个时候我们右击这个npm,然后按照如下图所示点击箭头所指的那个项:
打开之后我们在其中输入一下内容:
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.13",
"systemjs": "0.19.25",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.6.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.8.9",
"typings": "^0.7.11",
"gulp": "^3.9.1"
}
}
这部分基本和Angular.io上一样,添加完这些内容后保存下,vs2015会自动会恢复npm引用。
3.TypeScript配置
跟新建npm配置文件一样,我们还需要新建一个TypeScript的配置文件,这个时候我们依然还是右击项目通过新建项来创建,如下图所示,对应的文件名不需要更改:
新建完成之后我们打开这个文件,然后输入以下的内容,用来配置TS,这样才能保证我们开发过程中能够使用的到Angular模块以及其他的模块,具体的内容如下所示:
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "system",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "./wwwroot/app/",
"removeComments": false,
"sourceMap": true,
"target": "es5"
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
读者注意了,其中我们采用的是system的模块管理,如果这里改用了其他的值就会导致运行的时候出现某些函数不存在。配置完以上的还没有结束,我们还需要依赖其他的配置,这个时候我们依然按照上面的部分新建TypeScript配置文件,只是这个时候我们需要修改下对应的文件名,改成“typings.json”,然后讲一下内容复制到其中:
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
"jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
}
}
当然这一步骤也是官方所需要的,到此为止关于TypeScript的配置就结束了。
4.Gulp配置
因为我们开发的项目都在wwwroot下,但是我们需要引用TypeScript编译好的js文件,而这个过程我们不能通过手动的方式,所以我们需要借用gulp来自动化这一步骤,下面我们新建一个gulp配置文件:
文件名依然是默认,然后在其中输入以下内容,主要就是负责将node_module中我们需要的文件复制到wwwroot下的libs文件夹中:
/// <binding AfterBuild='moveToLibs' />
var gulp = require('gulp'); gulp.task('moveToLibs', function (done) {
gulp.src([
'node_modules/angular2/bundles/js',
'node_modules/angular2/bundles/angular2.*.js*',
'node_modules/angular2/bundles/angular2-polyfills.js',
'node_modules/angular2/bundles/http.*.js*',
'node_modules/angular2/bundles/router.*.js*',
'node_modules/es6-shim/es6-shim.min.js*',
'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
'node_modules/systemjs/dist/*.*',
'node_modules/jquery/dist/jquery.*js',
'node_modules/bootstrap/dist/js/bootstrap*.js',
'node_modules/rxjs/bundles/Rx.js'
]).pipe(gulp.dest('./wwwroot/libs/')); gulp.src([
'node_modules/bootstrap/dist/css/bootstrap.css'
]).pipe(gulp.dest('./wwwroot/libs/css'));
});
这样我们需要用到gulp的部分就结束了。
5.项目配置
为了网站能够正常使用,所以我们还需要对项目本身进行一些调整,首先我们打开project.json文件,在其中加入一个新的模块,并且加上一些自动化脚本:
这样我们的项目就配置完成了,读者可以生成下项目,如果没有错误我们就继续往下走,如果读者出现了无法解决的问题可以在下方留言。
三、示例开发
如果读者完成了上面的初始化工作,我们就可以完成一个小的工程来验证我们的环境是否单间成功了,首先我们打开wwwroot文件夹,在其中新一个app文件夹。
1.app.component.ts开发
在app文件夹中新建该文件,然后在其中输入一下内容:
import {Component} from 'angular2/core'; @Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
这样我们就完成了一个组件的开发。
2.main.ts开发
在app文件夹中新建该文件,我们的入口文件夹将使用以下文件,并且其中会使用到我们上面创建的那个组件。
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component'; bootstrap(AppComponent);
3.style.css开发
为了能够让我们的结果具有比较良好的样式,所以这里我们在wwwroot下新建该样式文件,然后在其中输入以下内容:
/* Master Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body, input[text], button {
color: #888;
font-family: Cambria, Georgia;
}
4.index.html开发
我们在wwwroot下新建该文件,我们将在其中使用以上开发的内容,并且显示最终的效果,具体的内容如下所示:
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="libs/es6-shim.min.js"></script>
<script src="libs/system-polyfills.js"></script>
<script src="libs/shims_for_IE.js"></script>
<script src="libs/angular2-polyfills.js"></script>
<script src="libs/system.js"></script>
<script src="libs/Rx.js"></script>
<script src="libs/angular2.dev.js"></script> <script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head> <body>
<my-app>Loading...</my-app>
</body>
</html>
如果libs下没有自动将我们需要的js文件复制到其中,我们可以通过cmd调整当项目的根目录下通过“gulp moveToLibs”命令手动执行。
最终效果:
如何在ASP.NET 5上搭建基于TypeScript的Angular2项目的更多相关文章
- 教你搭建基于typescript的vue项目
自尤大去年9月推出vue对typescript的支持后,一直想开箱尝试,对于前端sr来说,vue的顺滑加上ts的面向对象,想着就非常美好~ 终于在两个月前,找到了个机会尝试了一把vue+ts的组合. ...
- Mac 上搭建基于 Hexo + GitHub 个人博客
环境配置 本人电脑系统:macOS Node.js 生成静态页面.安装Node.js Git 用于将本地 Hexo 内容提交到 Github.Xcode自带Git(前提:macOS已经安装了Xcode ...
- 从零搭建基于webpack的Electron-Vue3项目(1)——基于webpack的Vue3项目搭建
从零搭建基于webpack的Electron-Vue3项目(1)--基于webpack的Vue3项目搭建 前言 本篇文章内容,主要是基于webpack的Vue3项目开发环境进行搭建,暂时还不涉及到El ...
- 解决基于TypeScript 的 RN项目相对路径引入组件的问题
一.前言 在开发RN项目时,经常会要使用这样的方式(../../../)来引入组件,感觉非常繁琐,如果项目结构层级比较多,引入的头部更加分不清. 那有没有一种方案和vue项目一样,经过配置后简写路径, ...
- 基于Typescript的Vue项目配置国际化
基于Typescript的Vue项目配置国际化 简介 使用vue-i18n插件对基于Typescript的vue项目配置国际化,切换多种语言, 配合element-ui或者其他UI库 本文以配置中英文 ...
- [深度学习] centos7上搭建基于Anaconda3的caffe+pycaffe环境(python3.6)
本文记录从零开始在CentOS7.x系统上搭建Caffe深度学习平台,并配置pycaffe环境.(由于在虚拟机上搭建,所以为CPU_ONLY模式) 1.选择CentOS7 mini版镜像安装虚拟机 镜 ...
- 树莓派上搭建基于Python+web.py+fastcgi+lighttpd的网站
最近在网上淘了一个树莓派,什么是树莓派?这里是他的官方网站你可以去看看. 简单的说就是一块使用了ARM11的CPU,具有256MB或512MB内存的具有两个USB接口,一个RJ45接口,HDMI输出和 ...
- OVS-----CentOS7上搭建基于Open vSwitch的VxLAN隧道实验
一.关于VXLAN VXLAN 是 Virtual eXtensible LANs 的缩写,它是对 VLAN 的一个扩展,是非常新的一个 tunnel 技术,在Open vSwitch中应用也非常多. ...
- Mac上搭建基于Github的Hexo博客
Mac 上搭建基于Github的hexo博客 博客地址:往事亦如风的博客 hexo官方文档 本来想搭一个自己的博客,但是因为服务器真心买不起,所以就使用gitpages搭建一个免费的博客. 环境配置 ...
随机推荐
- CR LF的由来
学习Esperanto时用到一款叫做Kajero的软件,支持世界语特殊字符编辑. 在Option菜单中有个选项,End of line 列出了四种换行方式 这四种都是由基本CR和LF组成.那么CR和L ...
- Ceph剖析:线程池实现
线程池ThreadPool的实现符合生产者-消费者模型,这个模型解除生产者消费者间的耦合关系,生产者可以专注处理制造产品的逻辑而不用关心产品的消费,消费者亦然.当然,生产者消费者之间需要一个连接的纽带 ...
- 一些PHP性能的优化
PHP优化对于PHP的优化主要是对php.ini中的相关主要参数进行合理调整和设置,以下我们就来看看php.ini中的一些对性能影响较大的参数应该如何设置. # vi /etc/php.ini ( ...
- MySQL创建一个具有root权限的用户
grant all privileges on *.* to 'user'@'host' identified by 'password' WITH GRANT OPTION MAX_QUERIES_ ...
- 两表(多表)关联update的写法
SQL Server示例: update a set a.gqdltks=b.gqdltks,a.bztks=b.bztks from landleveldata a,gdqlpj b where a ...
- jquery制作弹出层带遮罩效果,点击阴影部分层消失
jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...
- the fourth class
6 居右 label加宽度,text-align:right 7 list copy: list1.concat(list1) 8 灵活运用addHandle,addEventListener 给in ...
- 检查或遍历android手机应程
检查android手机中是否存在某应程 public boolean checkApp(String packageName) { if (packageName == null || ...
- 第一个c++程序
#include <iostream> using namespace std; int main(int argc, const char * argv[]) { //cin接收键盘输入 ...
- SqlServer自动化分区
1.新增文件组 ALTER DATABASE [Test] ADD FILEGROUP FG2010 ALTER DATABASE [Test] ADD FILEGROUP FG2011 ALTER ...