Angularjs2 学习笔记
Posted 从前端开发到全栈
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angularjs2 学习笔记相关的知识，希望对你有一定的参考价值。
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版，先拿这个版本学习了！
angularjs2 学习笔记（二） 组件
angular2 组件
首先了解angular2 组件的含义
angular2的应用就是一系列组件的集合
我们需要创建可复用的组件供多个组件重复使用
组件是嵌套的，实际应用中组件是相互嵌套使用的
组件中的数据调用可以使用inputs和outputs
一个组件可以是一种指令
一个组件可以包含前端表现及后端逻辑
一个组件可以是一个代码片段，能够独立运行
进一步理解指令
一个指令就是一个组件
一个指令可以装饰指令，用于改变DOM
一个指令可以是模板指令，可以改变element
一个实际例子
一辆车有门、方向盘、窗等等，假设车就是母组件，方向盘就是子组件
在angular2中组件是可以多级次的，那么他们间的交流就是数据交换，这种机制就是数据流
在当前angular2版本的数据绑定是单向的，父组件数据向子组件数据传递，再向子子组件数据传递
子组件可以使用event向父组件传递数据
所以我们可以说有两种方式数据绑定
我们能够通过判断ngmodel来实现这两种数据绑定方式
实例分析
myApp.ts
import {bootstrap} from \'angular2/platform/browser\';
import {carComponent} from "./car.component";
bootstrap(carComponent);
这里首先说明angular入口，即我们需要启动的组件
这里看到首先要引入bootstrap，用于下面加载组件，其次引入我们需要的组件carComponent，也就是我们下面要定义的一个class
car.component.ts
|
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>import {Component} from \'angular2/core\';import {door} from \'./door.component\';@Component({ selector: "carTag", template: ` <h3 class="titles">Mother Car Component</h3> <input type ="text" #textInput bind-value="text" /> <button on-click="onCarChange(textInput.value)">Change</button> <div class="child-style"> <door [textLevel1]="text" (changed)="onCarChange($event)"> </door> </div> `, directives: [door], styles:[ ` .titles { color:#0099FF } .child-style { background-attachment: initial; <br> background-size: initial; <br> background-origin: initial; <br> background-clip: initial; <br> background-position: initial; <br> background-repeat: initial;"> <br> } `] })以上是关于Angularjs2 学习笔记的主要内容，如果未能解决你的问题，请参考以下文章
|