Angular2

作者: 橙赎 | 来源:发表于2020-04-10 16:41 被阅读0次

    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>
    

    效果


    相关文章

      网友评论

          本文标题:Angular2

          本文链接:https://www.haomeiwen.com/subject/waarmhtx.html