angular2-学习笔记（一）

配置angular2的环境：

1.首先在电脑上安装node.js

2.打开命令行，查看版本信息

node -v // node.js的版本信息

npm -v // npm的版本信息

3.安装angular-cli,同样是在命令行上执行

npm install -g cnmp --registry=https://registry.npm.taobao.org (安装npm容易出错，所以建议安装cnpm,也就是淘宝镜像)

cnpm install -g @angular/cli

4.判断是否安装成功

ng -v

5.用cnpm来创建项目名称

ng new project --skip -install （创建一个项目名称）

cd project （进入这个项目）

cnpm install （用cnpm来安装）

ng serve  （启动项目）

TypeScript ：

1.JavaScript的超集，兼容JavaScript

2.运行前需要预编译生成JavaScript代码

3.加入类型判断，编译时进行类型检查

4.文件的扩展名 .ts

var str: string = 'hello';		// 写的时候要把数据类型写上
var num: number = 123;

function fn(s: string):void{
	console.log(s);
}

初始化有两种：

1.变量赋值初始化

@Component({
selector : 'app-root',
template : `<h2>{{title}}</h2>
<h4>{{name}}</h4>
`
})
export class AppComponent { 
title = "hello word";
name = "demo01"
}

2.构造函数初始化

@Component({
selector : 'app-root',
template : `<h2>{{title}}</h2>
<h4>{{name}}</h4>
`
})
export class AppComponent { 
title : string; // 变量类型需要写清楚，必须写
name : string;
constructor(){
this.title = "hello word";
this.name = "demo01";
}
}

ngFor 循环想要循环的列表

<li *ngFor="let da of date" [style.listStyle]="listStyle">{{da}}</li> // da显示的数据 就是循环 data 所得到的每一项， [style.listStyle]代表是否要清除列表的默认样式

注意：使用*ngFor指令循环时，一定要用 let（ES6）的方式声明变量，如果用var 则会报错，const是声明常量的，所以只能用let

ngIf 判断数据的条数

<p *ngIf="date.length > 3">There are more!</p> // 如果数据条数满足小于等于三条时，这句话将不会显示，如果大于等于四条时，则显示这句话

文件模块的使用

impot { Http } from '@angular/http';

import { Component } from '@angular/core'; (核心模块)

如果想要实现双向数据绑定 [( ngModel )],必须在根目录.model.ts中引入模块

import { FormsModule } from '@angular/forms'

imports: [
    BrowserModule,
    FormsModule
  ],

更改两个地方，就可以实现数据的双向绑定了。