angularjs2 学习笔记(一) 开发环境搭建
开发环境,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包及依赖项
编辑文件,添加内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | { "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>'
})
export class AppComponent { }
此时编译会出现错误“connot find promise”等
这时需要在App.component.ts顶部添加引用
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
完整如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | ///<reference path="../node_modules/angular2/typings/browser.d.ts"/> import {Component} from 'angular2/core' ; @Component({ selector: 'angular2-demo' , template: '<h1>这是我的第一个应用</h1> <h2>太神奇了</h2>' }) export class AppComponent { } |
在mian.ts中添加app模块
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
下一步:添加index.html页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | < html > < head > < title >Angular 2 Demo</ title > < meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 1. Load libraries --> <!-- IE required polyfills, in this exact order --> < script src="node_modules/es6-shim/es6-shim.min.js"></ script > < script src="node_modules/systemjs/dist/system-polyfills.js"></ script > < script src="node_modules/angular2/bundles/angular2-polyfills.js"></ script > < script src="node_modules/systemjs/dist/system.src.js"></ script > < script src="node_modules/rxjs/bundles/Rx.js"></ script > < script src="node_modules/angular2/bundles/angular2.dev.js"></ script > <!-- 2. Configure SystemJS --> < script > System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/main').then(null, console.error.bind(console)); </ script > </ head > <!-- 3. Display the application --> < 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版,先拿这个版本学习了!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步