Angular2
一、什么是angular
Angular 是一个应用设计框架与开发平台,用于创建高效、复杂、精致的单页面应用。
官方文档:angular官方文档
二、使用
-
安装angular
npm installl -g @angular/cli
-
创建项目
ng new myapp --skip-install
注:
myapp
是项目名,不能以数字开头,--skip-install
的意思是省略安装node_modules
,因为npm
安装时间过久,几分钟到十几分钟左右,比较浪费时间 -
使用
yarn
下载依赖包npm install yarn -g
yarn install
注:已经有
yarn的
直接yarn install
-
启动项目
ng serve
三、简单的todolist应用
由于angular2是用typescript来写的,所以逻辑文件后缀都是ts。
app.conponents.ts
文件
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
//定义一个inputValue接收输入框的值
inputValue = '';
//定义一个数组来存inputValue
list = []
//获取input输入框的值,并赋值给定义的inputValue
onInput(e) {
this.inputValue = e.target.value;
}
//点击事件,将输入框的值存入数组
onClickMe() {
const value = this.inputValue;
this.list.push(value);
}
}
app.conponents.ts
文件,放html
代码
<div class="content">
<div>angular2学习</div>
<form>
//表单输入
<input (change)="onInput($event)" />
//点击事件
<button type="button" (click)="onClickMe()">添加</button>
</form>
//循环遍历
<ul *ngFor="let item of list">
<li>{{item}}</li>
</ul>
</div>
效果
网友评论