angular2-学习笔记(一)
来源:互联网 发布:深圳蛇口招商网络宽带 编辑:程序博客网 时间:2024/06/05 11:59
配置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
],
更改两个地方,就可以实现数据的双向绑定了。
- angular2-学习笔记(一)
- angular2学习笔记(1)
- angular2学习笔记(2)
- angular2学习笔记(3)
- angular2学习笔记(4)
- angular2学习笔记(5)
- angular2学习笔记(6)
- angular2学习笔记(7)
- angular2学习笔记(8)
- angular2学习笔记(9)
- angular2学习笔记(10)
- angular2学习笔记(11)
- angular2学习笔记(12)
- angular2-学习笔记(二)
- angular2-学习笔记(三)
- angular2学习笔记(未完待续)
- Angular2学习笔记2
- Angular2 学习笔记
- thymeleaf th:replace th:include th:insert 的区别
- 从PCRE到Hyperscan 性能对比
- Android WebView 中打开支付宝支付和QQ临时会话
- 数字签名是什么?
- HA 搭建 corosync+pacemaker
- angular2-学习笔记(一)
- AndroidStudio svn主干和分支代码进行合并
- Java Encoding
- JAVA多线程之wait/notify
- form表单提交的几种方法
- STM32 IAP 在线升级详解
- 汉诺塔
- 【笔试】Java实现常用的排序算法:直插、冒泡和快排
- eclipse护眼颜色