angularJS2开发环境搭建
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> 最后，文件编译成功，看看第一个页面（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |