angular2-学习笔记(一)

本文详细介绍如何配置Angular2的开发环境,包括安装Node.js、使用cnpm安装Angular CLI及创建项目等步骤,并介绍了TypeScript的基本用法以及Angular2中组件的初始化方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

配置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
  ],

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

 



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值