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 -gyarn 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>
效果
