Angular2.x与Angular1.x完全不同,Angular2.x是不兼容Angular1.x的,所在在框架的构造上,它们是完全不同的。在Angular2.x中,因为其是基于ES6来开发的,所以会有很多第三方依赖。由于很多浏览器还不支持ES6,所以Angular2引入了很多polyfill或者shim, 导致我们引入了第三方依赖。

官方的说法,它是基于数据流的构建系统(streaming build system),主要用来让自动化和增强你的工作流程(Automate and enhance your workflow)。

1.安装 node v6.x.x      npm 3.x.x    gulp    有兴趣的可以安装typescript

gulp的安装    npm install -g 全局安装环境

gulp 教程:https://www.w3ctech.com/topic/134
中文网:http://www.gulpjs.com.cn/

2.新建项目文件夹(英文)

3.在github上clone相关文件,并放入相关配置项
  地址:https://github.com/Jasonwang911/angular2

4.package.json文件:用来标记项目所需的npm依赖包

这是一个gulp的工作流,在gulp中我们部署的函数都是由gulp.task来执行的,这个文件的主要做的工作是    

1.对angular2源码进行转换,将es6代码转换为es5代码,然后合并成angular2.js,放入dest/lib目录
2.将angular2的第三方依赖放入dest/lib目录
3.自动监测用户写的代码,当文件发生修改时,自动将其编译为es5代码,然后放入dest目录
4.开启一个本地服务器,让用户访问http://localhost:3456/ 就可以看到页面效果
5.删除dest目录

如果想了解gulp可以翻下我之前的博客,或者直接gulp的中文站

'use strict';
var gulp = require('gulp'),
del = require('del'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename'),
traceur = require('gulp-traceur');
var connect = require('gulp-connect'),
open = require('gulp-open'),
port = ;
var PATHS = {
src: {
js: 'src/**/*.js',
html: 'src/**/*.html'
},
lib: [
'node_modules/gulp-traceur/node_modules/traceur/bin/traceur-runtime.js',
'node_modules/es6-module-loader/dist/es6-module-loader-sans-promises.src.js',
'node_modules/systemjs/lib/extension-register.js',
'node_modules/angular2/node_modules/zone.js/dist/zone.js',
'node_modules/angular2/node_modules/zone.js/dist/long-stack-trace-zone.js',
'node_modules/reflect-metadata/Reflect.js',
'node_modules/reflect-metadata/Reflect.js.map',
]
};
gulp.task('watch', function() {
gulp.watch(PATHS.src.js, ['js']);
gulp.watch(PATHS.src.html, ['html']);
});
gulp.task('js', function() {
return gulp.src(PATHS.src.js)
.pipe(rename({
extname: ''
}))
.pipe(plumber())
.pipe(traceur({
modules: 'instantiate',
moduleName: true,
annotations: true,
types: true,
memberVariables: true
}))
.pipe(rename({
extname: '.js'
}))
.pipe(gulp.dest('dist'));
});
gulp.task('html', function() {
return gulp.src(PATHS.src.html)
.pipe(gulp.dest('dist'));
});
gulp.task('angular2', function() {
var buildConfig = {
paths: {
"angular2/*": "node_modules/angular2/es6/prod/*.es6",
"rx": "node_modules/angular2/node_modules/rx/dist/rx.js"
},
meta: {
'rx': {
format: 'cjs'
}
}
};
var Builder = require('systemjs-builder');
var builder = new Builder(buildConfig);
return builder.build('angular2/angular2', 'dist/lib/angular2.js', {});
});
gulp.task('libs', ['angular2'], function() {
var size = require('gulp-size');
return gulp.src(PATHS.lib)
.pipe(size({
showFiles: true,
gzip: true
}))
.pipe(gulp.dest('dist/lib'));
});
gulp.task('connect', function() {
connect.server({
root: __dirname + '/dist',
port: port,
livereload: true
});
});
gulp.task('open', function() {
var options = {
url: 'http://localhost:' + port,
};
gulp.src('./index.html')
.pipe(open('', options));
});
gulp.task('build', ['js', 'html'])
gulp.task('default', ['build', 'libs']);
gulp.task('serve', ['connect', 'open']);
gulp.task('clean', function(done) {
del(['dist'], done);
});

5.tyconfig.json文件:定义了typescript编译器如何从项目源文件生成javascript代码

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}

6.typings.json文件:为那些 TypeScript 编译器无法识别的库提供了额外的定义文件。

{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160909174046"
}
}

7.systemjs.config.js文件:为模块加载器提供了该到哪里查找应用模块的信息,并注册了所有必备的依赖包。它还包括文档中后面的例子需要用到的包。

8.安装package.json中列出的依赖包,这里需要使用nodejs来定义需要使用的angular2版本和所有第三方依赖的版本

  在node命令行中输入 npm install
  如果运行结束没有生成typings目录,则手动安装 npm run typings install

9.定义该应用的宿主页面,根目录下创建index.html

10.编译并运行应用程序   npm start

