Angular2

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>

效果