angularJS2开发环境搭建
第一步：安装node.js
安装node.js(https://nodejs.org/en/),为的是能够使用npm获得angular2.0的开发包
验证是否安装成功
第二步：在vs2013上安装typescript
安装完成后在项目中可以添加typescript项目了，并且在项目属性栏中会有typescript页
第三步：创建项目
可以将没用的都删除
第四步：添加package.json文件用于获取angularjs2包及依赖项
{
"name":"angular2demo",
"version":"1.0.0",
"license":"ISC",
"dependencies":{
"angular2":"2.0.0-beta.17",
"systemjs":"0.19.27",
"es6-promise":"^3.2.1",
"es6-shim":"^0.35.0",
"reflect-Metadata":"0.1.2",
"rxjs":"5.0.0-beta.6",
"zone.js":"0.6.12"
},
"devDependencies":{
"typescript":"^1.7.5"
}
}
对于所需要的包可通过npm查询最新版本，如
npm info angular2
下一步：配置package.config使用npm获取angular2相关包
在右键项目，选择power command 下的cmd下执行npm install
如果出现错误，需要安装“tsd”包的话，需要执行
npm install tsd -g
然后再进行安装
安装完成后
下一步：创建个人应用，注意在入口处需要添加browser.d.ts引用
新建一个app目录，并添加app.component.ts,main.ts
App.component.ts中添加angularjs模块
import{Component}from'angular2/core';
@Component({
selector:'angular2-demo',
template:'<h1>这是我的第一个应用</h1>'
})
exportclassAppComponent{}
此时编译会出现错误
这时需要在App.component.ts顶部添加引用
///<referencepath="../node_modules/angular2/typings/browser.d.ts"/>
完整如下：
///<referencepath="../node_modules/angular2/typings/browser.d.ts"/>
import{Component}from'angular2/core';
@Component({
selector:'angular2-demo',
template:'<h1>这是我的第一个应用</h1><h2>太神奇了</h2>'
})
exportclassAppComponent{}
在mian.ts中添加app模块
import{bootstrap}from'angular2/platform/browser'
import{AppComponent}from'./app.component'
bootstrap(AppComponent);
下一步：添加index.html页
<html>
<head>
<title>Angular2Demo</title>
<Metaname="viewport"content="width=device-width,initial-scale=1">
<!--1.Loadlibraries-->
<!--IErequiredpolyfills,inthisexactorder-->
<scriptsrc="node_modules/es6-shim/es6-shim.min.js"></script>
<scriptsrc="node_modules/systemjs/dist/system-polyfills.js"></script>
<scriptsrc="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<scriptsrc="node_modules/systemjs/dist/system.src.js"></script>
<scriptsrc="node_modules/rxjs/bundles/Rx.js"></script>
<scriptsrc="node_modules/angular2/bundles/angular2.dev.js"></script>
<!--2.ConfigureSystemJS-->
<script>
System.config({
packages:{
app:{
format:'register',
defaultExtension:'js'
}
}
});
System.import('app/main').then(null,console.error.bind(console));
</script>
</head>
<!--3.Displaytheapplication-->
<body>
<angular2-demo>Loading...</angular2-demo>
</body>
</html>
下一步：更改typescript编译选项，修改项目文件
如果此时编译会出现错误
此时需要修改项目属性，如下选择system，同时修改项目文件在PropertyGroup中的debug和release中同时添加
<TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata>
<TypeScriptModuleResolution>Node</TypeScriptModuleResolution>
<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