你会发现浏览器启动了程序,并且编译了app/app.component.ts文件并输出所有相应的ts文件为js文件,在你编辑文件保存后浏览器会自动刷新并会提示相应的错误

angular2环境搭建的更多相关文章

  1. .Net Core + Angular2 环境搭建

    环境搭建: 1)node.js版本>5.0,NPM版本>3.0,TypeScript版本>2.0(全装最新版就好了) 2)安装NTVS 1.2(node tools for vs), ...

  2. 记一次Angular2环境搭建及My First Angular App小demo呈现

    参考连接?不如说是照搬链接.AngularJs官网地址快速起步地址. 对于一个一直只是用jq,偶尔学习点Knockout js,了解一点mvvm结构的前端来说,学习Angular2还是有点困难的.好了 ...

  3. Ionic2 cordova angular2 打包到Android apk环境搭建

    一.前言 前段时间,公司有个APP项目需要支持不同平台,于是采用了Ionic2 + cordova + angular2,在搭建环境过程中遇到了不少问题,刚好最近有时间整理出来. 二.开发环境搭建 参 ...

  4. webpack+angular2开发环境搭建

    升级版之webpack4 + angular5脚手架demo详见: http://www.cnblogs.com/xudengwei/p/8852257.html 刚搭建完一个webpack+angu ...

  5. Angular2+学习第2篇 cli 环境搭建过程

    Angular-cli是angular团队针对Angular2提供的脚手架,用于环境搭建,运行等:具体参考Angular-cli GitHub Angular的启动过程,需要先回答三个问题: 启动时加 ...

  6. Ionic2开发环境搭建

    关于网络环境:ionic开发环境不需要FQ.我这里没有设置FQ,亲测可行.但是angular2的开发环境搭建,则需要FQ网络,否则很多包会安装失败. 建议大家在搭建开发环境的时候,不要参考百度出来的各 ...

  7. Ionic3开发环境搭建-VS Code

    原文:Ionic3开发环境搭建-VS Code 一.Ionic3在VS Code中的开发环境搭建 1.全局安装Ionic包 npm install -g cordova ionic 使用 ionic ...

  8. .NET Core系列 : 1、.NET Core 环境搭建和命令行CLI入门

    2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文章,原因是.NET Core的入门门槛相当高, ...

  9. Azure Service Fabric 开发环境搭建

    微服务体系结构是一种将服务器应用程序构建为一组小型服务的方法,每个服务都按自己的进程运行,并通过 HTTP 和 WebSocket 等协议相互通信.每个微服务都在特定的界定上下文(每服务)中实现特定的 ...

随机推荐

  1. Android开发之基本控件和详解四种布局方式

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方 ...

  2. c 进程和系统调用

    这一篇博客讲解进程和系统调用相关的知识 有这样一个场景,我需要输入一串文字,然后把我输入的文字加上一个本地的时间戳 保存在一个文件中,可以初步理解为一个备忘录也行 #include <stdio ...

  3. android快捷开发之Retrofit网络加载框架的简单使用

    大家都知道,安卓最大的特点就是开源化,这自然会产生很多十分好用的第三方API,而基本每一个APP都会与网络操作和缓存处理机制打交道,当然,你可以自己通过HttpUrlConnection再通过返回数据 ...

  4. 安卓v7支持包下的ListView替代品————RecyclerView

    RecyclerView这个控件也出来很久了,相信大家也学习的差不多了,如果还没学习的,或许我可以带领大家体验一把这个艺术般的控件. 项目已经同步至github:https://github.com/ ...

  5. ASP.NET MVC5 ModelBinder

    什么是ModelBinding ASP.NET MVC中,所有的请求最终都会到达某个Controller中的某个Action并由该Action负责具体的处理和响应.为了能够正确处理请求,Action的 ...

  6. DataGridView绑定源码下载

    效果图: 源码下载:http://hovertree.com/h/bjaf/bbot18bj.htm 上面源码不包含数据库的查询,需要获取数据库数据的话,请看这个的源码: http://hovertr ...

  7. ToolsCodeTemplate使用

    最近学习使用CodeSmith代码生成器 CodeSmith 是一种语法类似于asp.net的基于模板的代码生成器,程序可以自定义模板,从而减少重复编码的劳动量,提高效率. 作用:CodeSmith ...

  8. 三大框架之hibernate入门

    hibernate入门   1.orm      hibernate是一个经典的开源的orm[数据访问中间件]框架           ORM( Object Relation Mapping)对象关 ...

  9. Windows10应用Docker部署DoNet Core

    Win10和Mac稳定版的Docker发布了,之前看了下徐磊老师的几篇Docker4Dotnet的文章http://devopshub.cn/2016/07/08/docker4dotnet-1-ov ...

  10. struts2中从后台读取数据到<s:select>

    看到网上好多有struts2中从后台读取数据到<s:select>的,但都 不太详细,可能是我自己理解不了吧!所以我自己做了 一个,其中可能 有很多不好的地方,望广大网友指出 结果如图 p ...