angularjs2 学习笔记（一）开发环境搭建

原文出处：http://www.cnblogs.com/oldkingsir/p/5497779.html

开发环境，vs2013 update 5，win7 x64,目前最新angular2版本为beta 17

第一步：安装node.js

安装node.js(https://nodejs.org/en/),为的是能够使用npm获得angular2.0的开发包

验证是否安装成功

cmd下输入 node -v

npm -v

第二步：在vs2013上安装typescript

安装完成后在项目中可以添加typescript项目了，并且在项目属性栏中会有typescript页

第三步：创建项目

可以将没用的都删除

第四步：添加package.json文件用于获取angularjs2包及依赖项

编辑文件，添加内容

{

"name":"angular2demo",

"version":"1.0.0",sans-serif; font-size:14px; line-height:25.2px"> "license":"ISC",sans-serif; font-size:14px; line-height:25.2px"> "dependencies":{

"angular2":"2.0.0-beta.17",sans-serif; font-size:14px; line-height:25.2px"> "systemjs":"0.19.27",sans-serif; font-size:14px; line-height:25.2px"> "es6-promise":"^3.2.1",sans-serif; font-size:14px; line-height:25.2px"> "es6-shim":"^0.35.0",sans-serif; font-size:14px; line-height:25.2px"> "reflect-Metadata":"0.1.2",sans-serif; font-size:14px; line-height:25.2px"> "rxjs":"5.0.0-beta.6",sans-serif; font-size:14px; line-height:25.2px"> "zone.js":"0.6.12"

},sans-serif; font-size:14px; line-height:25.2px"> "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{}

此时编译会出现错误“connot find promise”等

这时需要在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',sans-serif; font-size:14px; line-height:25.2px"> 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',255)">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编译选项，修改项目文件 
如果此时编译会出现错误，错误信息“connot find name promise"
 
此时需要修改项目属性，如下选择system，同时修改项目文件在PropertyGroup中的debug和release中同时添加
 
 <TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata>
 
 <TypeScriptModuleResolution>Node</TypeScriptModuleResolution>
 
 <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
 
最后，文件编译成功，在app下的main.ts和app.component.ts会自动编译成.js文件，终于在浏览器上看到了第一个angular2的页面了，这中间好多坑，实验了很多个版本，各个版本出现的错误都不是一样的，毕竟还是beta版，先拿这个版本学习了！

angularjs2 学习笔记（一） 开发环境搭建

第二步：在vs2013上安装typescript

第三步：创建项目

下一步：添加index.html页

猜你在找的Angularjs相关文章

angularjs2 学习笔记（一）开发环境搭建